关键路径呈现--网页性能优化

浏览器如何呈现网页

以该代码为例分析关键路径

  
    
    
    
  
  
    
题目
    

      
主要内容
    
    
    
  

一个网页的呈现有以下关键字，DOM树、CSSOM树和渲染树。如上代码所示，
DOM由HTML标签组成，浏览器能识别H5标签将其转化为DOM树。

DOM-Tree.png

body {
    background-color:red;
    h1 {
        font-size: 13px;
    }
    .root {
        color: red;
        p {
            text-align: center;
        }
    }
}

浏览器解析css，生成CSSOM。

cssom.png

浏览器将DOM树和CSS树结合，形成渲染树，在网页中呈现出来的即是我们看到的网页。

浏览器解析过程

浏览器遇到HTML文件，首先解析其中的标签生成DOM树，之后遇到link请求外部CSS文件（DOM还没有完全生成），之后一直向下解析标签元素，直到遇到script标签，请求js文件并返回请求，最后生成一个完整的包含样式的DOM树呈现在页面上。浏览器在接受到js后会立即解析并执行js，js会阻塞DOM树和CSSOM树的创建，内联的css和js会一直阻塞DOM树的建设。

网页性能优化

浏览器首先发送请求，下载HTML文件，在解析HTML文件的过程中，分别遇到外链接的css文件和js文件，需要在发送CSS、js请求并收到response后继续解析DOM。浏览器解析js时会阻止DOM和CSSOM树的创建。浏览器每次发送的数据有大小限制，超过该限制会再发起一次交互。

综上所述，一个网页的优化有以下几个方面：

1. 页面大小。空格、换行都占字符大小。
2. 发送请求的次数。
   部分CSS和js可以更改为内联样式，
   为css设置媒体识别信息，为外部脚本js设置async属性（异步执行，不阻塞DOM创建）

。。。。。（扎心，总感觉还有什么没有交代清楚。第一次写技术分享文章，有说的不清楚或错误的地方欢迎大家指出，大家共同进步）。。。。。