浏览器加载机制 & 白屏和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。
可见这