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

1.用户输入

用户输入一个url之后，浏览器会解析用户的输入，目的是找到该地址对应服务器的index.html文件，解析的步骤如下

• 先找浏览器缓存（chrome://dns/）看是否有改url对应的服务器地址，如果有则向服务器发出请求，没有则进行第二步
• 浏览器缓存没有该url，那么就像系统的缓存文件中找，如果有则向服务器发出请求，没有则进行第三步
• 本地缓存没有就会像dns服务器请求去解析，dns会将对应的地方返回，浏览器向返回的地址发出请求

2.浏览器发出请求

• 浏览器会向服务器发出tcp链接
• 服务器会返回静态文件

3.浏览器解析静态文件

• 浏览器第一个解析的一般是一个静态的html文件
• 遇到外链css和异步的js则异步请求外链文件，继续解析html（外链的css是异步的，外链的JS需要看是否添加了async和defer属性，添加了就是异步请求资源）
• 遇到同步的js文件则等待js文件解析结束后继续解析html（所以一般不会在head只请求很多同步的js文件）
• 最终解析html后会得到一个dom树，下图左侧第一张所示
• css文件会被解析为渲染树，如下图右侧所示,最终会形成一个待渲染的结构

• 浏览器GUI进行渲染

4.script标签添加异步属性的说明

• async:async表示立即异步下载js文件，但不影响html的解析
• defer:defer表示等待html解析和显示，解析结束之后再下载js文件