浏览器解析过程

作者: LiLi原上草 | 来源:发表于2017-08-01 01:09 被阅读75次

面试老被问到的一个问题,个人总结一下,有需要补充和改进的请留言
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;

相关文章

  • JS基础知识储备(回流与重绘及优化策略)

    1、浏览器渲染过程 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成DOM树,解析CSS,生...

  • 浏览器加载、解析、渲染

    浏览器加载、解析、渲染的过程是怎么样的? Why 为什么要了解浏览器加载、解析、渲染这个过程? 1.了解浏览器如何...

  • 浏览器渲染过程

    参考:浏览器加载、解析、渲染的过程 解析:1. 浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深...

  • 回流和重绘

    浏览器渲染过程 从上面这个图上,我们可以看到,浏览器渲染过程如下: 解析HTML,生成DOM树,解析CSS,生成C...

  • 浏览器工作原理及V8引擎

    浏览器解析过程 当浏览器加载html资源时,会进行如下的解析过程 遇见 HTML 标记,构建 DOM 树 遇见 s...

  • script async和defer, 什么是阻塞渲染

    浏览器渲染逻辑 浏览器下载html网页,边下载边解析渲染 解析过程中发现script标签 网页停止解析,把网页渲染...

  • vue核心-虚拟DOM

    真实DOM解析流程 浏览器渲染的过程主要包括以下五步: 浏览器获取到 HTML 文档并解析 DOM 树 解析 CS...

  • 虚拟DOM

    真实DOM解析流程 浏览器渲染的过程主要包括以下五步: 浏览器获取到 HTML 文档并解析 DOM 树 解析 CS...

  • 经典面试题:浏览器是怎样解析CSS的?

    摘要: 理解浏览器原理。 原文:浏览器解析 CSS 样式的过程 作者:前端小智 解析 一旦 CSS 被浏览器下载,...

  • 面试NO.1——HTML

    一、浏览器加载过程浏览器在接受到html代码后开始解析,解析过程是先构建DOM树,html代码自上而下进行构建,当...

网友评论

    本文标题:浏览器解析过程

    本文链接:https://www.haomeiwen.com/subject/gbpdlxtx.html