[JavaScript知识库]输入一个URL到渲染页面发生了什么

1.输入URL，浏览器查找当前URL是否存在缓存，并比较缓存是否过期

2.DNS解析域名成IP地址

3.根据IP地址向对应的服务器发送网络请求

? (建立TCP连接三次握手）

4.服务器处理请求，返回对应的文件

（通常是返回index.html, 解析过程需要加载对应的css，js文件再去请求返回）

5.浏览器解析文件并渲染页面

? 渲染过程

?（1）HTML Parse模块解析HTML文件，生成DOM Tree

?（2）解析过程如果碰到script标签，会停止解析HTML，执行完JS再去解析

1. 即按HTML顺序来执行，但是当JS文件过大，执行时间过长会阻塞页面，即等待时间过长
2. 解决方式一： 将scrpit脚本放在页面底部，但是这种方式也存在问题，浏览器解析完HTML才会去加载对应的脚本，对于长的 HTML 文档来说，这样可能会造成明显的延迟
3. 解决方式二：加载异步脚本，这里script标签有两个特性async，defer
4. defer特性仅适用于外部脚本，即带有src的脚本
5. defer特性会告诉浏览器不要执行脚本，继续解析HTML，并且继续下载JS脚本，等到DOM解析完毕之后，并且在DOMContentLoaded事件触发之前执行脚本。（DOMContentLoaded事件--浏览器解析完HTML,构建完DOM Tree，但是像img这样的外部资源可能尚未加载完毕）
6. async特性也是异步加载脚本。
7. defer，async的区别：

? ? ? ? ? 1）defer特性可以保证脚本的先后执行顺序，即在文档靠前的先执行。

? ? ? ? ? 2）async特性不可以保证顺序，先加载完的先执行,加载完毕就执行，不会等待事件触发。

?????8. 当我们在JS脚本中添加动态脚本，即动态添加script标签时，也是异步加载的，默认添加? ? ? ? ? ? ? ? ?async特性，可以添加script.async = false让其与defer一样。

?（3）CSS Parse模块解析CSS，生成CSSOM（对应的Style Rules）

?（4）将DOM Tree与Style Rules附加在一起，生成Render Tree（渲染树）

?（5）根据Render Tree进行布局

?（6）渲染对应的页面进行展示

6.关闭TCP连接