web页面加载、解析、渲染过程

一、页面生成过程

1. 用户输入信息
2. DNS服务器解析域名（ 查找对应的web服务器IP地址 ）
3. 查找到的IP地址给到浏览器
4. 浏览器拿着该IP地址，去访问web服务器（ 这个时候会涉及到客户端和服务器的tap，三次握手[建立连接]四次挥手[关闭连接] ）
5. 服务器处理完，返回html
6. 浏览器解析、加载界面

二、浏览器解析、加载界面

解析html：

    构建DOM树   ->
                    构建render树-> 布局render树 -> 绘制render树
    构建CSSOM树 -> 

即：

    HTML -> HTML Parser -> DOM  ->  
                    JavaScript  -> Render Tree (Layout) -> Painting -> Display
    CSS  -> CSS Parser  -> CSSOM->

注意：

    浏览器为了体验友好，并不是文档都全部解析了才会绘制界面，而是从上至下开始解析html，遇到外部引入的css文件，则会开启新线程下载css文件。

解析过程：

    1. 将html构建成一个DOM树(dom树的创建是一个深度遍历额过程，即：当前节点的所有子节点都搭建好后，才会去构建当前节点的兄弟节点)

    2. 将css解析成CSSOM树

    3. 根据DOM树和CSSOM树来构建RenderTree。(RenderTree和DOM树不一样。因为像display:none这些不会在渲染树中)

    4. layout布局，计算节点在屏幕中的位置，从属关系。

    5. 绘制界面，遍历render树，并使用浏览器UI后端层绘制每个节点。

影响界面渲染的因素：
    
    1. css注意事项(小知识点：css选择符是从右向左进行匹配的)：
        
        1.1 dom深度尽量浅 
        1.2 避免使用通配符*。
        1.3 不要使用table布局，因为一个小小的操作，可能就会造成整个表格的重排或重绘
        1.4 避免reflow(重排/回流) 和 repaint(重绘)
            1.4.1 reflow：对于DOM结构中的各个元素都有自己的盒子模型，需要浏览器根据各种样式来进行计算，并根据计算结果将元素放到它该出现的位置。(对应第4步：生成渲染树，比较耗时)
            1.4.2 repaint：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了。(对应第5步：paingting)
    
    2. javaScript影响因素：
        
        2.1 javaScript的位置会影响界面的加载速度
            2.1.1一般我们会将所有的script标签放到页面底部，也就是body闭合标签之前
        2.2 尽量采用无阻塞式加载javaScript方式
            2.2.1 动态的创建script标签实行异步加载js
            2.2.2 使用script标签的defer、async属性，不阻塞DOM的解析

三、总结

这是在阅读文章的过程中自己对浏览器的渲染过程的一些理解，肯定又不对的地方，希望大家多多指出。我也会继续不断的学习，增强自己的能力，学到的东西也会及时和大家分享。