浏览器加载机制 & 白屏和FOUC演示

进阶：浏览器加载机制 & 白屏和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。