URL解析过程和浏览器渲染机制【面试必问、深入解析 下一次再也不怕面试官问这个问题】
步骤拆分
- 网络-请求和响应
- 缓存
- DNS解析
- 建立TCP连接(三次握手和四次挥手)
- 服务端验证请求
- 响应文件类型(Content-Type)
- 浏览器-解析与渲染
- 浏览器进程和线程
- 构建Dom树
- layout paint 合成显示
详细回答
一、缓存
- 缓存在请求资源时很大程度提高了效率,对于前端和服务端都是很好的性能优化的手段。
- 缓存分为强缓存和协商缓存
- 判断强缓存的条件是,在请求开始,浏览器会验证该请求是否具有强缓存,判定缓存的标识是请求头中的cache-control(
http1.1同时存在cache-control和expires)、expires(http1.0只存在expires)字段,当两者在http1.1同时设置时,优先使用cache-control判断是否具有强缓存 - cache-control的值是max-age = xx;这个值代表客户端收到第一次响应成功后,该资源请求需要被缓存的时间,未超过这个时间下次请求则不发送任何请求,直接使用缓存数据
- 判断协商缓存的条件是请示头中的
If-None-Match和响应头中的E-tag,这两个字段成对存在,如果发出请求后两者相对于,则表示请求结果未发生任何改变,浏览器可以使用本地缓存,服务器返回状态码304
二、DNS解析
- DNS的解析过程是域名转换为真实IP地址的过程。
- 一个域名对应一个IP地址,一个IP地址可以对应多个域名。
- 优先从本机hosts文件中查找是否有和这个网站和IP地址映射关系,有则直接直接使用这个IP地址,完整解析。
- hosts文件中没有映射关系,DNS会按照固定的顺序查找缓存,步骤为
浏览器、本机系统、路由器缓存、运营商缓存、根域名服务器、顶级域名服务器、主域名服务器。 - 没有缓存则像DNS服务器发出请求,获取该域名对应的真实IP地址(此过程可以使用
dns-prefetch进行预解析优化)
三、TCP连接
- http的本质就是TCP连接,此时要进行三次握手。
- 第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认。
- 第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
- 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
- 该过程完成后,服务端开始像客户端传输数据。
四、服务端验证请求
- 服务端收到请求会对请求进行统一的验证,如安全拦截,跨域验证等。
- 根据请求类型做出处理,返回对应的响应白报文。
五、响应文件类型
- 服务端会根据Content-Type 来判断响应文件类型
- 文本、图片等资源浏览器会直接渲染展示到页面
- stream流文件,浏览器会进行下载
- html文档,会交给浏览器进行解析和渲染
六、浏览器的线程和进程
- 浏览器是多进程的,每一个窗口是一个进程。浏览器内核则是多线程的,资源下载会进行多线程下载。
- 浏览器内核的线程分为以下几种
- 定时器线程
- 负责执行异步定时器一类的函数的线程，如 setInterval，setTimeout 等。
- 主线程依次执行代码时，遇到定时器，会将定时器交给该线程处理，当计数完毕后， 事件触发线程会将计数完毕的事件加入到任务队列的尾部，等待 JS引擎线程执行。
- GUI线程
- 主要负责页面的渲染，解析 HTML，CSS，构建 DOM 树，布局和绘制等。
- 当页面需要重绘或者由于某种操作引发回流时，将执行该线程。
- 该线程与JS 引擎线程互斥，当执行 JS 引擎线程时，GUI渲染线程会被挂起， 当前任务队列为空时，JS引擎才会去执行 GUI 渲染。
- 网络请求进程
- 主要负责异步请求一类的函数的线程，如 Promise，axios，ajax等，主线程依次执行代码时，遇到异步请求，会将函数交给该线程处理，当监听到状态码变更，如果有回调函数，时间触发线程会将回调函数加入到任务队列的尾部，等待 JS 引擎线程的执行。
- Js引擎线程
- 主要负责处理 JavaScript 脚本，执行代码。
- 也主要负责执行准备好的待执行的事件，即定时器结束，或者异步请求成功并正确返回时，将依次进入任务 队列，等待 JS 引擎线程的执行。
- 该线程与 GUI 渲染线程互斥，当 JS引擎线程执行 JavaScript 脚本时间过长， 将导致页面渲染的阻塞。
- 事件触发线程
- 主要负责将准备好的事件交给 JS 引擎线程执行，比如 setTimeout 定时器计数结束，ajax 等异步请求成功并触发回调函数，或者用户触发点击事件时，该线程会将整装待发的事件依次加入到任务队列的尾部，等待 JS 引擎线程的执行。
- 定时器线程
- 浏览器内核得到报文后会进行以下的步骤完成页面的渲染
- 解析HTML得到Dom Tree
- 解析Css 得到Css Tree
- 合并Dom Tree和Css Tree生成Render Tree
- layout(布局) 计算每个元素的大小和位置,将元素布局到页面正确的位置
- paint(绘制) 绘制页面的像素信息,填充具体的样式
- GPU将合成后的结果显示到页面
七、构建Dom树的过程
构建Dom是编码和解码的过程,主要经过一下几个环节
- 编码: 将html原始字节内容转换为指定的编码内容
- 令牌化: 每一个标签都是一个令牌,内部保存自己的规则,令牌记录了标签的开始和结束,这也是判断标签有没有子节点的依据
- 生成对象:每一个令牌都会生成具有属性的对象,该对象保存该节点所携带的信息
- 构建完成 : 形成多个对象组成的树形结构
注: CssTree的构建过程同理
DomTree和CssTree最终合并为RenderTree,此时浏览器可以进行渲染
八、layout和paint
- 根据渲染树中的每一个节点位置,尺寸信息,将节点渲染到执行的位置
- 根据渲染树中节点的样式信息,为每一个节点分配样式
九、回流和重绘
- 回流: 当元素的位置,大小,结构等信息发生变化时,会构建渲染树,此过程称为回流。
- 重绘: 当元素外观视觉发生变化时,只需要使用新的样式覆盖这个元素,此过程称为重绘。
- 回流必定引起重绘,重绘不一定引起回流。
URL解析过程和浏览器渲染机制【面试必问、深入解析 下一次再也不怕面试官问这个问题】相关推荐
- 浏览器渲染机制的原理和过程
上一篇文章对浏览器Event Loop机制中Tsak以及MicroTask执行过程讲述中,对一个Event Loop结束后更新渲染(Update the rendering)的过程并没有说明,所以单独 ...
- 网站性能优化实战（二）——深入浅出浏览器渲染机制
--从Webkit内部渲染机制出发,谈网站渲染性能优化 本文是对前文:imweb.io/topic/5b6fd- 相关知识的补充,文中的"前文"一词同此. 特以此文向<Web ...
- 浏览器渲染机制之重排Reflow
什么是Reflow? DOM结构中每个元素都有自己的盒子模型,都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置, 这个过程称之为reflow 什么时候会触发Reflow? 修改Do ...
- 浏览器渲染机制面试_面试官不讲码德，问我Chrome浏览器的渲染原理（6000字长文）...
前言 对于HTML,css和JavaScript是如何变成页面的,这个问题你了解过吗?浏览器究竟在背后都做了些什么事情呢?让我们去了解浏览器的渲染原理,是通往更深层次的开发必不可少的事情,能让我们更深 ...
- 浏览器渲染机制面试_【前端面试必考题】页面渲染机制（一）
页面渲染机制这部分内容会分成两篇来进行讲解,这两篇里我们准备聊一下页面的渲染的过程,包括页面的加载.DOM 树的构建.CSSOM 树的构建.渲染树的构建和最后的渲染过程等.浏览器的渲染机制和网页的优化 ...
- 浏览器渲染机制面试_浏览器渲染原理
本文目录结构 问题 浏览器渲染原理 渲染过程 1. 浏览器接收到 HTML ⽂件并转换为 DOM 树 当我们打开⼀个⽹⻚时,浏览器都会去请求对应的 HTML ⽂件.虽然平时我 们写代码时都会分为 JS ...
- 浏览器渲染机制面试_前端面试大全：浏览器渲染原理-文件无法渲染
在这一篇文章中,我们将一起学习浏览器渲染原理这部分的知识.你可能会有疑问,我又不是做浏览器研发的,为什么要来学习这个?其实我们学习浏览器渲染原理更多的是为了解决性能的问题,如果你不了解这部分的知识,你 ...
- android 重绘如何能不闪一下屏幕_浏览器渲染机制——重绘重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程 我们先看看当浏览器拿到服务端返回的资源时 ...
- 浏览器渲染机制、重排、重绘
前言 浏览器的渲染机制.重排.重绘 一.页面生成 1. HTML会被HTMl解析器解析成DOM树 2. CSS会被CSS解析器解析成CSSOM树 3. 结合DOM树和CSSOM树生成一颗渲染树 4.将 ...
最新文章
- 循环冗余校验码CRC，求解步骤
- Go 1.4 正式版发布，官方正式支持 Android
- 都是月饼惹的祸 124盒月饼太甜太温柔（结尾有彩蛋）
- php监控系统,php 系统监控 | 学步园
- Xtract 实现 VMware Vsphere 迁主机到 Nutanix cluster
- mysql绕过防火墙_[转载]使用sqlmap 绕过防火墙进行注入测试
- JavascriptHelp
- Python类属性、类方法和静态方法
- Chrome , Firfox 对应IE fireEvent 的方法
- Boosting原理学习
- 【哼歌检索】十大语音搜索应用服务
- 用html给图片加像素,更改照片像素和大小
- 硕士毕业论文页眉页脚页码设置
- c语言打印七芒星图形代码,强强纯爱文，看过《C语言修仙》《七芒星》也别错过《狼行成双》...
- 【数说】人气网文修炼手册之最深的网文套路知多少
- Numpy中reshape函数、reshape(1,-1)的含义(浅显易懂，源码实例)
- springboot添加切面
- css渐变写法 从左到右颜色渐变
- UE5神通--POI解决方案
- ping添加时间输出