从输入URL到页面加载发生了什么

https://segmentfault.com/a/1190000006879700

https://segmentfault.com/a/1190000012960187

1、DNS解析，域名得到IP
2、TCP连接
3、HTTP请求
4、服务器处理响应，并输出报文
5、浏览器得到报文，解析渲染页面

浏览器渲染过程

1、html构造出 DOM树

2、CSS构成样式树（CSS树）

3、样式树和DOM树构成渲染树（render tree）

4、布局（layout）

计算元素的大小和位置，输出盒模型

5、绘制到屏幕

遍历Render树，将内容绘制到屏幕上

 

重绘（repaint）

元素的颜色、背景色变化，几何尺寸没有变化

回流(reflow)

元素位置和几何尺寸的变化，引起所有子元素的递归改变，开销大

 

defer 和 async

1、共同：使 script 异步加载
2、区别：
defer的脚本在 DOMContentLoaded（html文档加载解析完成） 之前执行；
async的脚本加载完成立即执行，顺序不确定，可能在DOMContentLoaded之前，也可能在之后执行

 

js单线程机制：
JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行，形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件；脚本运行时先依次运行执行栈，然后会从任务队列里提取事件，运行任务队列中的任务，这个过程是不断重复的，所以又叫做事件循环(Event loop)。

文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。原因是因为JS有可能修改DOM结构，这就意味着JS执行完成前，后续所有资源的下载是没有必要的，这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。