Web前端On the Road(成为大牛)F2e踩坑之路web颜值要爆表

浏览器解析过程

2017-08-01  本文已影响75人  LiLi原上草

面试老被问到的一个问题,个人总结一下,有需要补充和改进的请留言
1、输入地址

首先生成一个http request对象,放到IO(cpu运算接口input/output)队列中
IO分析hr的头,分析url是否有cache,有的话就直接解析本地的数据

浏览器智能匹配可能的url(从历史,书签等地方),给出智能提示;

2、浏览器查找域名的IP地址

首先查看本地的hosts文件 → 本地的DNS服务器 → 域服务器,查找到对应的IP地址,并且缓存
DNS就是一个映射表,相当于一个电话簿

3、浏览器向web服务器发送一个HTTP请求

拿到对应的IP后,浏览器会以一个随机端口向服务器的80端口发起TCP链接请求,通过
三次握手建立链接,(http1.0和http1.1区别);

为什么要三次握手:为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误

4、连接建立之后

服务器会对TCP连接进行处理,对HTTP协议进行解析,进一步封装http request对象,然后返回一个HTTP
响应,响应包括状态行,响应头和响应正文,我可以通过判断响应状态码去做对应的处理:比方说:
    200 OK 、
    301 永久性重定向 、
    304 直接读取浏览器缓存
    400 Bad Request 表示客户端请求有语法错误,不能被服务器所理解      
    403 表示服务器收到请求,但是拒绝提供服务,通常会在响应正文中给出不提供服务的原因
    404 请求的资源不存在,例如,输入了错误的URL 
    500 服务器发生不可预期的错误

5、拿到数据之后

首先解析html,构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

解析过程中,浏览器首先会解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完
成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程涉及到两个概念:reflow(回流)和repain(重绘)

在浏览器显示HTML时,会获取其他地址内容的标签。浏览器会发送一个获取请求来重新获得这些文件。比如
我要获取外图片,CSS,JS文件等

浏览器自上而下执行,过程中如遇到css、图片等,请求是异步的

当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件
加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。因为JS有可能会修改DOM;所以在编写
代码时尽可能的把js写在html的底部,等html主体和css加载完之后再进行加载js;

总结一下:个人理解在浏览器解析的过程中我们需要注意的有两个点:一个是缓存,一个是并行

缓存也有一些效率问题,使用四件戳更新缓存    
常用的缓存DNS、cookie、webstorage表单数据、历史记录···

浏览器是有并行机制的,但是也不是并发连接数约大约好,服务器端每个连接都需要cpu耗损,进行计算的,需要考虑
到这样服务器是吃不消的,浏览器端有一个标准并发连接数2-6;
上一篇下一篇

猜你喜欢

热点阅读