5网页性能优化

https://www.jianshu.com/p/e6252dc9be32

浏览器渲染原理

浏览器拿到响应内容后，在内存条中开辟一块内存空间（开辟栈空间），用来代码执行环境。同时分配一个主线程（thead）去一行行解析和执行代码。这里就说明js是单线程
一行代码就是进栈执行，执行（栈顶执行）完出栈。
当执行遇到link标签 <link href="外部css样式" />
<script src='外部链接js地址">
<img src="外部图片地址>

注意：<script>代码块...</script> 这个在第一次主线程加载执行的 不是开辟线程喔。

浏览器都会开辟全新的线程立即去加载资源文件。同时主线程继续执行代码。这里就解释了link加载css会和主线程同时执行（因为是不同的线程）

第一次：自上而下执行完代码后，只把页面中的html元素加载完成，只生成DOM树。（因为css文件可能都没有请求回来）
js主线程去监听任务队列（link/script/img/a都会进入等待任务队列），如果等待任务哪个先执行完了（就是说资源加载回来了）js主线程拿到主任务队列中执行。比如说css资源加载回来拿到js主任务队列执行
css处理完成生成CSSOM
DOM tree+CSSDOM tree=render tree

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

• DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片等
• load事件触发时，页面上所有的DOM，样式表，脚本，图片都已加载完成

 CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。

 渲染阻塞

 

前端性能优化：

减少http请求次数和大小。合并css js文件 并且压缩.
请求越多（浏览器开辟的线程越多）服务器压力越大，请求可能就会发生堵塞，前端js主线程就会持续等待资源文件  。
事件代理和创建文档碎片（减少回流）

回流reflow 元素大小或者位置发生改变，导致渲染树重新计算和渲染
重绘 repaint元素样式的改变
回流一定会重绘（因为回流只会紧接这就是重绘；重绘不一定会回流。

避免DOM回流

<link> @import都是加载css文件。有什么区别?
<link>去加载css资源文件，浏览器会自动开辟新线程去请求资源，同主线程一起
@import

从输入url到渲染页面的整个过程

1HTTP请求阶段 2HTTP响应阶段 3浏览器渲染阶段

window.onload 和DOMcontentLoaded