javascript

innerHTML和document.write()区别

dom元素属性

document方法，写入页面的内容流会导致页面重写

浏览器渲染网页的具体流程（关键渲染路径）

用户看到页面实际上可以分为两个阶段：页面内容加载完成和页面资源加载完成，分别对应于DOMContentLoaded和Load。

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片等

load事件触发时，页面上所有的DOM，样式表，脚本，图片都已加载完成

1、HTML解析，构建DOM树

  浏览器从网络或硬盘中获得HTML字节数据后会经过以下流程将字节解析为DOM树：

字符编码：先将HTML的原始字节数据转换为文件指定编码的字符。

令牌化：然后浏览器会根据HTML规范来将字符串转换成各种令牌（如、、

这样的标签以及标签中的字符串和属性等都会被转化为令牌，每个令牌具有特殊含义和规则）。

生成节点对象：接着每个令牌都会被转换成定义其属性和规则的对象，即节点对象。

构建DOM树：最后将节点对象构建成树形结构，即DOM树。HTML标签之间有复杂的父子关系，树形结构刚好可以诠释这样的关系。

2、CSS解析，构建CSSOM树

浏览器解析CSS文件并生成CSSOM，每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。

在这个过程需要注意的是：

CSS解析可以与DOM解析同时进行。

CSS解析与script的执行互斥 。

在Webkit内核中进行了script执行优化，只有在JS访问CSS时才会发生互斥。

3、Render Tree

  在构建了DOM树和CSSOM树之后，浏览器只是拥有2个相互独立的对象集合，DOM树描述的文档结构和内容，CSSOM树描述了对应文档的样式规则，想要渲染出页面，就需要将DOM树、CSSOM树结合在一起，构建渲染树。

4、Layout

渲染树构建好后，浏览器得到了每个节点的内容与样式，下一步就是需要计算每个节点在浏览器窗口的确切位置与大小，即layout布局。

布局阶段，从渲染树的根节点开始遍历，采用盒子模型的模式来表示每个节点与其他元素之间的距离，从而确定每个元素在屏幕内的位置与大小。

布局阶段会从渲染树的根节点开始遍历，由于渲染树的每个节点都是一个Render Object对象，包含宽高，位置，背景色等样式信息。所以浏览器就可以通过这些样式信息来确定每个节点对象在页面上的确切大小和位置，布局阶段的输出就是我们常说的盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。需要注意的是：

float元素，absoulte元素，fixed元素会发生位置偏移。

我们常说的脱离文档流，其实就是脱离Render Tree。

5、Paint绘制页面

  当Layout布局完成后，浏览器会立即发出Paint事件，开始讲渲染树绘制成像素，绘制所需要的时间跟CSS样式的复杂度成正比，绘制完成后，用户才能看到页面在屏幕中的最终呈现效果。

渲染优化方案

1、优化关键渲染路径方案

通过优化关键渲染路径，可以优化页面渲染性能，减少页面白屏时间。

优化JS：JavaScript文件加载会阻塞DOM树的构建，可以给