做为一名从切页面转到写js的前端开发工程师，看到这道题目非常有感触啊。&br&&br&先感性说一下，我还记得我第一年工作的时候，写css和html的时候听很high的歌，但是写js的时候，是绝对不敢听歌的。&br&&br&再理性的说一下，我记得我当时的页面兼容程度是ie678和firefox，恩。。没错，那时候还没有chrome。。&br&&br&盒模型什么的概念我也是几年前才知道的，我还记得我当时面试时，前端要求必须会div+css页面布局。&br&&br&你看的没错，当时很多网站都是table布局的。。很多人对div这个概念都不太理解，更别说什么双飞翼，圣杯布局，9/12宫格了。&br&&br&恩。。但是我记得我巅峰时期可以一口气切出兼容4个浏览器的页面，基本是一气呵成，不需要再单独调试，基本上是连着hack一起写完的。&br&&br&要说现在达到什么水平才行，我总结几条吧，也不知道算不算落伍。&br&&br&1，盒模型概念一定清楚，知道自己想要的布局到底该写多宽多高。&br&2，渲染模式要分清楚，怪异和标准，怎么转换，说白了也是盒模型表现的事。&br&3，不同浏览器的css hack怎么写，选择器的优先级弄明白怎么调整。&br&4，所有的html标签都知道语义，所有的tag attribute都知道什么含义，记住是所有，并且知道默认样式是什么，了解如何reset。&br&5，知道css3动画的所有细节，并且知道在不同浏览器下的差异，知道css media query和flex的细节和一些比例单位如em，rem，vm等用法，并且知道怎么用于实际的自适应布局。&br&6，知道如何做css性能优化和oocss，以及如何写出模块化的css。&br&7，知道不同浏览器的差异属性并且知道如何绕过不使用这些属性。&br&8，各种垂直居中的写法，相对，绝对，fixed还有float的各种用法。&br&9，对齐，各种垂直对齐，文本，图片，行内元素和块级元素等。&br&10，给你一份psd设计稿，写完css和html，去掉css，能保证页面不乱，依然按照语义可以默认样式正常显示文档。&br&11，对seo有了解，知道怎么让显示和文案同时存在页面，了解css icon fonts，svg，雪碧图等原理和用法。&br&12，写过简单的js，知道如何给js工程师预留结构和节点钩子，不随意使用id属性来做样式渲染。&br&&br&暂时想到这么多，感觉算是一个基础的标准，这些都有所了解后再去学习js可能会更事半功倍。别人想到可以一起评论补充~，我很久不写css和html了。。。-。-
做为一名从切页面转到写js的前端开发工程师，看到这道题目非常有感触啊。 先感性说一下，我还记得我第一年工作的时候，写css和html的时候听很high的歌，但是写js的时候，是绝对不敢听歌的。 再理性的说一下，我记得我当时的页面兼容程度是ie678和firefox，…
&p&前端的书我读了大概30、40本(包括node之类的).&/p&&p&其实很多书的章节内容都是重复的所以只读不同的部分就可以了,就比如&javascript权威指南&跟&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript编程全解&/a&&有很多章节讲的都是同一个事情,还有node实战之类的书基本上都是从搭一个http服务器到弄个博客啥的,很快就读完了,也没什么收获.&/p&&p&&br&&/p&&p&我觉得能反复读的书才叫好书,很多书读完基本都进垃圾堆了,javascript的好书其实就那么几本.&/p&&p&1. 高级程序设计,讲的是es5,包括了前端能碰到的绝大部分的知识,能反复看,据说是前端必备.&/p&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject//& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic3.zhimg.com/v2-326b64018bafa1d5cda36b1554daa686_120x160.jpg& data-image-width=&324& data-image-height=&411& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript高级程序设计（第3版） (豆瓣)&/a&&p&2.es6标准入门,讲es6语法的,开源的,现在应该基本没有不用es6的公司了吧.&/p&&a href=&//link.zhihu.com/?target=http%3A//es6.ruanyifeng.com/& data-draft-node=&block& data-draft-type=&link-card& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ECMAScript 6入门&/a&&p&3.javascript数据结构和算法,js数据结构的入门书,都是基础知识,如果理解困难可以去这个算法可视化网站&a href=&//link.zhihu.com/?target=https%3A//visualgo.net/en& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&visualgo.net/en&/span&&span class=&invisible&&&/span&&/a&&/p&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject//& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic1.zhimg.com/v2-5e3e629cddd2d95c9bdec_120x160.jpg& data-image-width=&324& data-image-height=&408& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&学习JavaScript数据结构与算法 (豆瓣)&/a&&p&上面三本书搞清楚就可以了,进阶就看&/p&&p&1.设计模式的书&/p&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject//& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic1.zhimg.com/v2-4c3c228c3ceae4e4cx160.jpg& data-image-width=&324& data-image-height=&408& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript设计模式与开发实践 (豆瓣)&/a&&p&2.更低级的原理,可以反复看看,同时有个可视化网站&a href=&//link.zhihu.com/?target=http%3A//pythontutor.com/visualize.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Visualize Python, Java, JavaScript, TypeScript, and Ruby code execution&/a&,容易理解.&/p&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject//& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic2.zhimg.com/v2-d243cdf80ea64f4b86e24bfa1a6e.jpg& data-image-width=&318& data-image-height=&417& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&你不知道的JavaScript（上卷） (豆瓣)&/a&&p&3.性能优化的书&/p&&a href=&//link.zhihu.com/?target=https%3A//book.douban.com/subject/5362856/& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic4.zhimg.com/v2-a34b97dedb2f53_120x160.jpg& data-image-width=&318& data-image-height=&417& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&高性能JavaScript (豆瓣)&/a&&p&&br&&/p&&p&其它比较偏门的比如webgl、canvas之类的书就不推荐了,反复的读好书比读多少多少本书强得多,说实话绝大多数书的内容我都忘干净了,有些基础知识忘了直接查MDN就可以了.&/p&&p&&br&&/p&&p&最后,&b&多练&/b&,看书不练真是一点用都没有,其实很多书的内容忘了也可能再也不会去看了,是因为内化成你的代码能力了.&/p&
前端的书我读了大概30、40本(包括node之类的).其实很多书的章节内容都是重复的所以只读不同的部分就可以了,就比如&javascript权威指南&跟&&有很多章节讲的都是同一个事情,还有node实战之类的书基本上都是从搭一个http服务器到弄个博客啥…
&figure&&img src=&https://pic1.zhimg.com/v2-97cae9f2b16e5dd1ce40_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic1.zhimg.com/v2-97cae9f2b16e5dd1ce40_r.jpg&&&/figure&&h2&&b&引子&/b&&/h2&&ul&&li&解决一个问题的关键在于马上着手去解决这个问题。我们都觉得CSS难学，那么就抓紧时间去学，去学，去学&/li&&/ul&&h2&&b&margin的概念&/b&&/h2&&p&margin是盒模型中一个很重要的概念，是border之外的区域，我们通常称作外边距，有margin-top,margin-right,margin-bottom.moargin-left四个外边距。注意我书写的顺序是从上开始顺时针的顺序。对于这四个值，我们在设置的时候必然只能有4种情况：一个值、两个值、三个值、四个值。&/p&&ul&&li&第一种：margin: 10 表示四个外边距全都是10&/li&&li&第二种：margin: 10px 5px 10px 5 表盘上按照从上开始顺时针转一圈，分别表示上外边距10px、右外边距5px、下外边距10px、左外边距5&/li&&li&第三种：margin: 10px 5 只有两个数字，上、右都有了，另外的两个去哪找呢。众所周知表盘是对称的，那么第一个数是上外边距和下外边距10px、右外边距和左外边距5&/li&&li&第四种：margin: 10px 5px 10 只有三个数，那么还是用对称来找，第二个右外边距依然对应左外边距，那么结果就显而易见了。上外边距10px、左外边距和右外边距5px、下外边距10px；&/li&&/ul&&p&&br&&/p&&p&以上第二种是核心，方便理解其他的三种方式。同理，padding也是这个顺序。
上面这些必备知识，对于任何一个自学的前端，相信都会，没有任何新意。&/p&&ul&&li&接下来，我们探讨一下，以margin为例，它的值是负数的时候意味着什么呢？这是一个很有趣的实验，对于像我一样的新人来说，负值这个概念还是挺奇怪的，我是理解了好一会才搞明白的。&/li&&/ul&&h2&先上&u&&a href=&http://link.zhihu.com/?target=http%3A//js.jirengu.com/zakoxawasa/1/edit& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&栗子&/a&&/u&&/h2&&p&以margin的margin-left为例来演示，看官们也可以管中窥豹。&/p&&div class=&highlight&&&pre&&code class=&language-html&&&span&&/span&&span class=&c&&&!-- HTML的核心代码--&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&class&/span&&span class=&o&&=&/span&&span class=&s&&&container&&/span&&span class=&p&&&&/span&
&span class=&p&&&&/span&&span class=&nt&&div&/span& &span class=&na&&class&/span&&span class=&o&&=&/span&&span class=&s&&&box1&&/span&&span class=&p&&&&/span&测试margin为负值的情况&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&span class=&p&&&/&/span&&span class=&nt&&div&/span&&span class=&p&&&&/span&
&/code&&/pre&&/div&&p&demo很简单，就是一个大div包裹了一个小div。由简单入手，正是&code&删繁就简三秋树，领异标新二月花&/code&。下面是CSS的代码&/p&&div class=&highlight&&&pre&&code class=&language-css&&&span&&/span&&span class=&nt&&html&/span&&span class=&p&&{&/span&
&span class=&nb&&border&/span&&span class=&o&&:&/span& &span class=&m&&1px&/span& &span class=&nb&&solid&/span& &span class=&nb&&green&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&nt&&body&/span&&span class=&p&&{&/span&
&span class=&nb&&outline&/span&&span class=&o&&:&/span& &span class=&m&&1px&/span& &span class=&nb&&solid&/span& &span class=&nb&&orange&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&nc&&.container&/span&&span class=&p&&{&/span&
&span class=&nb&&border&/span&&span class=&o&&:&/span& &span class=&m&&1px&/span& &span class=&nb&&solid&/span& &span class=&nb&&red&/span&&span class=&p&&;&/span&
&span class=&nb&&margin-left&/span&&span class=&o&&:&/span&&span class=&m&&30px&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&nc&&.box1&/span&&span class=&p&&{&/span&
&span class=&nb&&margin&/span&&span class=&o&&:&/span& &span class=&m&&10px&/span&&span class=&p&&;&/span&
&span class=&nb&&outline&/span&&span class=&o&&:&/span& &span class=&m&&1px&/span& &span class=&nb&&solid&/span& &span class=&nb&&blue&/span&&span class=&p&&;&/span&
&span class=&nb&&margin-left&/span&&span class=&o&&:&/span& &span class=&m&&-30px&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&之所以把&code&html&/code&以及&code&body&/code&样式也加上，是因为我发现，要想把这个负值的概念理解的很透彻，经过我的多次实践，一定要采取这种自底向上的，完全展现整个过程的变化，才能说真的理解了这个概念。真正的原因如下&/p&&ul&&li&&code&html&/code&的&code&border&/code&让我们发现&code&body&/code&的默认外边距是&code&8px&/code&&/li&&li&&code&body&/code&的&code&outline&/code&让我们直观的体会改变&code&box1&/code&的&code&margin-left&/code&的时候是如何变化的（我假设大家都知道改变左外边距会类名是&code&container&/code&的&code&div&/code&的&code&border&/code&）&/li&&li&至于&code&body&/code& &code&box&/code&我没有用border，是因为这个border的宽度会影响图片的效果，进而影响理解。我是用了outline来替代border,它的作用和border一样，也是让我们知道我们要观察的元素的到底在网页的什么位置，人类还是以直观展现为主，太抽象不利于分析，不过他没有宽度，只要颜色。&/li&&/ul&&p&&br&&/p&&hr&&p&&br&&/p&&p&&b&实验的目的：改变margin-left的负值的大小，观察他的移动方向，而&code&container&/code&的&code&div&/code&的margin-left:30的设置正是确立边界，我通过对比margin-left的负值的大小与移动方向、移动距离来推论&/b&下面我们具体分析整个过程，以下面的图的变化来分析。通常科学的分析方法是找临界值，我采用的是去问题的的对立面来找线索，要分析负值，我们先看margin是正值的情况。&/p&&ul&&li&由正值变为 0 再变为负值不正是一个科学探索的过程吗&/li&&li&首先，要记得margin-left的第二次赋值会改变他的第一次值，也就是页面显示的永远是你最后赋的值。&/li&&/ul&&h2&第一步 margin-left: 30px的情况&/h2&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-ef30dbeb8d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1235& data-rawheight=&858& class=&origin_image zh-lightbox-thumb& width=&1235& data-original=&https://pic2.zhimg.com/v2-ef30dbeb8d_r.jpg&&&/figure&&p&如图所示，效果很直观。margin-left第二次赋值为30px,覆盖了它的初始值10px。图中绿色是html的border,橘黄色是body的outline,大div的border是红色，内部的box1outline是蓝色。&/p&&h2&第二步 margin-left: 30px变大的情况&/h2&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-cb96ac238f79bdbe75a914_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1171& data-rawheight=&863& class=&origin_image zh-lightbox-thumb& width=&1171& data-original=&https://pic1.zhimg.com/v2-cb96ac238f79bdbe75a914_r.jpg&&&/figure&&p&对比上述两个图，很容易的发现：&b&margin-left变大，content的宽度变小，理解为挤扁了&/b&&/p&&h2&第三步 margin-left: 30px变小的情况&/h2&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-88e51b93b5e8e0d61d21_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1338& data-rawheight=&856& class=&origin_image zh-lightbox-thumb& width=&1338& data-original=&https://pic2.zhimg.com/v2-88e51b93b5e8e0d61d21_r.jpg&&&/figure&&p&对比二、三步的图发现，&b&margin-left变小，content的宽度变大，理解为外扩了&/b&，当让了，此时还没分析完，我们不能很确定这个结论，继续变小，来分析。&/p&&hr&&p&&br&&/p&&p&
这是一个伟大分界线，临界值&/p&&p&&br&&/p&&hr&&p&&br&&/p&&h2&第四步 margin-left: 30px变小变为0了&/h2&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-2e6e6c2c11bd31a0279ad2c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1619& data-rawheight=&838& class=&origin_image zh-lightbox-thumb& width=&1619& data-original=&https://pic1.zhimg.com/v2-2e6e6c2c11bd31a0279ad2c_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&
又是一条伟大分界线，开辟了二次元&/p&&p&&br&&/p&&hr&&p&&br&&/p&&h2&第五步 margin-left: 30px变小变为负值了&/h2&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-6a09faba4edd8caff5c154e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1329& data-rawheight=&881& class=&origin_image zh-lightbox-thumb& width=&1329& data-original=&https://pic3.zhimg.com/v2-6a09faba4edd8caff5c154e_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&
又是一条伟大分界线,与body的outline重合&/p&&p&&br&&/p&&hr&&p&&br&&/p&&h2&第六步 margin-left: 30px变小变为-30px了&/h2&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-92ff9dedfd9d14bfdf71_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1246& data-rawheight=&898& class=&origin_image zh-lightbox-thumb& width=&1246& data-original=&https://pic2.zhimg.com/v2-92ff9dedfd9d14bfdf71_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&hr&&p&&br&&/p&&p&
又是一条伟大分界线,都超出天际了，一直变小小&/p&&p&&br&&/p&&hr&&p&&br&&/p&&h2&第七步 margin-left: 30px变小变为-60px了&/h2&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-76fe5fc80b2b183bcf58b0fe_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1127& data-rawheight=&845& class=&origin_image zh-lightbox-thumb& width=&1127& data-original=&https://pic3.zhimg.com/v2-76fe5fc80b2b183bcf58b0fe_r.jpg&&&/figure&&p&&br&&/p&&p&至此，整个过程分析完毕，可以肯定一个结论了：&b&margin-left变大，content的宽度变小，理解为挤扁了，margin-left变小，content的宽度变大，理解为外扩了&/b&&/p&&ul&&li&接下来我将继续探索margin-bottom为负的情况，&b&因为这个会改变父元素的高度&/b&&/li&&/ul&&p&&br&&/p&&hr&&p&&br&&/p&&p&以上就是我总结的结论。很喜欢张鑫旭老师的一段话，今天就以张老师的&u&&a href=&http://link.zhihu.com/?target=http%3A//www.zhangxinxu.com/wordpress/2012/07/bottleneck-css-study/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&关于CSS学习瓶颈&/a&&/u&的一段话，来结束这篇文章。&/p&&blockquote&理解的对错&br&每个人的成长经历不同，大脑擅长处理的东西也不同，导致其看待与理解事物的方式也不同。因此，对于同一CSS表现的差异，每个人的理解都不同。&br&一旦有所差异，就有所谓的“对错”之争。估计不少人会拿《CSS权威指南》上的东西说事：你那种理解是错误的，CSS权威指南上说……或W3C官方文档解释说……&br&我大学电路老师最后一节课专门讲了她的科学观：何为科学？能够自圆其说，自成体系即是科学。中医算科学吗？算！因其有一套自己解释畅通的理论体系。同样，对于CSS的理解，我个人一直认为什么对错的争执等都是没有意义的。如果你的解释可以自圆其说，自成体系，且应用无误，哪怕你的解释与什么规范啊权威啊八竿子都打不着，别人压根理解不了，你都是对的，OK的！&br&拘泥只会限制自身的创造力以及认知能力。火影的世界算是世界吗？是，自圆其说，自成体系！海贼王的世界算是世界吗？是自圆其说，自成体系。&br&因此，如果你是设计出身，或文学出身的。什么复杂逻辑，深奥解释理解不了，你大可摒弃之，用你自己的世界去解释其表现，你的感性思维以及艺术情怀只会让这个世界变得更精彩！那些自以为是，抱残守缺的杂碎们就不用鸟他们，让他们随着时间消逝去吧~~&/blockquote&
引子解决一个问题的关键在于马上着手去解决这个问题。我们都觉得CSS难学，那么就抓紧时间去学，去学，去学margin的概念margin是盒模型中一个很重要的概念，是border之外的区域，我们通常称作外边距，有margin-top,margin-right,margin-bottom.moargin-left…
&p&暂时想到这些，持续更新（如果有遗漏请评论或私信告知我）。&/p&&hr&&p&&b&在即将过去的2017年里，我们回顾：&/b&&/p&&h2&逃不过的三大框架&/h2&&ol&&li&&b&React &/b&继续在前端领域占据着主导地位，并在 2017 年发布了最受期待的版本之一 - &a href=&//link.zhihu.com/?target=https%3A//edgecoders.com/react-16-features-and-fiber-explanation-eb7& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React 16&/a&。 它包含了可以实现异步 UI 渲染的 fiber 架构。通过提供包括错误边界在内的&a href=&//link.zhihu.com/?target=https%3A//edgecoders.com/react-16-features-and-fiber-explanation-eb7& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&很多其他特性&/a&。但 React 在这一年中所取得最重要的成就不是它推出的新特性，而是修改了它的开源协议：BSD 协议 -& &a href=&//link.zhihu.com/?target=https%3A//code.facebook.com/posts/246/relicensing-react-jest-flow-and-immutable-js/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&MIT 协议&/a&。除此外，Jest、Flow、Immutable.js 和 GraphQL 授权也都改为 MIT 协议。&/li&&li&&b&Angular&/b& 市场占有率持续下滑（相较于 React ），发布了&a href=&//link.zhihu.com/?target=https%3A//scotch.io/bar-talk/the-next-version-of-angular-is-angular-v4& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&V4&/a& （3月23日）以及 &a href=&//link.zhihu.com/?target=https%3A//blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&V5&/a& （11月2日），在 V4 中看到了 Angular Universal
成为官方项目的一部分以及 Angular Animation 从核心包中被抽离出来，V5 中则对 PWA 支持进行了改进、对编译器优化达到更快地构建等。&/li&&li&即便 React 获得了巨大成功，&b&&a href=&//link.zhihu.com/?target=https%3A//vuejs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vue&/a&&/b&（作者&a href=&//link.zhihu.com/?target=https%3A//medium.com/%40youyuxi& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&尤雨溪&/a&）也仍然越来越受欢迎。该框架提供了非常友好、简单的 API，是 React 的主要替代方案之一。它已经被包括 &a href=&//link.zhihu.com/?target=https%3A//medium.com/%40gitlab& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitLab&/a& 在内的大公司所采用，该公司回顾了&a href=&//link.zhihu.com/?target=https%3A//about.gitlab.com//gitlab-vue-one-year-later/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&在过去的一年里使用该框架的故事&/a&。&/li&&/ol&&figure&&img src=&https://pic1.zhimg.com/50/v2-8ea35d427f3cd47f31acd_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1132& data-rawheight=&779& class=&origin_image zh-lightbox-thumb& width=&1132& data-original=&https://pic1.zhimg.com/50/v2-8ea35d427f3cd47f31acd_r.jpg&&&/figure&&p&&i&注：上图为三大框架过去一年中在 NPM 的下载量对比图，以下类似的框架/包对比图均采用 npmtrends 一年内下载量进行对比，同时附有 GitHub 上 star/fork 等状态信息。&/i&&/p&&h2&ECMAScript&/h2&&ul&&li&在&a href=&//link.zhihu.com/?target=https%3A//github.com/tc39/ecma262& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一个详尽的提案过程&/a&结束之后，六月份发布了 ECMAScript 规范的2017年版本，其中包括一些开创性的功能，如异步功能，共享内存和原子操作（atomic operations）。其中，共享内存将使 JavaScript 中的高性能并行计算更容易处理，而且效率更高。拥有共享内存的并行架构对于任何想用 WebGL 和 web worker 创建游戏的人来说都是巨大的诱惑。&/li&&li&该版本在2017年12月已经被所有主流浏览器所支持，Edge 表示将从 v16 版本开始对这些功能进行支持。由于 Node 不支持 web worker，所以他们也没有对共享内存的支持，但他们正在&a href=&//link.zhihu.com/?target=https%3A//github.com/nodejs/node/issues/13143& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&重新思考该项决定&/a&。&/li&&/ul&&h2&WebAssembly&/h2&&ul&&li&&a href=&//link.zhihu.com/?target=https%3A//caniuse.com/%23feat%3Dwasm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&所有主流浏览器&/a&现在都支持 WebAssembly，五月份 Chrome 开始支持，Firefox 则是从三月份就开始支持，Edge 是十月份。 Safari 则在第十一次发布中开始支持。Chrome for Android 和 Safari Mobile 也支持 WebAssembly。详情可以参考 &a href=&//link.zhihu.com/?target=https%3A//blog.mozilla.org/blog//webassembly-in-browsers/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WebAssembly support now shipping in all major browsers – The Mozilla Blog&/a&&/li&&/ul&&h2&&b&Progressive Web Apps&/b&&/h2&&ul&&li&我们一直在寻找弥补 web 和其他客户端之间体验差距上的解决方案。Google 一直主导通过将 web 应用转换为 Progressive Web Apps(PWA) 来增强它的能力，而这一方法在 2017 年迅速获得采用。一个 PWA 应用利用现代浏览器技术来提供更像移动应用程序的 web 体验。它提供了改进的性能和离线体验，以及以前仅可用于移动的功能，例如推送通知。 PWA 的基础是一个 &code&manifest.json&/code& 文件和对 &a href=&//link.zhihu.com/?target=https%3A//developers.google.com/web/fundamentals/primers/service-workers/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&service workers&/a& 的利用。详情见 &a href=&//link.zhihu.com/?target=https%3A//www.youtube.com/watch%3Fv%3Dm-sCdS0sQO8& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)&/a&。&/li&&/ul&&h2&包管理器&/h2&&ul&&li&&b&Bower&/b& 市场占有率持续下降，它的最后一次发布在2016年11月，之后官方&a href=&//link.zhihu.com/?target=https%3A//github.com/bower/bower/pull/2458& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&正式推荐&/a&用户使用 NPM 用于管理前端项目中的软件包。&/li&&li&NPM 自从最初发布以来已经有了相当长的一段时间，但它仍然缺少一些关键特性，而这正是 Yarn 希望补充的。&b&Yarn&/b& 的主要贡献是包缓存，一个确保确定性构建的锁文件，并行操作以及依赖关系。这些功能非常成功，以致于 NPM 在其 5.0 版本中实现了它们。Yarn 下载量超过 10 亿次（目前每月下载量达到了 125 万次）并拥有惊人的 &a href=&//link.zhihu.com/?target=https%3A//github.com/yarnpkg/yarn& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&29000 多个 GitHub stars&/a&。即使你没在使用 Yarn，JavaScript 的包管理整体上由于 Yarn 的发布也得到了显著地提升 。&/li&&li&针对 Yarn 的出现， &b&NPM&/b& 回击以 v5 版本的发布，这个版本显著提高了性能（包括上述的 Yarn 发布的功能） 。&/li&&/ul&&figure&&img src=&https://pic4.zhimg.com/50/v2-412aca0a1cfab61261fda7f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1139& data-rawheight=&736& class=&origin_image zh-lightbox-thumb& width=&1139& data-original=&https://pic4.zhimg.com/50/v2-412aca0a1cfab61261fda7f_r.jpg&&&/figure&&h2&样式布局&/h2&&ol&&li&网格布局最终被 CSS 采纳为标准，浏览器也正在快速地采用它。过去，网格系统在 CSS 中曾被 &code&tables&/code&、&code&float&/code&、&code&flex&/code& 以及 &code&inline-block&/code& 实现过。&/li&&li&2017 年见证了 &a href=&//link.zhihu.com/?target=https%3A//www.styled-components.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&styled-components&/a&（由 &a href=&//link.zhihu.com/?target=https%3A//medium.com/%40mxstbr& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Max Stoiber&/a&、&a href=&//link.zhihu.com/?target=https%3A//medium.com/%40glenmaddern& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Glen Maddern&/a& 和 &a href=&//link.zhihu.com/?target=https%3A//medium.com/%40philpl& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Phil Plückthun&/a& 创建） 在流行程度上逐渐占据主导地位。&a href=&//link.zhihu.com/?target=https%3A//github.com/emotion-js/emotion& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Emotion&/a&（由 &a href=&//link.zhihu.com/?target=https%3A//medium.com/%40tkh44& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Kye Hohenberger&/a& 创建）是最新的 JavaScript 库之一，但它已经被迅速采用。另一个可选方案是 &a href=&//link.zhihu.com/?target=https%3A//glamorous.rocks/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&glamorous&/a&（由 PayPal、Kent C. Dodds 和一群热情的&a href=&//link.zhihu.com/?target=https%3A//github.com/paypal/glamorous/blob/master/README.md%23contributors& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&贡献者&/a&创建），它封装了 &a href=&//link.zhihu.com/?target=https%3A//github.com/threepointone/glamor& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&glamor&/a& 库。&/li&&li&在过去的几年里，像SASS，Less和Stylus这样的CSS预处理器已经流行起来。PostCSS 于2014年推出，而在2017年真正火爆起来，成为目前最受欢迎的 CSS 预处理器。&/li&&li&另一方面，在 2017 年，主要的进步来自 CSS-in-JS 的明显改进与采用，其中所有样式都是通过代码而不是样式表进行构建的。目前还不清楚这是否将成为前端社区的最终方向，但这是目前最新的方法。&/li&&li&PostCSS 仍然是首选的 CSS 预处理器，但是很多都在切换到 CSS-in-JS 解决方案。&/li&&/ol&&p&&i&注：评论中有同学谈到 PostCSS 是后处理器，根据定义，CSS 后处理器是对 CSS 进行处理，并最终生成 CSS 的 &u&&a href=&//link.zhihu.com/?target=http%3A//zh.wikipedia.org/wiki/%25E9%25A2%%25A4%%E5%& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&预处理器&/a&&/u&，它属于广义上的 CSS 预处理器。由于本人回答时的定位以及参考的文献中所指，故这里不做细分，认定 PostCSS 为预处理器。细致的同学可以做进一步的细分。&/i&&/p&&p&&i&再注：评论中有同学认为 PostCSS 由于可以搭配其他方案一起使用，所以认为如上描述其实不准确的。本人在作答时，想法是对比不同方案在今年的变化和流行程度，所以在严谨性方面可能会有欠考虑。具体细节希望同学们在使用的时候详细考究。&/i&&/p&&figure&&img src=&https://pic4.zhimg.com/50/v2-8df4f0f1c78e1b74e76ffa7b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1131& data-rawheight=&767& class=&origin_image zh-lightbox-thumb& width=&1131& data-original=&https://pic4.zhimg.com/50/v2-8df4f0f1c78e1b74e76ffa7b_r.jpg&&&/figure&&h2&工程模块化工具&/h2&&ol&&li&&b&Webpack&/b& 2 于今年2月份发布。 它带来了诸如 ES6 模块（不再需要 Babel 转换 import 语句）和 tree shaking （消除了打包中未使用的代码）等重要功能。 此后不久，V3 发布了一个名为“scope hoisting”的功能，将所有的 webpack 模块放入一个单独的 JavaScript 包中，从而大大缩小了它的尺寸。&/li&&li&7月份，Webpack 团队从 Mozilla 开源支持计划&a href=&//link.zhihu.com/?target=https%3A//medium.com/webpack/webpack-awarded-125-000-from-moss-program-f63eeaaf4e15& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&获得了&/a&一笔赠款，以便为 WebAssembly 提供一流的支持。&/li&&li&&b&&a href=&//link.zhihu.com/?target=https%3A//github.com/parcel-bundler/parcel& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Parcel&/a&&/b& 作为一个有趣的项目，在短短十天内便在 GitHub 上获得了 10000 个 star。 它主要通过利用多个 CPU 内核和一个高效的文件系统缓存来实现。 它还基于抽象语法树进行操作，而不像 Webpack 使用字符串。&/li&&li&除此外，Rollup 的发展也不容小觑。4月 React 团队从 Gulp 切换到了 Rollup 进行开发。除此外，Webpack 团队也&a href=&//link.zhihu.com/?target=https%3A//medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&推荐在某些方面使用 Rollup 而不是 Webpack&/a&。 &/li&&/ol&&figure&&img src=&https://pic1.zhimg.com/50/v2-fdcf9bb0cde52e1f9ce987_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1143& data-rawheight=&821& class=&origin_image zh-lightbox-thumb& width=&1143& data-original=&https://pic1.zhimg.com/50/v2-fdcf9bb0cde52e1f9ce987_r.jpg&&&/figure&&h2&&b&TypeScript&/b&&/h2&&ul&&li&JavaScript 中缺少类型一直是很多人的抱怨所在。为了解决这些问题，TypeScript 出现。它由微软创建，&a href=&//link.zhihu.com/?target=https%3A//www.typescriptlang.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&TypeScript - JavaScript that scales.&/a&JavaScript 中缺少类型一直是很多人的抱怨所在。为了解决这些问题，TypeScript 出现。它由微软创建，由于其出色的表现赢得了很多 JavaScript 开发者的追捧，而 &a href=&//link.zhihu.com/?target=https%3A//flow.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flow&/a& 提供了一种在不需要激进的重构下更为灵活的方式来引入类型，后者是 Facebook 的成果。&/li&&/ul&&figure&&img src=&https://pic3.zhimg.com/50/v2-0ee9dc6f9df9ccf5e2373e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1132& data-rawheight=&687& class=&origin_image zh-lightbox-thumb& width=&1132& data-original=&https://pic3.zhimg.com/50/v2-0ee9dc6f9df9ccf5e2373e_r.jpg&&&/figure&&h2&应用状态管理&/h2&&ul&&li&Redux 仍然作为 React 项目推荐的状态管理解决方案，并在 2017年获得了五倍的增长速度（NPM 下载量）。&/li&&li&Mobx 成长的也很快，并被一些高利润公司所使用，例如 IBM，美国银行以及 Lyft。&/li&&li&除此外，MobX 团队正在努力，希望在新项目—— &a href=&//link.zhihu.com/?target=https%3A//github.com/mobxjs/mobx-state-tree& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&mobx-state-tree&/a&（MST） 中结合 Redux 和 MobX 的优点。&/li&&/ul&&figure&&img src=&https://pic4.zhimg.com/50/v2-3b0c23b978c8f07a9dcf73de4d23d0c3_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1134& data-rawheight=&686& class=&origin_image zh-lightbox-thumb& width=&1134& data-original=&https://pic4.zhimg.com/50/v2-3b0c23b978c8f07a9dcf73de4d23d0c3_r.jpg&&&/figure&&h2&&b&GraphQL&/b&&/h2&&ul&&li&GraphQL 似乎在 REST 之上迅速占据了一席之地，&a href=&//link.zhihu.com/?target=https%3A//medium.com/%40samerbuna& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Samer Buna&/a& 甚至声称 &a href=&//link.zhihu.com/?target=https%3A//medium.freecodecamp.org/rest-apis-are-rest-in-peace-apis-long-live-graphql-d412e559d8e4& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&REST 已经死亡&/a&。&a href=&//link.zhihu.com/?target=https%3A//medium.com/%40github& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub&/a& 已经使用 GraphQL 编写了&a href=&//link.zhihu.com/?target=https%3A//developer.github.com/v4/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&最新版本的 API&/a&，与此同时为了使 GraphQL 对所有开发人员可用，许多公司正在开发产品，例如 &a href=&//link.zhihu.com/?target=https%3A//medium.com/%40schickling& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Johannes Schickling&/a& 开发的 &a href=&//link.zhihu.com/?target=https%3A//medium.com/%40graphcool& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Graphcool&/a&框架。&/li&&/ul&&h2&&b&静态网站生成方案&/b&&/h2&&ul&&li&2017 见证了静态网站卷土重来。像 &a href=&//link.zhihu.com/?target=https%3A//www.gatsbyjs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Gatsby&/a& 这样的框架使您能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该成为一个复杂的现代 web 应用。由于采用与预构建标记（原文 prebuilt markup），静态网站生成方案使你获得服务器端渲染的好处和绝无仅有的速度。如果你正在寻找一个很好的例子，&a href=&//link.zhihu.com/?target=https%3A//reactjs.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React 官方文档&/a&就是用 Gatsby 构建的。&/li&&/ul&&hr&&p&&b&在即将到来的2018年中，我们期待：&/b&&/p&&ul&&li&基于组件应用中的样式是否是组织 CSS 的最佳方式？有关该内容的讨论或许会激化。&/li&&li&越来越多的公司采用具有统一代码库的移动端解决方案，如 &a href=&//link.zhihu.com/?target=https%3A//facebook.github.io/react-native/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React Native&/a&，&a href=&//link.zhihu.com/?target=https%3A//flutter.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Flutter&/a& 或 &a href=&//link.zhihu.com/?target=http%3A//weex.apache.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Weex&/a& 。&/li&&li&因为离线能力和无缝的移动端体验，web 变得更加原生，再加上苹果对 Service Worker 的表态 &a href=&//link.zhihu.com/?target=https%3A//webkit.org/blog/8042/release-notes-for-safari-technology-preview-46/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Release Notes for Safari Technology Preview 46&/a&， PWA 在2018年可能会被全面支持。&/li&&li&WebAssembly 可以取得长足的进步，提供一个更好的 web 体验。&/li&&li&GraphQL 正在并继续挑战 REST。&/li&&li&由于不再有对开源协议上的争议，React 强化了它的地位。&/li&&li&Flow 和 TypeScript 采取更强大的举措，使 JavaScript 更具结构。&/li&&li&虚拟现实使用类似 &a href=&//link.zhihu.com/?target=https%3A//aframe.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&A-Frame&/a&、&a href=&//link.zhihu.com/?target=https%3A//facebook.github.io/react-vr/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React VR&/a& 和 &a href=&//link.zhihu.com/?target=https%3A//developers.google.com/vr/%3Fhl%3Den& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Google VR&/a& 这样的库正在向前迈进。&/li&&li&人们使用区块链和 &a href=&//link.zhihu.com/?target=https%3A//github.com/ethereum/web3.js/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&web3.js&/a&（由 Marek Kotewicz 和 Fabian Vogelsteller 创建）构建了一些非常酷的应用程序。&/li&&li&构建方案的持续发展，Webpack ，Rollup 以及后起之秀 Parcel 等在构建方案份额中扮演这一种合久必分、分久必合的轮回。&/li&&/ul&&hr&&p&本答案在撰写过程中参考了以下内容：&/p&&ol&&li&&a href=&//link.zhihu.com/?target=https%3A//blog.logrocket.com/frontend-in-2017-the-important-parts-f& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Frontend in 2017: The important parts&/a&&/li&&li&&a href=&//link.zhihu.com/?target=https%3A//levelup.gitconnected.com/a-recap-of-front-end-development-in-ce99e727& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&A recap of front-end development in 2017&/a&&/li&&/ol&&p&基于第二篇参考文章的译文已经翻译在我的&a href=&https://zhuanlan.zhihu.com/makewebgreatagain& class=&internal&&知乎专栏&/a&，感兴趣的同学可以查看 &a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&2017前端技术发展回顾&/a&。&/p&&h2&最后&/h2&&p&如果喜欢使用微信的同学可以关注个人公众号，微信搜索「 黯晓 」或者扫描 &a href=&//link.zhihu.com/?target=https%3A//hijiangtao.github.io/assets/pic/qrcode_for_gh_4e090cdcbcc5_258.jpg& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&二维码&/a& 关注，会同步我在&a href=&https://zhuanlan.zhihu.com/makewebgreatagain& class=&internal&&知乎&/a&以及&a href=&//link.zhihu.com/?target=https%3A//hijiangtao.github.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&个人博客&/a&上发表的文章，谈谈前端技术与日常有趣事。&/p&&p&生活中难免犯错，请多多指教！&/p&
暂时想到这些，持续更新（如果有遗漏请评论或私信告知我）。在即将过去的2017年里，我们回顾：逃不过的三大框架React 继续在前端领域占据着主导地位，并在 2017 年发布了最受期待的版本之一 - 。 它包含了可以实现异步 UI 渲染的 fiber 架构。通过…
&script& 标签引入脚本有三种情况：&br&&br&&b&立即执行&/b&&blockquote&&script src=&a.js&&&br&&script src=&b.js&&&/blockquote&顺序：保证先后顺序。解析：HTML 解析器遇到它们时，将阻塞（取停止解析），待脚本下载完成并执行后，继续解析标签之后的文档。&br&&br&&b&推迟执行&/b&&blockquote&&script defer src=&a.js&&&br&&script defer src=&b.js&&&/blockquote&顺序：保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载），待文档解析完成之后，执行脚本。&br&&br&&b&尽快执行&/b&&blockquote&&script async src=&a.js&&&br&&script async src=&b.js&&&/blockquote&顺序：不保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载，一旦下载完成，立即执行它），并继续解析之后的文档。&br&&br&有一张图可以帮助理解这些情形：&figure&&img src=&https://pic3.zhimg.com/50/284aec5bb7f16b3ef4eddbb_b.jpg& data-rawwidth=&689& data-rawheight=&112& class=&origin_image zh-lightbox-thumb& width=&689& data-original=&https://pic3.zhimg.com/50/284aec5bb7f16b3ef4eddbb_r.jpg&&&/figure&＊来源：&a href=&//link.zhihu.com/?target=http%3A//peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&peter.sh/experiments/as&/span&&span class=&invisible&&ynchronous-and-deferred-javascript-execution-explained/&/span&&span class=&ellipsis&&&/span&&/a& &br&&br&====&br&兼容性参考： &a href=&//link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/HTML/Element/script%23Compatibility& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&developer.mozilla.org/e&/span&&span class=&invisible&&n-US/docs/HTML/Element/script#Compatibility&/span&&span class=&ellipsis&&&/span&&/a&
&script& 标签引入脚本有三种情况： 立即执行&script src="a.js"& &script src="b.js"&顺序：保证先后顺序。解析：HTML 解析器遇到它们时，将阻塞（取停止解析），待脚本下载完成并执行后，继续解析标签之后的文档。 推迟执行&script defer src="a.js"& &sc…
&p&这些问题很典型，也比较全面考察知识点，答案也并不绝对，秉承&b&授人以鱼，不如授人以渔&/b&的精神，建议你静下心来好好学习，总结一次，自己去寻找答案，收获会很大的，当然如果你只想快捷获取答案，前面好些大拿都给出了大致回答。&/p&&p&关于浏览器工作原理主题，google，baidu都是一大堆，推荐一篇比较权威的：&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//taligarsiel.com/Projects/howbrowserswork1.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&How browsers work &/a&&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//taligarsiel.com/Projects/howbrowserswork1.htm& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这篇文章&/a&，是我看过最全面的，如果不喜欢读英文，我个人也写过一篇，尽可能写的简洁，清晰：&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//blog.codingplayboy.com//webpage_render/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&浅析前端页面渲染机制 &/a&，希望对你有帮助。&/p&&p&热爱前端，热爱分享。&/p&
这些问题很典型，也比较全面考察知识点，答案也并不绝对，秉承授人以鱼，不如授人以渔的精神，建议你静下心来好好学习，总结一次，自己去寻找答案，收获会很大的，当然如果你只想快捷获取答案，前面好些大拿都给出了大致回答。关于浏览器工作原理主题，goog…
&p&亲，学海无涯，技多不压身哈。有一定的前端技术，学习后端技术会轻松一些。&/p&&p&云栖君就给亲推荐一些学习前端知识免费的精华课程。 都是零基础从入门课程。&/p&&p&&b&1.《零基础学前端HTML+CSS》&/b&&/p&&p&&b&课程介绍&/b&&/p&&p&网页的本质就是超级文本标记语言HTML，我们这套课程从基础语法入门，讲解了HTML的常用标签，表单，排版等实用技术，同时深入讲解了CSS样式表的使用和如何使用DIV CSS设计网页布局。同时还介绍CSS3.0的新特性，阴影，圆角边框等实用案例。&/p&&p&&b&课程列表&/b&&/p&&ul&&li&1：互联网起源&/li&&li&2：HTML概念&/li&&li&3：标签10:47&/li&&li&4：HTML属性&/li&&li&5：HTML固定基本结构&/li&&li&6：第一个网页&/li&&li&7：工具使用&/li&&li&8：标题&/li&&li&9：基本标签&/li&&li&10：图像IMG标签&/li&&li&11：路径概念&/li&&li&12：超级链接&/li&&li&13：列表&/li&&li&14：表格&/li&&li&15：表单&/li&&li&16：文本框&/li&&li&17：密码框&/li&&li&18：单选&/li&&li&19：复选框&/li&&li&20：下拉菜单&/li&&li&21：上传&/li&&li&22：多行文本&/li&&li&23：提交按钮&/li&&li&24：重置按钮&/li&&li&25：CSS介绍&/li&&li&26：DIV和SPAN标签介绍&/li&&li&27：CSS样式规则&/li&&li&28：CSS样式加载方式&/li&&li&29：CSS选择符&/li&&li&30：伪类&/li&&li&31：颜色&/li&&li&32：背景&/li&&li&33：文本&/li&&li&34：字体&/li&&li&35：列表&/li&&li&36：CSS表格&/li&&li&37：div和span区别&/li&&li&38：盒子模型概念&/li&&li&39：盒子模型属性介绍&/li&&li&40：盒子模型属性和默认值编写&/li&&li&41：display属性和实例&/li&&li&42：浮动与清除浮动&/li&&li&43：浮动案例&/li&&li&44：图层的定位&/li&&li&45：图像的背景&/li&&li&46：背景颜色&/li&&li&47：图像的透明&/li&&li&48：渐变&/li&&li&49：圆角&/li&&li&50：阴影&/li&&li&51：准备工作&/li&&li&52：顶部&/li&&li&53：搜索区域&/li&&li&54：广告区域&/li&&li&55：主区域&/li&&li&56：点评区域&/li&&li&57：脚部信息&/li&&/ul&&p&课程链接 &a href=&//link.zhihu.com/?target=http%3A//click.aliyun.com/m/36109/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&click.aliyun.com/m/3610&/span&&span class=&invisible&&9/&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&b&2.《&a href=&//link.zhihu.com/?target=https%3A//huati.weibo.com/k/React%3Ffrom%3D501& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&#React#&/a&前端开发入门与实战》&/b&&/p&&p&&b&课程介绍&/b&&/p&&p&本课程主要讲解React的基础使用技巧及实战案例。&/p&&p&React 是一个用于构建用户界面的 JavaScript 库，主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。由于 React 拥有较高的性能，代码逻辑非常简单，越来越多的开发者开始关注和使用它。&/p&&p&&b&课程列表&/b&&/p&&ul&&li&1.React课程介绍&/li&&li&2.React是什么&/li&&li&3.为什么要使用react&/li&&li&4.React基础知识 —— JSX&/li&&li&5.React基础知识——事件和组合&/li&&li&6.React基础知识——属性状态&/li&&li&7.React基础知识——Mixin 和表单&/li&&li&8.React基础知识——Ref和API&/li&&li&9.一步一步搭建React-应用&/li&&li&10.使用React构建复杂页面&/li&&/ul&&p&课程链接 &a href=&//link.zhihu.com/?target=http%3A//click.aliyun.com/m/36869/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&click.aliyun.com/m/3686&/span&&span class=&invisible&&9/&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&b&3.《jQuery开发教程》&/b&&/p&&p&&b&课程介绍&/b&&/p&&p&jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。&/p&&p&&b&课程列表&/b&&/p&&ul&&li&1：jQuery 基础&/li&&li&2：jQuery基础选择器&/li&&li&3：jQuery属性选择器&/li&&li&4：jQuery基础过滤&/li&&li&5：jQuery子元素过滤&/li&&li&6：jQuery内容过滤&/li&&li&7：jQuery表单&/li&&li&8：jQuery层级&/li&&li&9：jQuery可见性过滤 jQuery扩展&/li&&li&10：jQuery_鼠标事件&/li&&li&11：jQuery_键盘事件&/li&&li&12：jQuery_浏览器事件、文档加载事件&/li&&li&13：jQuery_绑定事件处理器上&/li&&li&14：jQuery_绑定事件处理器下&/li&&li&15：jQuery_事件对象&/li&&li&16：jQuery_表单事件&/li&&li&17：jQuery_DOM属性上&/li&&li&18：jQuery_DOM属性下&/li&&li&19：jQuery_CDN、DOM插入并包裹现有内容&/li&&li&20：jQuery_DOM 插入现有元素内&/li&&li&21：jQuery_复制元素、DOM插入到现有元素外&/li&&li&22：jQuery_DOM移除、DOM替换&/li&&li&23：jQuery_CSS属性上&/li&&li&24：jQuery_CSS属性下&/li&&li&25：jQuery遍历_过滤1&/li&&li&26：jQuery遍历_过滤2&/li&&li&27：jQuery遍历_过滤3&/li&&li&28：jQuery遍历_其他遍历&/li&&li&29：jQuery遍历_树遍历1&/li&&li&30：jQuery遍历_树遍历2&/li&&li&31：jQuery遍历_树遍历3&/li&&li&32：jQuery遍历_树遍历4&/li&&li&33：jQuery特效_隐藏与显示&/li&&li&34：jQuery特效_淡入淡出&/li&&li&35：jQuery特效_滑动，回调&/li&&li&36：jQuery特效_自定义&/li&&li&37：jQuery特效_自定义&/li&&li&38：jQuery特效实例_幽灵按钮1&/li&&li&39：jQuery特效实例_幽灵按钮&/li&&li&40：jQuery特效实例_幽灵按钮3&/li&&li&41：jQuery特效实例_幽灵按钮4&/li&&li&42：jQuery_瀑布流1&/li&&li&43：jQuery_瀑布流2&/li&&/ul&&p&课程链接 &a href=&//link.zhihu.com/?target=http%3A//click.aliyun.com/m/36870/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&click.aliyun.com/m/3687&/span&&span class=&invisible&&0/&/span&&span class=&ellipsis&&&/span&&/a& &/p&&p&&b&4.《前端开发框架&a href=&//link.zhihu.com/?target=https%3A//huati.weibo.com/k/Bootstrap%3Ffrom%3D501& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&#Bootstrap#&/a&使用教程》&/b&&/p&&p&&b&课程介绍&/b&&/p&&p&Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。&/p&&p&它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。&/p&&p&国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。&/p&&p&&b&课程列表&/b&&/p&&ul&&li&01_Bootstrap起步1&/li&&li&02_Bootstrap起步2&/li&&li&03_Bootstrap全局css样式概览&/li&&li&04_Bootstrap全局css样式_栅格1&/li&&li&05_Bootstrap全局css样式_栅格2&/li&&li&06_Bootsrtap全局css样式_排版1&/li&&li&07_Bootstrap全局css样式_排版2&/li&&li&08_Bootstrap全局css样式_排版3&/li&&li&09_Bootstrap全局css样式_代码&/li&&li&10_Bootstrap全局css样式_表格&/li&&li&11_Bootstrap全局css样式_表格2&/li&&li&12_Bootstrap全局css样式_表单1&/li&&li&13_Bootstrap全局css样式_表单2（水平排列的表单，被支持的控件，静态控件）&/li&&li&14_Bootstrap全局css样式_表单3（焦点状态，禁用状态，只读状态）&/li&&li&15_Bootstrap全局css样式_表单4(校验状态，控件尺寸，辅助文本)&/li&&li&16_Bootstrap全局css样式_按钮&/li&&li&17_Bootstrap全局css样式_图片，响应式工具&/li&&li&18_Bootstrap全局css样式_辅助类&/li&&li&19_Bootstrap组件1_字体图标&/li&&li&20_Bootstrap组件_下拉菜单&/li&&li&21_Bootstrap组件_按钮组&/li&&li&22_Bootstrap组件_按钮式下拉菜单&/li&&li&23_Bootstrap组件_输入框组1（基本实例，尺寸，作为额外元素的多选框和单选框）&/li&&li&24_Bootstrap组件_输入框组2（作为额外元素的按钮，作为额外元素的按钮式下拉菜单，作为额外元素的分裂式按钮下拉菜单）&/li&&li&25_Bootstrap组件_导航&/li&&li&26_Bootstrap组件_导航条1（默认样式的导航条，品牌）&/li&&li&27_Bootstrap组件_导航条2&/li&&li&28_Bootstrap组件_分页&/li&&li&29_Bootstrap组件_路径导航，标签，徽章&/li&&li&30_Bootstrap组件_巨幕，页头，缩略图&/li&&li&31_Bootstrap组件_警告框&/li&&li&32_Bootstrap组件_进度条&/li&&li&33_Bootstrap组件_媒体对象，列表组&/li&&li&34_Bootstrap组件_面版，具有响应式特性的嵌入内容，Well&/li&&/ul&&p&课程链接 &a href=&//link.zhihu.com/?target=http%3A//click.aliyun.com/m/24974/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&click.aliyun.com/m/2497&/span&&span class=&invisible&&4/&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&b&5.《HTML基础入门学习》&/b&&/p&&p&&b&课程介绍&/b&&/p&&p&如果你从来没有开发过网站，也没有任何编程经验，那么这里就是你应该开始的地方。在这里，我们会从基本的HTML开始学习，一边学习一边练习写出简单的网页。&/p&&p&&b&课程列表&/b&&/p&&ul&&li&1：介绍&/li&&li&2：开发工具介绍&/li&&li&3：notepad++介绍&/li&&li&4：sublime介绍&/li&&li&5：eclipse介绍&/li&&li&6：brackets介绍&/li&&li&7：vim介绍&/li&&li&8：chrome介绍&/li&&li&9：html介绍&/li&&li&10：DOCTYPE文档类型&/li&&li&11：html注释&/li&&li&12：html结构&/li&&li&13：title标签&/li&&li&14：link标签&/li&&li&15：base标签&/li&&li&16：meta标签&/li&&li&17：meta标签中的http-equiv属性&/li&&li&18：meta标签中的name属性&/li&&li&19：script标签&/li&&li&20：style标签&/li&&li&21：h1到h6&/li&&/ul&&p&课程链接 &a href=&//link.zhihu.com/?target=http%3A//click.aliyun.com/m/36871/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&click.aliyun.com/m/3687&/span&&span class=&invisible&&1/&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&b&更多技术干货敬请关注云栖社区知乎机构号：&a href=&https://www.zhihu.com/org/a-li-yun-yun-qi-she-qu-48& class=&internal&&阿里云云栖社区 - 知乎&/a&&/b&&/p&
亲，学海无涯，技多不压身哈。有一定的前端技术，学习后端技术会轻松一些。云栖君就给亲推荐一些学习前端知识免费的精华课程。 都是零基础从入门课程。1.《零基础学前端HTML+CSS》课程介绍网页的本质就是超级文本标记语言HTML，我们这套课程从基础语法入门…
&p&：追加 &a href=&//link.zhihu.com/?target=http%3A//www.css88.com/archives/8748& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&精心收集的 95 个超实用的 JavaScript 代码片段（ ES6+ 编写）&/a&&br&&br&：追加个快速取整的方法：&br&&br&console.log(~~47.11)
// -& 47&/p&&p&console.log(~~1.9999) // -& 1&/p&&p&console.log(~~[])
// -& 0&/p&&p&------------&/p&&p&console.log(20.15|0);
// -& 20&/p&&p&console.log((-20.15)|0);
// -& -20&/p&&p&------------&/p&&p&console.log(20.15^0);
// -& 20&/p&&p&console.log((-20.15)^0);
// -& -20&/p&&p&------------&/p&&p&console.log(20.15 & & 0);
// -& 20&/p&&p&console.log((-20.15) & & 0);
//-20&/p&&p&上面这些按位运算符方法执行很快，当你执行数百万这样的操作非常适用，速度明显优于其他方法。但是代码的可读性比较差。还有一个特别要注意的地方，处理比较大的数字时（当数字范围超出 ±2^31-1 即：），会有一些异常情况。使用的时候明确的检查输入数值的范围。&/p&&p&来源：&a href=&//link.zhihu.com/?target=http%3A//www.css88.com/archives/8488& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&你可能不知道的 JavaScript 中数字取整：向上取整，向下取整，四舍五入，舍去小数&/a&&br&---------------------------------&/p&&p&1、单行写一个评级组件&/p&&p&&★★★★★☆☆☆☆☆&.slice(5 - rate, 10 - rate);定义一个变量rate是1到5的值，然后执行上面代码，看图&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-f5be94decc6aab259e4c53b0ee792399_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&501& data-rawheight=&566& class=&origin_image zh-lightbox-thumb& width=&501& data-original=&https://pic2.zhimg.com/50/v2-f5be94decc6aab259e4c53b0ee792399_r.jpg&&&/figure&&p&&br&&/p&&p&才发现插件什么的都弱爆了&/p&&figure&&img src=&https://pic4.zhimg.com/50/v2-b3cf532e0b7b5122ffe0f47be84dcf60_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&240& data-rawheight=&240& class=&content_image& width=&240&&&/figure&&p&&br&&/p&&p&来源：&a href=&https://www.zhihu.com/question//answer/& class=&internal&&来自知乎用户蜗牛老湿的回答&/a& &/p&&p&2、如何装逼用代码骂别人SB(!(~+)+{})[--[~+&&][+[]]*[~+[]] + ~~!+]+({}+)[[~!+[]]*~+]&/p&&figure&&img src=&https://pic1.zhimg.com/50/v2-cd63d8dc2efc334a0b6e6cd107c5afda_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&548& data-rawheight=&124& class=&origin_image zh-lightbox-thumb& width=&548& data-original=&https://pic1.zhimg.com/50/v2-cd63d8dc2efc334a0b6e6cd107c5afda_r.jpg&&&/figure&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-fb8ca7adddfe526cc20ba_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&235& data-rawheight=&133& class=&content_image& width=&235&&&/figure&&p&&br&&/p&&p&了解为什么请移步：&a href=&//link.zhihu.com/?target=http%3A//www.jfh.com/jfperiodical/article/3224& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一行能装逼的JavaScript代码&/a&&/p&&p&3、如何用代码优雅的证明自己NB&/p&&p&这个牛逼了 console.log(([[]]+)[+!![]]+(+{})[!+[]+!!])&/p&&figure&&img src=&https://pic1.zhimg.com/50/v2-b9ac95abbfc2cdcf7dc90_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&449& data-rawheight=&149& class=&origin_image zh-lightbox-thumb& width=&449& data-original=&https://pic1.zhimg.com/50/v2-b9ac95abbfc2cdcf7dc90_r.jpg&&&/figure&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-b467dde9eec7fefee97896_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&420& data-rawheight=&376& class=&content_image& width=&420&&&/figure&&p&&br&&/p&&p&4、JavaScript 错误处理的方式的正确姿势&/p&&p&&br&&/p&&p&舅服你&/p&&p&try {&br&
something&br&} catch (e) {&br&
window.location.href =&br&
&&a href=&//link.zhihu.com/?target=http%3A//stackoverflow.com/search%3Fq%3D& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&stackoverflow.com/searc&/span&&span class=&invisible&&h?q=&/span&&span class=&ellipsis&&&/span&&/a&[js]+& +&br&
e.&br&}&/p&&figure&&img src=&https://pic4.zhimg.com/50/v2-d36aed9ee76e955ef7b54ddd_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&440& data-rawheight=&345& class=&origin_image zh-lightbox-thumb& width=&440& data-original=&https://pic4.zhimg.com/50/v2-d36aed9ee76e955ef7b54ddd_r.jpg&&&/figure&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/50/v2-aed68cd7cc1ede77a08bc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&265& data-rawheight=&190& class=&content_image& width=&265&&&/figure&&p&5、从一行代码里面学点JavaScript&/p&&p&[].forEach.call($$(&*&),function(a){&br&
a.style.outline=&1px solid #&+(~~(Math.random()*(1&&24))).toString(16)&br&})&/p&&p&翻译成正常语言就是这样的&/p&&p&Array.prototype.forEach.call(document.querySelectorAll('*'), &br&dom =& dom.style.outline = `1px solid #${parseInt(Math.random() * &br&Math.pow(2,24)).toString(16)}`)&/p&&p&接下来在浏览器控制看看：something magic happens&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-fcc5eb24d383e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1198& data-rawheight=&525& class=&origin_image zh-lightbox-thumb& width=&1198& data-original=&https://pic2.zhimg.com/50/v2-fcc5eb24d383e_r.jpg&&&/figure&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-c1a3c25aeaaf8cd_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&600& data-rawheight=&331& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic2.zhimg.com/50/v2-c1a3c25aeaaf8cd_r.jpg&&&/figure&&p&&br&&/p&&p&具体分析请参见这篇文章：&a href=&//link.zhihu.com/?target=https%3A//sdk.cn/news/3025& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&从一行代码里面学点JavaScript&/a&&/p&&p&6、论如何优雅的取随机字符串&/p&&p&Math.random().toString(16).substring(2) // 13位&br&Math.random().toString(36).substring(2) // 11位&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-dc3f09fe2438a8eedeb035f4c0f7e8be_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&332& data-rawheight=&137& class=&content_image& width=&332&&&/figure&&p&7、(10)[&toString&]() === &10&&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-3ba669cb36f797b650c93df6f1824cdc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&339& data-rawheight=&187& class=&content_image& width=&339&&&/figure&&p&&br&&/p&&p&解析请移步：&a href=&//link.zhihu.com/?target=http%3A//qylanikin.lofter.com/post/1cbb3f55_cc787c9& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&js奇淫技巧1&/a&&/p&&p&8、匿名函数自执行&/p&&p&这么多写法你选择哪一种？我选择死亡。&/p&&p&( function() {}() );&br&( function() {} )();&br&[ function() {}() ];&br&&br&~ function() {}();&br&! function() {}();&br&+ function() {}();&br&- function() {}();&br&&br&delete function() {}();&br&typeof function() {}();&br&void function() {}();&br&new function() {}();&br&new function() {};&br&&br&var f = function() {}();&br&&br&1, function() {}();&br&1 ^ function() {}();&br&1 & function() {}();&br&// ...&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-82be9cf2cc7168ffb77aa7ed212eb49d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&678& data-rawheight=&584& class=&origin_image zh-lightbox-thumb& width=&678& data-original=&https://pic2.zhimg.com/50/v2-82be9cf2cc7168ffb77aa7ed212eb49d_r.jpg&&&/figure&&p&9、另外一种undefined&/p&&p&从来不需要声明一个变量的值是undefined，因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写，会被鄙视的&/p&&p&var data =&/p&&p&但是如果你就是强迫症发作，一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做：&/p&&p&var data = void 0; // undefined&/p&&p&void在JavaScript中是一个操作符，对传入的操作不执行并且返回undefined。void后面可以跟()来用，例如void(0)，看起来是不是很熟悉？没错，在HTML里阻止带href的默认点击操作时，都喜欢把href写成javascript:void(0)，实际上也是依靠void操作不执行的意思。&/p&&p&当然，除了出于装逼的原因外，实际用途上不太赞成使用void，因为void的出现是为了兼容早起ECMAScript标准中没有undefined属性。void 0的写法让代码晦涩难懂。&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-33b9fbc25bb4e6702626_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&500& data-rawheight=&378& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic3.zhimg.com/50/v2-33b9fbc25bb4e6702626_r.jpg&&&/figure&&p&10、论如何优雅的取整&/p&&p&var a = ~~2.33&br&&br&var b= 2.33 | 0&br&&br&var c= 2.33 && 0&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-b958b94eacab8ba19cc3f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&323& data-rawheight=&196& class=&content_image& width=&323&&&/figure&&p&11、如何优雅的实现金钱格式化： --& 1,234,567,890&/p&&p&用正则魔法实现：&/p&&p&var test1 = ''&br&var format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')&br&&br&console.log(format) // 1,234,567,890&/p&&p&非正则的优雅实现：&/p&&p&function formatCash(str) {&br&
return str.split('').reverse().reduce((prev, next, index) =& {&br&
return ((index % 3) ? next : (next + ',')) + prev&br&
})&br&}&br&console.log(formatCash('')) // 1,234,567,890&/p&&figure&&img src=&https://pic1.zhimg.com/50/v2-b32f4aafb31e0c3e61a1_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&240& data-rawheight=&201& class=&content_image& width=&240&&&/figure&&p&12、这个我服，还有这个你很机智&/p&&p&我服&/p&&p&while (1) {&br&
alert('牛逼你把我关了啊')&br&}&/p&&p&你很机智，好一个障眼法&/p&&p&清除缓存： &a href=&javascript:alert('清除成功');&&清除缓存&/a&&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-49f0e8b97fd466befd17e0d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&276& data-rawheight=&183& class=&content_image& width=&276&&&/figure&&p&13、逗号运算符&/p&&p&var a = 0; &br&var b = ( a++, 99 ); &br&console.log(a);
// 1&br&console.log(b);
// 99&/p&&figure&&img src=&https://pic2.zhimg.com/50/v2-83f8e7f3bf389ee9b9aea7_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&470& data-rawheight=&175& class=&origin_image zh-lightbox-thumb& width=&470& data-original=&https://pic2.zhimg.com/50/v2-83f8e7f3bf389ee9b9aea7_r.jpg&&&/figure&&p&14、论如何最佳的让两个整数交换数值&/p&&p&常规办法：&/p&&p&var a=1,b=2;&br&a +=&br&b = a -&br&a -=&/p&&p&缺点也很明显，整型数据溢出，对于32位字符最大表示数字是，如果是和交换就失败了。&/p&&p&黑科技办法：&/p&&p&a ^=&br&b ^=&br&a ^=&/p&&figure&&img src=&https://pic3.zhimg.com/50/v2-285b787dadebcdfb8150997_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&331& data-rawheight=&228& class=&content_image& width=&331&&&/figure&&p&&br&&/p&&p&哈哈&/p&
：追加个快速取整的方法： console.log(~~47.11) // -& 47console.log(~~1.9999) // -& 1console.log(~~[]) // -& 0------------console.log(20.15|0); // -& 20co…
&p&刚出炉，热乎图一张。&/p&&figure&&img src=&https://pic2.zhimg.com/50/3bcba220c0e0ff487a0a197_b.jpg& data-rawwidth=&1043& data-rawheight=&685& class=&origin_image zh-lightbox-thumb& width=&1043& data-original=&https://pic2.zhimg.com/50/3bcba220c0e0ff487a0a197_r.jpg&&&/figure&&br&&p&说明：&/p&&p&1.上图中function Empty() {}有三处相同，用相同颜色标出，只画出一个，剩下两个与之等价。一个function Empty() {}可导向另两个function Empty() {}，可见这个图是画不完的。&/p&&br&&p&2.开始打算分别画几张图，几个都画完了之后才发现合在一起更容易理解点。&/p&&br&&p&3.第一次用Visio画图，效果还挺满意的。但下面这张图暂时还是没有画出满意的效果。&/p&&br&&p&4.补一段《javascript高级程序设计》中的代码，以及代码中实例与构造函数和原型之间的关系图。其中[[Prototype]]与__proto__等价。&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&function SuperType(){
this.property =
SuperType.prototype.getSuperValue = function(){
return this.
function SubType(){
this.subproperty =
// 继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
return this.
var instance = new SubType();
console.log(instance.getSuperValue()); // true
&/code&&/pre&&/div&&br&&figure&&img src=&https://pic3.zhimg.com/50/7dce0c57d538efd81a6624_b.jpg& data-rawwidth=&605& data-rawheight=&288& class=&origin_image zh-lightbox-thumb& width=&605& data-original=&https://pic3.zhimg.com/50/7dce0c57d538efd81a6624_r.jpg&&&/figure&
刚出炉，热乎图一张。 说明：1.上图中function Empty() {}有三处相同，用相同颜色标出，只画出一个，剩下两个与之等价。一个function Empty() {}可导向另两个function Empty() {}，可见这个图是画不完的。 2.开始打算分别画几张图，几个都画完了之后才发现…
&figure&&img src=&https://pic3.zhimg.com/v2-5a6c208d1dca28addfc60_b.jpg& data-rawwidth=&400& data-rawheight=&300& class=&content_image& width=&400&&&/figure&&h2&0 总结&/h2&&p&本书的JS&/p&&ol&&li&第一章有讲语法有挺多常见的坑点和原理解释很不错&/li&&li&第二章DOM编程讲述了挺多API&/li&&li&第三章事件处理机制其实对事件中的this关键字和事件传播顺序讲4. 解还不错&/li&&li&第四章WebStorage本地存储例子鲜明&/li&&li&第五章Worker应付复杂的js操作&/li&&li&第六章客户端通信WebSocket挺有用,可以实现用户与用户在浏览器中互动&/li&&/ol&&h2&1. JavaScript语法&/h2&&p&&b&1.1 执行js代码&/b&&/p&&p&javascript:alert(‘执行js’);//一般放在超链接中,用户点击即执行,&br&&script&alert(&执行js&)&/script&&/p&&p&&b&1.2 变量赋值&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var a = 1;//显式
a =1; //隐式
&/code&&/pre&&/div&&p&&b&1.3 全局变量与局部变量&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&...
var scope = &全局变量&;
function test(){
alert(scope); // undefiend
var scope = &局部变量&;
alert(scope); // 局部变量
&/code&&/pre&&/div&&p&因为全局变量被局部变量覆盖了.虽然局部变量的scope还没赋值,但是已经在方法里”占”上位置了.&br&但如果把局部变量的var删了,就会先输出全局变量后输出局部变量,因为没有var在方法里给局部变量”占”位置;&/p&&p&&b&1.4 浮点数&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var a =.333
var b = a * 5;
&/code&&/pre&&/div&&p&得出的结果是 1.99999&br&所以在js中判断浮点数是否相等 建议判断两者的差值是否小于一个足够的数(例如0.1)&/p&&p&&b&1.5 字符串&/b&&/p&&p&js中没有字符类型变量 “”与’‘一致&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var s =&abcdefg&
//b = &def&
b = s.slice(3, -1);
&/code&&/pre&&/div&&p&&b&1.6 字符串的正则表达式方法中&/b&&/p&&ol&&li&match()返回匹配的字符串(数组或null),可加/g进行全局匹配多个&/li&&li&search()返回匹配的索引值 单个&/li&&/ol&&p&&b&1.7 undefined和null&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&null == undefined //true
null === undefined //false
&/code&&/pre&&/div&&p&undefined 是没设值&br&null则是设定了为null值&/p&&p&&b&1.8 运算符&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&//逗号运算符 取最右返回值
a = (b =5 , c = 7 , d =56) //a =56
a = void(b =5 , c = 7 , d =56) //a = undefined
&/code&&/pre&&/div&&p&&b&1.9 typeof和instanceof&/b&&br&typeof 用来获得 实例类型 :&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&typeof(&123&); //string
&/code&&/pre&&/div&&p&instanceof 判断变量是否为某类的实例&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var a = [4,5];
alert(a instanceof Array); //true
&/code&&/pre&&/div&&p&&b&1.10 语句&/b&&br&抛出异常&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&throw new Error(&用户自定义异常&); //一般用于终止程序和返回错误提示是个不错的选择;
}catch(e){
alert(e.message); // &用户自定义异常&
&/code&&/pre&&/div&&p&for in&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&//这回输出浏览器的所有属性,做浏览器兼容之前可以考虑看看.
for( prop_name in navigator){
document.wrti(prop_name + & : & + navigator[propname]);
&/code&&/pre&&/div&&p&跳出命名for&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&outer:
&/code&&/pre&&/div&&p&&b&1.11 函数&/b&&/p&&p&js 允许先调用函数 再定义函数&/p&&p&&b&1.11.1 定义匿名函数&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var show_name = function(name){
alert(name);
show_name(&K&); //K
&/code&&/pre&&/div&&p&这样的好处是什么,如果直接定义function 它实际上也是创建了一个对象&/p&&p&&b&1.11.2 函数既对象&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var hello = function(){...};
hello instanceof Function //
hello instanceof Object //
alert(heelo) //输出函数源代码
&/code&&/pre&&/div&&p&&b&1.11.3 调用函数方式的不同&/b&&/p&&ol&&li&直接调用函数 返回return的值或void&/li&&li&new 函数 得到的都是对象 - -…….&/li&&/ol&&p&1.11.4 this关键字.&/p&&ol&&li&在函数中使用this.变量 该变量就是函数的实例变量,而非局部变量,无论它在哪里.&/li&&li&函数可依附在类中.如没指定 则依附在winodw对象中&/li&&/ol&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var hello =function(){...}
window.hello();
wark: function(){...}
&/code&&/pre&&/div&&p&&b&1.11.5 函数中的变量有三种&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function Person(){
//局部变量 只能在函数里访问
//实例属性 通过对象.访问
//类属性 通过Patient.name访问 与static类似
&/code&&/pre&&/div&&p&&b&1.11.6 js是一种动态语言,能随时给对象增加属性和方法&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&function Student(){ };
var student =new Student();
//动态增加name属性
student.name = 'K';
alert(sutdent.name) //K
Student.age =22 ;
alert(Student.age); //22 类属性也是可以动态添加的
&/code&&/pre&&/div&&p&&b&1.11.7 调用函数的三种方式&/b&&/p&&ol&&li&直接调用&/li&&/ol&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&windows.alert();
&/code&&/pre&&/div&&ol&&li&call()调用&br&作用:动态地传入一个函数引用&/li&&/ol&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var each = function(array,fn){
for(var index in arrary){
//null表示以window为调用者fn函数
fn.call(null,index,arrary[index]);
each([4,20,3] , function(index ,ele){
alert(&第 & + index &个元素是 : & + ele);
&/code&&/pre&&/div&&p&call()调用函数语法为:&code&函数引用.call(调用者,参数1,参数2...)&/code&&br&直接调用函数语法为:&code&调用者.函数(参数1,参数2 ...) = 函数.call(调用者,参数1,参数2 ...)&/code&&/p&&ol&&li&apply()调用&br&apply和()call()基本相似,区别如下:&/li&&li&通过call()调用函数时,括号必须详细列出每个参数&/li&&li&通过apply()动态地调用函数时,可以在括号中以arguments来代表所有参数&/li&&/ol&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&var myfun = function (a , b){
alert(a + &
myfun.call(window ,12 ,23); //12 23;
myfun.apply(window ,[20 , 39]); //20 39
var example = function (num1 ,num2){
//直接调用arguments代表调用者(example,this代表example)时的传入的所有参数
myfun.apply(this,arguments);
example(20,40) //20 40
&/code&&/pre&&/div&&p&&b&1.11.8 函数的独立性&/b&&br&在函数A中可以定义函数B