进阶1: JS相关概念

2017-08-23 本文已影响30人晓风残月1994

简单介绍 JavaScript的发展历史

JavaScript 最初是在1994年，网景公司的Navigator浏览器，需要一种可以嵌入网页的脚本语言，用来控制浏览器的行为，在客户端完成一些功能。不需要很强大，语法最好简单点，容易学习和部署。Java能胜任，但是杀鸡不需要牛刀。浪费资源。
因此在1995年，雇佣了布兰登·艾克，负责开发期望的网页脚本语言。于是十天后，在1995年5月，诞生了JavaScript的第一版。
一开始名字是叫做，Mocha，为了蹭热点，双方也为了合作共赢，于是网景公司和Sun公司达成协议，改名为 JavaScript。
在发展了一段时间后。微软公司在1996年，模仿JavaScript开发了一种类似的语言，取名为JScript。这一行为，使得网景公司不再独自主导浏览器脚本语言。
1996年，网景公司觉得微软这样子发展不行，对自己太不利，因此找到了国际标准化组织，ECMA, 希望能把自己的JavaScript指定为国际标准。
1997年，第一版的标准文件出来，但是名字不是JavaScript，而是叫做ECMA，一方面JavaScript是注册商标，另一方面，ECMA也要挂个自己的名字，毕竟是自己团队建立的标准，所以叫做ECMAScript。
此后几年，ECMAScript逐步更新到了2015年的 5.1版本，并且成为了ISO国际标准。到了2012年底，所有的主要浏览器都已经支持ECMAScript5.1版的全部功能。
2015年，ECMASCript 6 正式发布，更名为ECMAScript 2015。
2016年，已经出现了 ECMAScript 7 这是目前最新的版本。

介绍浏览器的渲染机制

解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 -- 内容树。
构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
布局渲染树: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
绘制渲染树: 遍历渲染树，每个节点将使用UI后端层来绘制

浏览器渲染流程图
浏览器的工作原理,可参考How browsers work

样式、JS 在 HTML 中如何放置?

使用 link 标签将样式表放在顶部
将JS放在底部
原因如下：

脚本会阻塞后面内容的呈现
脚本会阻塞其后组件的下载

解释白屏和 FOUC

白屏就是，浏览器窗口中，无任何内容，呈现白色空白。
FOUC，全称是 Flash of Unstyled Content，叫做无样式内容闪烁。

以上两种现象，存在于不同浏览器的不同加载机制上。

白屏，如chrome浏览器，当脚本阻塞，或者认为设定不同加载延迟时间。会呈现白屏状态，以等待相应内容的加载。
而FOUC，比如Firefox浏览器，如果css样式被延迟加载或者阻塞，不会影响到前面的html dom 的展现，但是会出现无样式状态。

介绍下 repaint和 reflow的概念

首先，要明白的是，repaint，和reflow，都是浏览器内部的处理机制。你无法该表浏览器的处理行为, 但是你可以改变自己的代码，从而在浏览器的机制下，写出更好的代码。

reflow：DOM中每个元素都有自己的盒模型，这些都需要浏览器根据已经默认和认为定义的样式，来计算每个元素应该安放的位置，这个过程就是reflow。
当盒子位置，大小，和其他属性，比如颜色、字体大小等确定后，浏览器把这些元素全按照各有的特性绘制一遍，于是出现了页面，这个过程称之为repaint。

二者的关系上，是reflow必然伴随着repaint，而repaint未必有reflow的参与。

比如滚动屏幕，这是reflow 和repaint同时在作用，因为页面上位置改变了。需要重新布局渲染树，然后重新绘制。
但是如果只修改了颜色，这种不影响布局的属性，那么就不会用reflow的参与，是需要repaint重新绘制即可。

如何异步加载脚本

<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“在渲染该 script 标签之下的文档元素之前，不会等待后续要载入的文档元素，此刻读到script标签就会加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（同时进行，并行，也就是异步，双管齐下）。
<script defer src="script.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

defer & async

注意到async和defer的异同点了吗？

它们都会在加载脚本的过程中，允许后续文档元素的加载和渲染。
但是 async，是加载到脚本的时候，就会立即执行，尽管此时，后续文档正在异步加载。
而defer，则保证了脚本执行的顺序，脚本加载和后续文档元素的加载渲染是同时的。但是想要执行，则必须等后续所有文档元素全部解析完成之后。