进阶：浏览器加载机制 & 白屏和FOUC演示
网页是什么
-
网页 = html+css+javascript
-
JavaScript: 操作网页内容，实现功能或效果
JavaScript 发展历史
- ECMASCript和Javascript 前者是后着的核心语言
- ECMAScript举例来说
- ES4 ES5 ES6指的是什么
浏览器的渲染机制
服务器发送标签
- 浏览器解析HTML标签 构建一个DOM树
- 浏览器解析css标签 构成一个cssDom树
- 把DOM的CSSOM 组合成渲染树
- layout根据属性计算去他精确的位置
- painting 和 dislay
Repaint 、Reflow 的基本认识和优化 (2)
[图片上传失败…(image-4ad66c-1554797182610)]
对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
可见这两个东东对浏览器渲染页面是很重要的啊，都是会影响性能的，因此我们需要了解一些常见的会引起repaint和reflow的一些操作，并且应该尽量减少以提高渲染速度。
关于Repaint和Reflow
- RepaintReflow 重新计算重新绘制
位置出现不同就Reflow
样式出现不同就Repaint
js改动的一致性
阅读两篇文章
白屏￥FOUC(Flash of Unstyled Contect)无样式内容闪烁
- 对于CHROME来说
等待css树加载完成后一起渲染出来 - 对于Firefox来说
加载到哪一个样式就运行那个样式
CSS 和 JS 放置顺序, 异步机制
- 将JS放在底部
- 脚本会阻塞后面内容的呈现
- 脚本会阻塞其后组件的下载
js加载后可以立刻执行
如果css放在后面
其它标签的加载可能会影响到css样式的加载
加载异步
-
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
-
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
-
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
-
defer:脚本延迟到文档解析和显示后执行，有顺序
-
async:不保证顺序
什么是同步什么是异步
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，知道收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回式系统会通知进程进行处理，这样可以提高执行的效率。
如何异步加载脚本？
在script标签中添加async，或者defer
- defer：脚本延迟到文档解析和显示后执行，有顺序
- async：不保证顺序
ES3、ES5、ES6分别指什么？
国际标准化组织ECMA（European Computer Manufacturers Association）发布的javascript标准
ES3指的是ECMAScript 3.0版
ES5指的是ESMAScript5.0版本
ES6指的是ECMAScript 6.0版
解释浏览器的渲染机制
- 浏览器解析html，并生成DOM树
- 浏览器解析css，并生成CSSOM树
- DOM树和CSSOM树生成RenderTree（渲染树）
- 渲染树的基础上进行布局，进行每个节点的几何构造
- 把每个节点的几何构造绘制到屏幕上
repaint 和 reflow 分别指什么
- reflow
对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow - repaint
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
解释白屏和 FOUC。
白屏
- 如果把样式放在文档底部,浏览器会等HTML和CSS完全加载完成之后再绘制到屏幕上去，譬如我们打开某些国外的网站可能出现加载时间过长，页面会出现白屏,而不是内容逐步展现。
FOUC:
如果把样式放在底部,对于FireFox浏览器，会逐步加载无样式的内容，等CSS加载完成之后突然展现样式。这是由于FireFox的渲染逻辑是解析HTML就会直接画到页面上，这时你会看到没有样式的内容，CSS再通过不断的解析将页面重绘一遍，也就是闪烁一下突然展现样式，这就是FOUC。