经典面试题之URL到页面加载的过程

也没什么好讲的，这里面的水有些深了，我只能写些浅薄的东西啦~

讲一下过程吧！

1、输入url（完整的url包括协议、域名、端口号、路径等）

2、浏览器查找当前的url是否存在缓存，并对比缓存是否过期（这里会涉及到服务器返回的状态码304，强制缓存cache-control、Expires，对比缓存last-Modified、Etag(资源实体标识，是哈希字符串）等）

3、DNS解析（域名解析）：域名解析过程就是通过域名去查找与之对应的服务器IP的过程

     （1）浏览器先检查本地hosts文件是否有这个url映射的IP，有就调用这个IP地址，完成域名解析

     （2）如果没有找到，则去找本地DNS解析器缓存，查找到则返回

     （3）再没找到，就去查找本地DNS服务器，找到返回

     （4）如果还没找到，就向根域名服务器查找，没找到就转发给下级，层层查找，直达查找到IP

4、建立TCP连接（三次握手建立连接）

      （1）第一次握手，建立连接，浏览器发生syn包给服务器，等待服务器确认；

　   （2）第二次握手，服务器收到syn包，确认浏览器syn包，并发送syn+ack包给浏览器；

　　（3）第三次握手，浏览器收到服务器syn+ack包，向服务器发送确认包，发送完毕，建立连接；

　  完成三次握手，浏览器和服务器就可以开始传送数据啦~

5、浏览器向服务器发送http请求

    http1.0请求方法：GET  POST HEAD

    http1.1新增请求方法：OPTIONS  PUT DELETE  TRACE  CONNECT

6、服务器响应http请求（包含状态码、响应头、响应体）

     （1）常见状态码：

        200：请求数据成功，并返回

　　 301：永久重定向，表示旧地址的资源被永久的移除（资源不可访问）

　　 302：临时重定向，表示旧地址的资源还可以访问，临时跳转到新地址

        304：资源未修改，可用缓存资源

　　 400：客户端请求语法错误

        401：请求需要身份认证

        403：服务器收到请求，但拒绝提供服务

　　 404：请求资源不存在

　　 405：请求方法被服务器禁止

  　   500：服务器错误

  （2）响应体返回给浏览器的资源（html、css、js、图片等）

7、浏览器渲染页面

　　（1）解析html构建DOM和CSSOM树，构建DOM树期间，如果遇到JS，阻塞DOM树和CSSOM树的构建，优先加载js文件（js会阻塞页面加载，所以一般放到html底部进行加载），再加载DOM树和CSSOM树

　　（2）构建渲染树（render Tree）

　　（4）页面渲染过程的重绘(repaint)和重排（reflow），页面渲染完毕后，如若js操作了DOM，浏览器会对页面进行重绘和重排

 

重排（reflow），也叫Layout（回流）：元素的内容、结构、位置或尺寸发生变化时，需要重新计算样式和渲染树，会触发重排

重绘（repaint）：元素发生改变，如背景颜色、边框颜色、文字颜色等，会触发重绘

所以重排比重绘成本高

 

暂时写这些吧，有不对或缺失的欢迎补充~