From 356d4ca5391bde1b29b98f668635b6325c321f7b Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 17:12:51 +0800 Subject: [PATCH 01/23] fix format for paper01 --- papers/2017/fe-paper-01.md | 2 ++ papers/paper.md | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/papers/2017/fe-paper-01.md b/papers/2017/fe-paper-01.md index 1c26083..129463c 100644 --- a/papers/2017/fe-paper-01.md +++ b/papers/2017/fe-paper-01.md @@ -15,8 +15,10 @@ ### 开源 * [slim.js](https://github.com/eavichay/slim.js) + Slim.js is a lightning fast library for development of native web-components. No black magic. It uses javascript’s inheritance mechanism to boost up HTML elements with superpowers. * [axios](https://github.com/mzabriskie/axios) + Promise based HTTP client for the browser and node.js ### 社区热点 diff --git a/papers/paper.md b/papers/paper.md index 010124e..1c267e1 100644 --- a/papers/paper.md +++ b/papers/paper.md @@ -1,4 +1,4 @@ ## 挨踢路透社前端半月刊 ### 2017 索引 -* [第一期(2017-03-06~2017-03-16)](./2017/fe-paper-01.md) \ No newline at end of file +* [第一期(2017-03-06/2017-03-16)](./2017/fe-paper-01.md) \ No newline at end of file From c958218bebd674effa8b74dcb86027e38a6eb1fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=B0=8F=E7=A6=8F?= Date: Sat, 4 Mar 2017 17:26:46 +0800 Subject: [PATCH 02/23] Set theme jekyll-theme-cayman --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index fc24e7a..c419263 100644 --- a/_config.yml +++ b/_config.yml @@ -1 +1 @@ -theme: jekyll-theme-hacker \ No newline at end of file +theme: jekyll-theme-cayman \ No newline at end of file From 279be3b413f0ca75636d8a65733d5535f00b976a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=B0=8F=E7=A6=8F?= Date: Sat, 4 Mar 2017 17:30:49 +0800 Subject: [PATCH 03/23] Set theme jekyll-theme-architect --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index c419263..3397c9a 100644 --- a/_config.yml +++ b/_config.yml @@ -1 +1 @@ -theme: jekyll-theme-cayman \ No newline at end of file +theme: jekyll-theme-architect \ No newline at end of file From 1a2c65ef04c37e192bb11b5bfed9e5d7ad5a32e9 Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 17:40:34 +0800 Subject: [PATCH 04/23] custom style --- assets/css/style.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 assets/css/style.scss diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..5bf642c --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,21 @@ +--- +--- + +@import "{{ site.theme }}"; + +#main-content { + width: auto; +} + +#sidebar { + display: none; +} + +body header { + background: #333; + + .inner { + color: #fff; + font-size: 18px; + } +} \ No newline at end of file From fc64121e2b1cbb4e6e5236f6f824973de1a7ff63 Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 17:45:50 +0800 Subject: [PATCH 05/23] custom styles --- assets/css/style.scss | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/assets/css/style.scss b/assets/css/style.scss index 5bf642c..a28d12d 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -15,7 +15,20 @@ body header { background: #333; .inner { - color: #fff; - font-size: 18px; + h2 { + color: #fff; + font-size: 18px; + } } -} \ No newline at end of file +} + +@media only screen and (max-width: 767px) { + header a.button { + background: #ffffff; + color: #333; + } + + header a.button:hover { + color: #111111; + } +} From e93c24a70bdf5384663d7b746ad56c78ccaedabf Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 18:19:25 +0800 Subject: [PATCH 06/23] custom styles --- assets/css/style.scss | 150 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 149 insertions(+), 1 deletion(-) diff --git a/assets/css/style.scss b/assets/css/style.scss index a28d12d..3b7ec97 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -3,6 +3,153 @@ @import "{{ site.theme }}"; +/* LAYOUT STYLES */ +body { font-family: 'Helvetica Neue', Helvetica, Arial, serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: #666; background: #fafafa url(../images/body-bg.jpg) 0 0 repeat; } + +p { margin-top: 0; } + +a { color: #2879d0; } + +a:hover { color: #2268b2; } + +header { padding-top: 40px; padding-bottom: 40px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; background: #2e7bcf url(../images/header-bg.jpg) 0 0 repeat-x; border-bottom: solid 1px #275da1; } + +header h1 { width: 540px; margin-top: 0; margin-bottom: 0.2em; font-size: 72px; font-weight: normal; line-height: 1; color: #fff; letter-spacing: -1px; } + +header h2 { width: 540px; margin-top: 0; margin-bottom: 0; font-size: 26px; font-weight: normal; line-height: 1.3; color: rgb(102, 204, 197); letter-spacing: 0; } + +.inner { position: relative; width: 940px; margin: 0 auto; } + +#content-wrapper { padding-top: 30px; border-top: solid 1px #fff; } + +#main-content { float: left; width: 690px; } + +#main-content img { max-width: 100%; } + +aside#sidebar { float: right; width: 200px; min-height: 504px; padding-left: 20px; font-size: 12px; line-height: 1.3; background: transparent url(../images/sidebar-bg.jpg) 0 0 no-repeat; } + +aside#sidebar p.repo-owner, aside#sidebar p.repo-owner a { font-weight: bold; } + +#downloads { margin-bottom: 40px; } + +a.button { width: 134px; height: 58px; padding-top: 22px; padding-left: 68px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 23px; line-height: 1.2; color: #fff; } + +a.button small { display: block; font-size: 11px; } + +header a.button { position: absolute; top: 0; right: 0; background: transparent url(../images/github-button.png) 0 0 no-repeat; } + +aside a.button { display: block; width: 138px; padding-left: 64px; margin-bottom: 20px; font-size: 21px; background: transparent url(../images/download-button.png) 0 0 no-repeat; } + +code, pre { margin-bottom: 30px; font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; font-size: 13px; color: #222; } + +code { padding: 0 3px; background-color: #f2f8fc; border: solid 1px #dbe7f3; } + +pre { padding: 20px; overflow: auto; text-shadow: none; background: #fff; border: solid 1px #f2f2f2; } + +pre code { padding: 0; color: #2879d0; background-color: #fff; border: none; } + +ul, ol, dl { margin-bottom: 20px; } + +/* COMMON STYLES */ +hr { height: 0; margin-top: 1em; margin-bottom: 1em; border: 0; border-top: solid 1px #ddd; } + +table { width: 100%; border: 1px solid #ebebeb; } + +th { font-weight: 500; } + +td { font-weight: 300; text-align: center; border: 1px solid #ebebeb; } + +form { padding: 20px; background: #f2f2f2; } + +/* GENERAL ELEMENT TYPE STYLES */ +#main-content h1 { margin-top: 0; margin-bottom: 0; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 2.8em; font-weight: normal; color: #474747; text-indent: 6px; letter-spacing: -1px; } + +#main-content h1:before { padding-right: 0.3em; margin-left: -0.9em; color: rgb(102, 204, 197); content: "/"; } + +#main-content h2 { margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 22px; font-weight: bold; color: #474747; text-indent: 4px; } + +#main-content h2:before { padding-right: 0.3em; margin-left: -1.5em; content: "//"; color: rgb(102, 204, 197); } + +#main-content h3 { margin-top: 24px; margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 18px; font-weight: bold; color: #474747; text-indent: 3px; } + +#main-content h3:before { padding-right: 0.3em; margin-left: -2em; content: "///"; color: rgb(102, 204, 197); } + +#main-content h4 { margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 15px; font-weight: bold; color: #474747; text-indent: 3px; } + +h4:before { padding-right: 0.3em; margin-left: -2.8em; content: "////"; color: rgb(102, 204, 197); } + +#main-content h5 { margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: 14px; color: #474747; text-indent: 3px; } + +h5:before { padding-right: 0.3em; margin-left: -3.2em; content: "/////"; color: rgb(102, 204, 197); } + +#main-content h6 { margin-bottom: 8px; font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; font-size: .8em; color: #474747; text-indent: 3px; } + +h6:before { padding-right: 0.3em; margin-left: -3.7em; content: "//////"; color: rgb(102, 204, 197); } + +p { margin-bottom: 20px; } + +a { text-decoration: none; } + +p a { font-weight: 400; } + +blockquote { padding: 0 0 0 30px; margin-bottom: 20px; font-size: 1.6em; border-left: 10px solid #e9e9e9; } + +ul { list-style-position: inside; list-style: disc; padding-left: 20px; } + +ol { list-style-position: inside; list-style: decimal; padding-left: 3px; } + +dl dd { font-style: italic; font-weight: 100; } + +footer { padding-top: 20px; padding-bottom: 30px; margin-top: 40px; font-size: 13px; color: #aaa; background: transparent url("../images/hr.png") 0 0 no-repeat; } + +footer a { color: #666; } + +footer a:hover { color: #444; } + +/* MISC */ +.clearfix:after { display: block; height: 0; clear: both; visibility: hidden; content: '.'; } + +.clearfix { display: inline-block; } + +* html .clearfix { height: 1%; } + +.clearfix { display: block; } + +/* #Media Queries +================================================== */ +/* Smaller than standard 960 (devices and browsers) */ +/* Tablet Portrait size to standard 960 (devices and browsers) */ +@media only screen and (min-width: 768px) and (max-width: 959px) { .inner { width: 740px; } + header h1, header h2 { width: 340px; } + header h1 { font-size: 60px; } + header h2 { font-size: 30px; } + #main-content { width: 490px; } + #main-content h1:before, #main-content h2:before, #main-content h3:before, #main-content h4:before, #main-content h5:before, #main-content h6:before { padding-right: 0; margin-left: 0; content: none; } } +/* All Mobile Sizes (devices and browser) */ +@media only screen and (max-width: 767px) { .inner { width: 93%; } + header { padding: 20px 0; } + header .inner { position: relative; } + header h1, header h2 { width: 100%; } + header h1 { font-size: 48px; } + header h2 { font-size: 24px; } + header a.button { position: relative; display: inline-block; width: auto; height: auto; padding: 5px 10px; margin-top: 15px; font-size: 13px; line-height: 1; color: #2879d0; text-align: center; background-color: rgb(102, 204, 197); background-image: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } + header a.button small { display: inline; font-size: 13px; } + #main-content, aside#sidebar { float: none; width: 100% !important; } + aside#sidebar { min-height: 0; padding: 20px 0; margin-top: 20px; background-image: none; border-top: solid 1px #ddd; } + aside#sidebar a.button { display: none; } + #main-content h1:before, #main-content h2:before, #main-content h3:before, #main-content h4:before, #main-content h5:before, #main-content h6:before { padding-right: 0; margin-left: 0; content: none; } } +/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ +/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ +#main-content { width: auto; } + +#sidebar { display: none; } + +body header { background: #333; } +body header .inner h2 { color: #fff; font-size: 18px; } + +@media only screen and (max-width: 767px) { header a.button { background: #ffffff; color: #333; } + header a.button:hover { color: #111111; } } + #main-content { width: auto; } @@ -12,7 +159,8 @@ } body header { - background: #333; + background: rgb(102, 204, 197); + border-bottom: none; .inner { h2 { From 2cf13790c29385106f601315b348656a345c74ad Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 22:06:19 +0800 Subject: [PATCH 07/23] update style --- assets/css/style.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/assets/css/style.scss b/assets/css/style.scss index 3b7ec97..5c33c28 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -158,6 +158,21 @@ body header .inner h2 { color: #fff; font-size: 18px; } display: none; } +body { + font-family: Helvetica Neue,Helvetica,Tahoma,Arial,STXihei,Microsoft YaHei,微软雅黑,sans-serif; + a:link { + color: rgb(102, 204, 197); + } + + a:hover { + color: #00c4a7; + } + + a:visited { + color: #aaa; + } +} + body header { background: rgb(102, 204, 197); border-bottom: none; From a0b267b95abd06cfd789a58d9d487d411bc10cc8 Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 22:13:59 +0800 Subject: [PATCH 08/23] update style --- assets/css/style.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/assets/css/style.scss b/assets/css/style.scss index 5c33c28..2ca8fe7 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -171,6 +171,16 @@ body { a:visited { color: #aaa; } + + header { + a.button { + color: #fff; + + &:hover { + color: #eee; + }; + } + } } body header { @@ -188,10 +198,5 @@ body header { @media only screen and (max-width: 767px) { header a.button { background: #ffffff; - color: #333; - } - - header a.button:hover { - color: #111111; } } From 715d0e5c140a18887d1056cd24fb1ef078f9447b Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 22:38:46 +0800 Subject: [PATCH 09/23] custom layout --- _layouts/default.html | 38 +++++++++++++++++++++++++++++ {_layout => source}/paper-layout.md | 0 wiki/index.md | 5 +++- wiki/react/index.md | 21 ++++++++++++++++ 4 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 _layouts/default.html rename {_layout => source}/paper-layout.md (100%) create mode 100644 wiki/react/index.md diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..f8d434b --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + {{ page.title }} + + + +
+
+

{{ site.name }}

+

Open Source version of the GitHub Pages theme, now for Jekyll

+ View project on GitHub +
+
+ +
+
+
+ + {{ content }} + +
+
+
+ + \ No newline at end of file diff --git a/_layout/paper-layout.md b/source/paper-layout.md similarity index 100% rename from _layout/paper-layout.md rename to source/paper-layout.md diff --git a/wiki/index.md b/wiki/index.md index c0a8901..2e9da9e 100644 --- a/wiki/index.md +++ b/wiki/index.md @@ -1,3 +1,6 @@ ## wiki -### [vue](./vue/index.md) \ No newline at end of file +### 前端框架 + +* [vue](./vue/index.md) +* [react](./react/index.md) \ No newline at end of file diff --git a/wiki/react/index.md b/wiki/react/index.md new file mode 100644 index 0000000..ad054d4 --- /dev/null +++ b/wiki/react/index.md @@ -0,0 +1,21 @@ +## react.js + +* github: [https://github.com/facebook/react](https://github.com/facebook/react) + +* 官网(英文): [https://facebook.github.io/react/](https://facebook.github.io/react/) + +### 中文文档 + +* [react中文](http://wiki.jikexueyuan.com/project/react/) +* [react入门教程-阮一峰](http://www.ruanyifeng.com/blog/2015/03/react.html) + + +## flux + +* github: [https://github.com/facebook/flux](https://github.com/facebook/flux) + +* [flux入门教程-阮一峰](http://www.ruanyifeng.com/blog/2016/01/flux.html) + +## redux + +* 官方文档: [http://redux.js.org/](http://redux.js.org/) \ No newline at end of file From 8ec1b829309797523bcf519a43d4e156c7538738 Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 22:44:12 +0800 Subject: [PATCH 10/23] custom layout --- _layouts/default.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index f8d434b..0e2cf07 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -5,9 +5,8 @@ - - - + + - {{ page.title }} + {{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }}
-

{{ site.name }}

-

Open Source version of the GitHub Pages theme, now for Jekyll

- View project on GitHub + +

{{ site.title | default: site.github.repository_name }}

+ +

{{ site.description | default: site.github.project_tagline }}

+ {% if site.github.is_project_page %} + View project on GitHub + {% endif %} + {% if site.github.is_user_page %} + Follow me on GitHub + {% endif %}
- {{ content }} -
+ + \ No newline at end of file diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..5b12153 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,7 @@ +--- +layout: default +--- +

{{ page.title }}

+

{{ page.date | date_to_string }}

+ +{{ content }} \ No newline at end of file diff --git a/index.md b/index.md index 5af3c23..cd4d2aa 100644 --- a/index.md +++ b/index.md @@ -9,14 +9,3 @@ ### [挨踢路透社知乎专栏](https://zhuanlan.zhihu.com/future-fe) - - - diff --git a/posts/html-guide.md b/posts/html-guide.md new file mode 100644 index 0000000..f32d4b5 --- /dev/null +++ b/posts/html-guide.md @@ -0,0 +1,128 @@ +title: html不能这么写，你知道吗？ +date: 2015-11-17 16:51:15 +type: post +tags: html +archives: pl +--- + +* a标签不可以嵌套交互式元素 +* 块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素 +* p标签不能包含块级元素 +* 这些标签不可包含块级元素 +* li标签可以包含div以及ul，ul的子元素应该只有li +* 元素并排（块级和块级并列，内联和内联并列) + + + +## 标签错误嵌套 + +### 语法错误 + +* a标签不可以嵌套交互式元素[a， audio（如果设置了controls属性）， button， details， embed， iframe， img（如果设置了usemap属性）， input（如果type属性不为hidden状态）， keygen， label， menu（如果type属性为toolbar状态），object（如果设置了usemap属性）， select， textarea， video（如果设置了controls属性）] + +```css +/*下面这些写法浏览器是不能够正常解析的*/ + + click + + + + + + + + + + +``` +click + +有的虽然解析正常，但却达不到预想的目的 + +### 语义错误 + +页面可能正常解析，但不符合语义。这是因为浏览器自带容错机制，对于不规范的写法也能够正确的解析，各浏览器的容错机制不同，所以尽量按规范来写。 + +* 块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素 + +```css +/*规范的写法*/ +
+

jikexueyuan

+

IT education

+
+/*不规范的写法*/ + +
wrong
+ +``` + +* p标签不能包含块级元素 + +```css +/*不规范的写法*/ +

+

+

+

+

+

+``` +* 如下的标签不可包含块级元素 + +```css +h1、h2、h3、h4、h5、h6、p + +/*不规范的写法*/ +

+

+ +

+

+

+``` + +* li标签可以包含div以及ul(这个是不是很牛，可以包含父级元素) + +```css +/*规范的写法*/ +
  • +
      +
    • +
    • +
    • +
    +
    +
    • +/*不规范的写法*/ + +``` + +* 元素并排（块级和块级并列，内联和内联并列) + +```css +/*规范的写法*/ +
    +

    +

    +
    +
    + + + +
    + +/*不规范的写法*/ +
    + 我是内联元素 +

    我是块级元素

    +
    +``` + +如有错误，请指出，欢迎补充其它一些错误情况。 + From e1a1d88fd5523e01a23eb5bc5b1c40caa15dd72c Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 23:00:57 +0800 Subject: [PATCH 12/23] custom layout --- {posts => _posts}/html-guide.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {posts => _posts}/html-guide.md (100%) diff --git a/posts/html-guide.md b/_posts/html-guide.md similarity index 100% rename from posts/html-guide.md rename to _posts/html-guide.md From 9cee348898e0755116a69e76a3b5617f68b4ba8e Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sat, 4 Mar 2017 23:27:51 +0800 Subject: [PATCH 13/23] add javascript wiki --- _layouts/default.html | 2 + _layouts/post.html | 7 --- _posts/html-guide.md | 128 --------------------------------------- index.md | 2 +- papers/paper.md | 2 +- readme.md | 2 +- wiki/css/index.md | 0 wiki/html/index.md | 0 wiki/index.md | 10 ++- wiki/javascript/index.md | 5 ++ 10 files changed, 18 insertions(+), 140 deletions(-) delete mode 100644 _layouts/post.html delete mode 100644 _posts/html-guide.md create mode 100644 wiki/css/index.md create mode 100644 wiki/html/index.md create mode 100644 wiki/javascript/index.md diff --git a/_layouts/default.html b/_layouts/default.html index 2f8a957..f773a8c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -5,7 +5,9 @@ + + - -## 标签错误嵌套 - -### 语法错误 - -* a标签不可以嵌套交互式元素[a， audio（如果设置了controls属性）， button， details， embed， iframe， img（如果设置了usemap属性）， input（如果type属性不为hidden状态）， keygen， label， menu（如果type属性为toolbar状态），object（如果设置了usemap属性）， select， textarea， video（如果设置了controls属性）] - -```css -/*下面这些写法浏览器是不能够正常解析的*/ - - click - - - - - - - - - - -``` -click - -有的虽然解析正常，但却达不到预想的目的 - -### 语义错误 - -页面可能正常解析，但不符合语义。这是因为浏览器自带容错机制，对于不规范的写法也能够正确的解析，各浏览器的容错机制不同，所以尽量按规范来写。 - -* 块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素 - -```css -/*规范的写法*/ -
    -

    jikexueyuan

    -

    IT education

    -
    -/*不规范的写法*/ - -
    wrong
    -     -``` - -* p标签不能包含块级元素 - -```css -/*不规范的写法*/ -

    -

    -

    -

    -

    -

    -``` -* 如下的标签不可包含块级元素 - -```css -h1、h2、h3、h4、h5、h6、p - -/*不规范的写法*/ -

    -

    - -

    -

    -

    -``` - -* li标签可以包含div以及ul(这个是不是很牛，可以包含父级元素) - -```css -/*规范的写法*/ -
  • -
      -
    • -
    • -
    • -
    -
    -
    • -/*不规范的写法*/ - -``` - -* 元素并排（块级和块级并列，内联和内联并列) - -```css -/*规范的写法*/ -
    -

    -

    -
    -
    - - - -
    - -/*不规范的写法*/ -
    - 我是内联元素 -

    我是块级元素

    -
    -``` - -如有错误，请指出，欢迎补充其它一些错误情况。 - diff --git a/index.md b/index.md index cd4d2aa..f04351a 100644 --- a/index.md +++ b/index.md @@ -2,7 +2,7 @@ ## navigator -### [挨踢路透社前端半月刊](./papers/paper.md) +### [挨踢路透社前端月刊](./papers/paper.md) ### [挨踢路透社前端 wiki](./wiki/index.md) diff --git a/papers/paper.md b/papers/paper.md index 1c267e1..2a2b487 100644 --- a/papers/paper.md +++ b/papers/paper.md @@ -1,4 +1,4 @@ ## 挨踢路透社前端半月刊 ### 2017 索引 -* [第一期(2017-03-06/2017-03-16)](./2017/fe-paper-01.md) \ No newline at end of file +* [第一期（3月）](./2017/fe-paper-01.md) \ No newline at end of file diff --git a/readme.md b/readme.md index 434f216..d34561a 100644 --- a/readme.md +++ b/readme.md @@ -2,7 +2,7 @@ 你是否每天都会读几篇技术文章，每天关注大牛的微博，在 github 上 fork/star 了许多的项目，混迹于各社区论坛，但依然感觉空荡荡的。 -在这里我们希望能够给你提供精简必要的资源，避免无意义的学习。与其盲目阅读，不如来看挨踢路透社前端半月刊。 +在这里我们希望能够给你提供精简必要的资源，避免无意义的学习。与其盲目阅读，不如来看挨踢路透社前端月刊。 我们希望在此你能看到： diff --git a/wiki/css/index.md b/wiki/css/index.md new file mode 100644 index 0000000..e69de29 diff --git a/wiki/html/index.md b/wiki/html/index.md new file mode 100644 index 0000000..e69de29 diff --git a/wiki/index.md b/wiki/index.md index 2e9da9e..30fab63 100644 --- a/wiki/index.md +++ b/wiki/index.md @@ -1,6 +1,12 @@ ## wiki +### 语法系列教程 + +* [CSS 篇](./css/index.md) +* [HTML 篇](./html/index.md) +* [Javascript 篇](./javascript/index.md) + ### 前端框架 -* [vue](./vue/index.md) -* [react](./react/index.md) \ No newline at end of file +* [vue系列](./vue/index.md) +* [react系列](./react/index.md) diff --git a/wiki/javascript/index.md b/wiki/javascript/index.md new file mode 100644 index 0000000..25bc204 --- /dev/null +++ b/wiki/javascript/index.md @@ -0,0 +1,5 @@ +### Javascript 语法教程 + +* [JavaScript 教程 - 廖雪峰](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/) +* [Javascript 教程 - 阮一峰](http://javascript.ruanyifeng.com/) +* [ES6 入门教程 - 阮一峰](http://es6.ruanyifeng.com/) \ No newline at end of file From 6dd5b01c58a0a4f33f02ddb0863213b20faff54e Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Sun, 5 Mar 2017 14:49:19 +0800 Subject: [PATCH 14/23] update readme --- assets/css/style.scss | 1 - readme.md | 13 +++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/assets/css/style.scss b/assets/css/style.scss index 2ca8fe7..9e0ab99 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -169,7 +169,6 @@ body { } a:visited { - color: #aaa; } header { diff --git a/readme.md b/readme.md index d34561a..954d096 100644 --- a/readme.md +++ b/readme.md @@ -23,6 +23,19 @@ wiki 将作为资源整理以及收集的栏目. +#### wiki待完善 + +* git/github 资源 +* webpack 资源 +* fuse-box +* rollup +* next.js +* nuxt.js +* Nodejs +* 在线工具 +* 开发必备库系列 +* more and more + ### 如何投稿 * 通过 Issue From 5a649734ae5780ac8126e4c77350e1131da33c78 Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Mon, 6 Mar 2017 10:50:43 +0800 Subject: [PATCH 15/23] =?UTF-8?q?add=20vue=20=E6=BA=90=E7=A0=81=E5=AD=A6?= =?UTF-8?q?=E4=B9=A0=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/style.scss | 2 ++ index.md | 4 ++++ papers/paper.md | 2 +- wiki/vue/index.md | 7 ++++++- 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/assets/css/style.scss b/assets/css/style.scss index 9e0ab99..9eedc2b 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -169,6 +169,7 @@ body { } a:visited { + color: #666; } header { @@ -197,5 +198,6 @@ body header { @media only screen and (max-width: 767px) { header a.button { background: #ffffff; + color: #666; } } diff --git a/index.md b/index.md index f04351a..25042b6 100644 --- a/index.md +++ b/index.md @@ -9,3 +9,7 @@ ### [挨踢路透社知乎专栏](https://zhuanlan.zhihu.com/future-fe) +## 热门资源 + +* [vue 系列资源](./wiki/vue/index.md) + diff --git a/papers/paper.md b/papers/paper.md index 2a2b487..84c9b5f 100644 --- a/papers/paper.md +++ b/papers/paper.md @@ -1,4 +1,4 @@ -## 挨踢路透社前端半月刊 +## 挨踢路透社前端月刊 ### 2017 索引 * [第一期（3月）](./2017/fe-paper-01.md) \ No newline at end of file diff --git a/wiki/vue/index.md b/wiki/vue/index.md index 4901469..f1d586b 100644 --- a/wiki/vue/index.md +++ b/wiki/vue/index.md @@ -17,4 +17,9 @@ ### vue-router * github: [https://github.com/vuejs/vue-router](https://github.com/vuejs/vue-router) -* 文档: [http://router.vuejs.org/](http://router.vuejs.org/) \ No newline at end of file +* 文档: [http://router.vuejs.org/](http://router.vuejs.org/) + +### vue 源码学习 + +* [deep-in-vue (by yangxiaofu)](https://github.com/xiaofuzi/deep-in-vue) +* [vue 源码学习系列 (by 梁少峰)](https://github.com/youngwind/blog/labels/Vue) \ No newline at end of file From baa5b9207bd25bb35526d73bdf75e4ed83ec4ea8 Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Tue, 7 Mar 2017 10:43:58 +0800 Subject: [PATCH 16/23] update vue wiki; --- wiki/vue/index.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/wiki/vue/index.md b/wiki/vue/index.md index f1d586b..10c16f9 100644 --- a/wiki/vue/index.md +++ b/wiki/vue/index.md @@ -22,4 +22,11 @@ ### vue 源码学习 * [deep-in-vue (by yangxiaofu)](https://github.com/xiaofuzi/deep-in-vue) -* [vue 源码学习系列 (by 梁少峰)](https://github.com/youngwind/blog/labels/Vue) \ No newline at end of file +* [vue 源码学习系列 (by 梁少峰)](https://github.com/youngwind/blog/labels/Vue) + +### 资源链接 + +* [awesome-vue](https://github.com/vuejs/awesome-vue) +* [https://alligator.io/vuejs/](https://alligator.io/vuejs/) +* [vue job](https://vuejobs.com/?ref=vuejs) +* [vue 论坛](https://forum.vuejs.org/c/chinese) \ No newline at end of file From a9f905c3e092e9f50b9dc1f623f37ccf40b7a660 Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Tue, 7 Mar 2017 11:02:54 +0800 Subject: [PATCH 17/23] update styles --- assets/css/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/css/style.scss b/assets/css/style.scss index 9eedc2b..0329383 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -161,7 +161,7 @@ body header .inner h2 { color: #fff; font-size: 18px; } body { font-family: Helvetica Neue,Helvetica,Tahoma,Arial,STXihei,Microsoft YaHei,微软雅黑,sans-serif; a:link { - color: rgb(102, 204, 197); + color: #009999; } a:hover { @@ -169,7 +169,7 @@ body { } a:visited { - color: #666; + color: #009999; } header { @@ -196,7 +196,7 @@ body header { } @media only screen and (max-width: 767px) { - header a.button { + body header a.button { background: #ffffff; color: #666; } From 635aac7fba269e14131231d5e21161717b8398c5 Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Tue, 7 Mar 2017 20:09:02 +0800 Subject: [PATCH 18/23] add job dictionary --- wiki/dictionary/job.md | 44 ++++++++++++++++++++++++++++++++++++++++++ wiki/index.md | 4 ++++ 2 files changed, 48 insertions(+) create mode 100644 wiki/dictionary/job.md diff --git a/wiki/dictionary/job.md b/wiki/dictionary/job.md new file mode 100644 index 0000000..e2c617c --- /dev/null +++ b/wiki/dictionary/job.md @@ -0,0 +1,44 @@ +## 挨踢词典-职位 + +按字母先后顺序排序 + +* 前端开发工程师 - (FE) + * Front End Engineer + * Front-end Web developer + * Front-end developer + +现在大多数的公司都简称前端工程师为 fe, 少数的公司会将 php 也划分在内（如百度金融). + +* ios/android 开发工程师 - [NA/native] + * Mobile App Development Engineer + * native developer + +* 运维工程师、运维开发工程师 - [OP] + * Operation Developer + +主要负责上线系统及服务器的管理、维护。 + +* 产品经理 - [PM] + * Product Manager + + +* 后端开发工程师 - [RD] + * Research Developer + +许多公司称后端开发工程师为 RD，一般情况是暗指编写数据接口的开发者，虽然其实际含义可代表所有类型的开发者。 + +* 测试开发工程师 - [SDET/QA] + * Test Development Engineer + * Quality Assurance + +大多数情况下都会直接以 '测试' 或是 QA 称呼测试开发工程师，SDET 实在不好读。 + +* 视觉设计师 - [UI] + * user interface + +视觉设计师的工作主要是在 PM 产出的原型图给出设计稿，设计稿基本确定了产品的最终呈现效果。 + +* 交互设计师/用户体验设计师 - [UX/UE] + * Users Experience Design + +负责交互界面的设计，确认产品的交互模型、细节等。 \ No newline at end of file diff --git a/wiki/index.md b/wiki/index.md index 30fab63..e72cc5c 100644 --- a/wiki/index.md +++ b/wiki/index.md @@ -10,3 +10,7 @@ * [vue系列](./vue/index.md) * [react系列](./react/index.md) + +## 挨踢词典 + +### [职位名词解释](./dictionary/job.md) \ No newline at end of file From 971ce5d761a9b10cc5a665b949e408402a246361 Mon Sep 17 00:00:00 2001 From: yangxiaofu Date: Tue, 7 Mar 2017 20:12:46 +0800 Subject: [PATCH 19/23] add job dictionary --- wiki/dictionary/job.md | 13 +++++++++++++ wiki/index.md | 2 ++ 2 files changed, 15 insertions(+) diff --git a/wiki/dictionary/job.md b/wiki/dictionary/job.md index e2c617c..92e95a1 100644 --- a/wiki/dictionary/job.md +++ b/wiki/dictionary/job.md @@ -9,35 +9,48 @@ 现在大多数的公司都简称前端工程师为 fe, 少数的公司会将 php 也划分在内（如百度金融). +
    + * ios/android 开发工程师 - [NA/native] * Mobile App Development Engineer * native developer +
    + * 运维工程师、运维开发工程师 - [OP] * Operation Developer 主要负责上线系统及服务器的管理、维护。 +
    + * 产品经理 - [PM] * Product Manager +
    * 后端开发工程师 - [RD] * Research Developer 许多公司称后端开发工程师为 RD，一般情况是暗指编写数据接口的开发者，虽然其实际含义可代表所有类型的开发者。 +
    + * 测试开发工程师 - [SDET/QA] * Test Development Engineer * Quality Assurance 大多数情况下都会直接以 '测试' 或是 QA 称呼测试开发工程师，SDET 实在不好读。 +
    + * 视觉设计师 - [UI] * user interface 视觉设计师的工作主要是在 PM 产出的原型图给出设计稿，设计稿基本确定了产品的最终呈现效果。 +
    + * 交互设计师/用户体验设计师 - [UX/UE] * Users Experience Design diff --git a/wiki/index.md b/wiki/index.md index e72cc5c..685478b 100644 --- a/wiki/index.md +++ b/wiki/index.md @@ -11,6 +11,8 @@ * [vue系列](./vue/index.md) * [react系列](./react/index.md) +
    + ## 挨踢词典 ### [职位名词解释](./dictionary/job.md) \ No newline at end of file From 43cea78fc5e5c84cbacb7846059a89db4b929473 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=90=9B=E5=B2=A9?= Date: Sat, 11 Mar 2017 10:07:23 +0800 Subject: [PATCH 20/23] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=83=A8=E5=88=86Vue?= =?UTF-8?q?=E5=A5=BD=E6=96=87=E7=AB=A0=E4=B8=8Eui=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- wiki/vue/index.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/wiki/vue/index.md b/wiki/vue/index.md index 10c16f9..a174ef2 100644 --- a/wiki/vue/index.md +++ b/wiki/vue/index.md @@ -23,10 +23,14 @@ * [deep-in-vue (by yangxiaofu)](https://github.com/xiaofuzi/deep-in-vue) * [vue 源码学习系列 (by 梁少峰)](https://github.com/youngwind/blog/labels/Vue) +* [Vue源码详解:compile,link,依赖,批处理...一网打尽，全解析! (by Chuck Liu)](http://chuckliu.me/#!/posts/58aefe61820ad92fbbe9a4e0) ### 资源链接 * [awesome-vue](https://github.com/vuejs/awesome-vue) * [https://alligator.io/vuejs/](https://alligator.io/vuejs/) * [vue job](https://vuejobs.com/?ref=vuejs) -* [vue 论坛](https://forum.vuejs.org/c/chinese) \ No newline at end of file +* [vue 论坛](https://forum.vuejs.org/c/chinese) +* [element](https://element.eleme.io/) +* [Vux](https://vux.li/) +* [iView](https://www.iviewui.com/) \ No newline at end of file From 58474dd4ae6b0ecadd4865b490a3fd744a4fec4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=90=9B=E5=B2=A9?= Date: Sat, 11 Mar 2017 10:08:09 +0800 Subject: [PATCH 21/23] =?UTF-8?q?=E5=A5=BD=E6=96=87=E8=A1=A5=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- wiki/vue/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/wiki/vue/index.md b/wiki/vue/index.md index a174ef2..b8651f1 100644 --- a/wiki/vue/index.md +++ b/wiki/vue/index.md @@ -23,6 +23,7 @@ * [deep-in-vue (by yangxiaofu)](https://github.com/xiaofuzi/deep-in-vue) * [vue 源码学习系列 (by 梁少峰)](https://github.com/youngwind/blog/labels/Vue) +* [Vue2.0源码阅读笔记--双向绑定实现原理(by Eraser)](https://www.cnblogs.com/wj204/p/6423478.html) * [Vue源码详解:compile,link,依赖,批处理...一网打尽，全解析! (by Chuck Liu)](http://chuckliu.me/#!/posts/58aefe61820ad92fbbe9a4e0) ### 资源链接 From 2540a0c1d4603316c3092e933dfc1a27123845ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=90=9B=E5=B2=A9?= Date: Mon, 13 Mar 2017 09:51:19 +0800 Subject: [PATCH 22/23] =?UTF-8?q?webassembly=E7=B3=BB=E5=88=9701?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\346\265\205\350\260\210WebAssembly.md" | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 "wiki/javascript/\346\265\205\350\260\210WebAssembly.md" diff --git "a/wiki/javascript/\346\265\205\350\260\210WebAssembly.md" "b/wiki/javascript/\346\265\205\350\260\210WebAssembly.md" new file mode 100644 index 0000000..64153bf --- /dev/null +++ "b/wiki/javascript/\346\265\205\350\260\210WebAssembly.md" @@ -0,0 +1,47 @@ +# 浅谈 WebAssembly + +> 作者：Lin Clark +> 英文原文：[A cartoon intro to WebAssembly](https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/) + +WebAssembly的发展很快，你可能已经听说过它了。但是什么让它发展的如此之快？ + +在这个系列中，我会向你解释WebAssembly为什么会发展的如此之快。 + +## 那么，WebAssembly是什么呢？ + +WebAssembly是一种用JavaScript以外的编程语言编写代码，并在浏览器中运行该代码的一种方法。所以在与JavaScript比较下，人们认为WebAssembly相对发展更快速。 + +我不想表明它是一个只能使用WebAssembly或JavaScript其中之一的情况。事实上，我们期望的是开发人员可以再在同一个应用程序中使用WebAssembly和JavaScript。 + +但是比较这两者是有用的，因为你可以了解WebAssembly的潜在影响。 + +## 一些性能历史 + +JavaScript创建于1995年，他的设计不是为了性能更快速。所以在被设计出的前十年里，它的性能和发展并不快速。 + +之后浏览器开始变得更具有竞争力。 + +2008年的时候，被人们称为的性能大战开始了。许多浏览器增加了即时编译器，也被称为JITs。当JavaScript运行时，JIT可以看到模式并使代码在基于这些模式里运行更快。 + +这些JIT的引入导致了JavaScript的性能拐点。JS的执行速度快了10倍。 + +![webassembly-01](http://7xqj3u.com1.z0.glb.clouddn.com/webassembly-01.png) + +通过这种性能的改进，JavaScript开始被用于期初没有被期望用于的场景。例如用于服务端编程的Node.js。这种性能的提高使得在一个全新的类的问题上使用JavaScript变成了可能。 + +现在我们可能有面临另一个WebAssembly的拐点。 + +![webassembly-02](http://7xqj3u.com1.z0.glb.clouddn.com/webassembly-02.png) + +因此，让我们深入了解细节，了解什么使WebAssembly更快。 + +### 背景相关知识 +* [JavaScript Just-in-time (JIT) 工作原理](https://zhuanlan.zhihu.com/p/25669120) +* [编译器如何生成汇编](https://zhuanlan.zhihu.com/p/25718411) + +### 当前WebAssembly 相关进展 +* [Creating and working with WebAssembly modules](https://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/) +* [What makes WebAssembly fast?](https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/) + +### WebAssembly的未来发展 +* [Where is WebAssembly now and what’s next?(翻译中)](https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/) \ No newline at end of file From a29e299416e096074fcdf98cdef290b0f0bf84f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=90=9B=E5=B2=A9?= Date: Wed, 15 Mar 2017 00:43:01 +0800 Subject: [PATCH 23/23] =?UTF-8?q?webassembly=E7=9A=84=E4=BB=8A=E7=94=9F?= =?UTF-8?q?=E6=9D=A5=E4=B8=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...12\347\224\237\346\235\245\344\270\226.md" | 95 +++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 "wiki/javascript/WebAssembly\347\232\204\344\273\212\347\224\237\346\235\245\344\270\226.md" diff --git "a/wiki/javascript/WebAssembly\347\232\204\344\273\212\347\224\237\346\235\245\344\270\226.md" "b/wiki/javascript/WebAssembly\347\232\204\344\273\212\347\224\237\346\235\245\344\270\226.md" new file mode 100644 index 0000000..bef09b9 --- /dev/null +++ "b/wiki/javascript/WebAssembly\347\232\204\344\273\212\347\224\237\346\235\245\344\270\226.md" @@ -0,0 +1,95 @@ +# WebAssembly的今世来生 + +> 作者：[Lin Clark](http://code-cartoons.com/) +> 英文原文：[Where is WebAssembly now and what’s next?](https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/) + +本文是WebAssembly系列的第六篇文章，如果你没有阅读过之前的文章，建议先从[这里开始阅读](https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/) + +在2月28日，四大主流浏览器厂商宣布[WebAssembly的核心已经完成](https://lists.w3.org/Archives/Public/public-webassembly/2017Feb/0002.html)，并提供一个浏览器已经开始装载的稳定的初始版本。 + +![enter image description here](http://7xqj3u.com1.z0.glb.clouddn.com/webassembly601500.png) + +它提供了一个浏览器可以运行的稳定的内核。这个内核并不包括社区计划的所有的功能，但它足以使WebAssembly快速和可用。 + +有了这个，开发者可以开始发布WebAssembly代码了。对于早期的浏览器版本，开发者可以上传一个asm.js版本的代码。因为asm.js是JavaScript的一个子集，任何JS引擎都可以运行它。通过Emscripten，你可以将同一个应用编译为WebAssembly和asm.js。 + +即使在最初的版本中，WebAssembly也可以运行很快。但是，通过修复和增加新功能可以使WebAssembly变得更快。 + +## 提升WebAssembly在浏览器中的性能 + +一些速度上的提升讲来自于浏览器引擎对于WebAssembly支持上的提升。浏览器厂商在独立处理这些问题。 + +### JS和WebAssembly之间更快的函数调用 + +目前，在JS代码中调用WebAssembly函数比它需要的要慢，那是因为，它必须做一些所谓的“蹦床”。JIT不知道如何直接处理WebAssembly，所以它必须通过WebAssembly路由到某处。这个引擎本身是一小段代码，它设置为运行优化后的WebAssembly代码。 + +![enter image description here](http://7xqj3u.com1.z0.glb.clouddn.com/webassembly602500.png) + +这可能比如果JIT知道如何直接处理它的速度慢100倍。 + +如果你将一个独立的大任务传递到WebAssembly模块，你不会注意到这个性能消耗。但是如果你在WebAssembly与JS之间反复调用（就像你处理小任务似的），那么，这个性能消耗是显而易见的。 + +### 更快的加载时间 + +JIT必须在更快的加载时间和更快的执行时间之间进行权衡。如果你在编译和提前优化上花费很多时间，这加快了执行速度，但它减慢了启动速度。 + +有很多正在进行的工作去平衡前期的编译工作（确保在代码执行的时候没有Jank）。事实上，绝大部分代码并不值得花足够的时间去优化它。 + +由于WebAssembly不需要推测将要使用的类型，因此引擎不必担心在运行时监听类型。这为它们提供了更多的选项，例如将编译与执行并行。 + +此外，近期添加的JavaScript API将允许WebAssembly的流式编译。 这意味着引擎在字节仍在加载的时候就开始编译。 + +在火狐浏览器中，我们正在开发一个双编译系统。一个编译器将提前运行，并在代码优化方面做的相当不错。当运行代码时，另一个编译器将在后台进行优化，完全优化后的代码版本将在准备就绪时进行交换。 + +## 在规范中添加post-MVP功能 + +WebAssembly的目标之一就是制定小代码块和测试方式，而不是设计前面的一切。 + +这意味着有很多期望的功能，但并不是100%都经过深思熟虑。它们将必须通过规范的流程，所有的浏览器厂商都已经积极参与了。 + +这些功能称为未来功能。 我将介绍其中一小部分。 + +### 直接使用DOM + +目前，没有办法与DOM交互。这意味着你不能像element.innerHTML那样在WebAssembly中更新一个节点。 + +相反，你必须通过JS去设置值，并将值传递回JavaScript的调用者。另一方面，可以在WebAssembly内调用JavaScript函数——JavaScript和WebAssembly函数都可以在WebAssembly模块中的引入。 + +![enter image description here](http://7xqj3u.com1.z0.glb.clouddn.com/webassembly603500.png) + +无论哪种形式，通过JavaScript访问可能会比直接访问要慢。 WebAssembly的某些应用程序可能会被阻止，直到被解决。 + +### 共享内存并发 + +加速代码运行的一种方法是使代码的不同部分同时运行。这有时可能会造成Backfire，虽然由于线程之间通信的消耗要比一开始的任务进程更占用时间。 + +但是如果你可以在线程之间共享内存，它将会降低性能消耗。为此WebAssembly将使用JavaScript的新SharedFrayBuffer。一旦在浏览器中就位，工作组可以开始指定WebAssembly如何使用它们。 + +### 单指令、多数据（SIMD） + +如果你阅读其他帖子或观看有关WebAssembly的讲座，您可能会听到SIMD支持。它代表单指令，多数据。 这是并行运行的另一种方式。 + +SIMD的使用可以获取大的数据结构，例如不同数目的向量，并且同时将相同的指令应用于不同的部分。这样，它可以大大加快各种复杂计算的游戏或VR的运行速度。 + +这对于一般的网络应用开发者来说并不是特别重要。但对于使用多媒体的开发人员来说非常重要，例如游戏开发者。 + +### 异常处理 + +许多语言像C++一样使用异常处理。但是，异常尚未指定为WebAssembly的一部分。 + +如果你使用Emscripten编译代码，它将模拟一些编译优化级别的异常处理。这是很慢，但你可以使用[DISABLE_EXCEPTION_CATCHING](https://kripken.github.io/emscripten-site/docs/optimizing/Optimizing-Code.html#c-exceptions)标记来关闭它。 + +一旦在WebAssembly本地处理了异常，这种仿真就不是必需的。 + +### 其他改进 + +未来的某些功能不会影响性能，但会使开发人员更容易使用WebAssembly。 + +* **源码开发工具**：目前，在浏览器中调试WebAssembly就像调试原始汇编。很少有开发人员可以将其源码映射到程序集。我们正在研究如何改进支持工具，以便开发人员可以调试其源码。 +* **垃圾回收**：如果您可以提前定义类型，那么您应该可以将代码转换为WebAssembly。 所以使用类似TypeScript的代码应该可以编译到WebAssembly。目前唯一的困扰是，WebAssembly不知道如何与现有的垃圾收集器（如JS引擎中内置的垃圾收集器）进行交互。这个未来功能的想法是让WebAssembly使用一组低级GC类型和操作对内置GC进行访问。 +* **ES6模块集成**：浏览器目前正在添加对使用script标签加载JavaScript模块的支持。 添加此功能后，即使URL指向WebAssembly模块，