JS高级 之 深入浏览器的渲染原理
在浏览器中输入网址按回车后发生了什么, 其实，发生的事情很简单，主要有三大步
- 找到资源
- 下载资源
- 解析资源渲染到页面
目录
一、DNS解析，找到资源
1. 查询浏览器缓存
2. 查询操作系统缓存
4. 路由器缓存
5. 本地DNS服务器缓存
6. 请求互联网上的服务器
二、浏览器与服务器建立TCP连接
1. 第一次握手
2. 第二次握手
3. 第三次握手
三、浏览器发送HTTP请求
1. 请求行
01 - 请求方法
02 - URL
03 - 协议版本
2. 请求头
编辑
3. 请求体
四、服务器端响应http请求
1. 响应行
01 - 协议版本
02 - 状态码
2. 响应头
编辑
3. 响应体
五、浏览器解析渲染页面
1. 浏览器内核
2. 渲染页面的详细流程 How browsers work
01 - HTML解析过程
02 - 生成CSS规则
03 - 构建Render Tree
04 - 布局 ( Layout ) 和 绘制 ( Paint )
3. 回流和重绘
1. 回流的概念
2. 怎么引起回流
3. 重绘
4. 怎么引起重绘
5. 尽量避免发生回流
4. script元素和页面解 析的关系
1. defer
2. async
一、DNS解析，找到资源
DNS：Domain Name System域名系统，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP地址
所以我们输入的大部分都是域名，但域名没有办法被服务器识别，所以得通过DNS进行域名解析，转换成对应的ip地址
1. 查询浏览器缓存
浏览器会保存一段时间内访问过的一些网址的DNS信息，不同浏览器保存的时常不等
2. 查询操作系统缓存
操作系统也有自己的 DNS 缓存，但在这之前，会向检查域名是否存在本地的 Hosts 文件里
4. 路由器缓存
路由器缓存上一般也存有DNS信息
5. 本地DNS服务器缓存
请求的域名基本上都能在这里找得到
以上是递归查询 : 一路查下去中间不返回，得到最终结果才返回信息 ( 浏览器到本地 DNS 服务器的过程 )
以下是递归查询 : 一路查下去中间不返回，得到最终结果才返回信息 ( 本地 DNS 服务器到根域名服务器查询的方式 )
6. 请求互联网上的服务器
如果这一步还没有找到，说明网址写错了～～
二、浏览器与服务器建立TCP连接
浏览器得到了IP以后，向服务器发送TCP连接
1. 第一次握手
客户端给服务器发送一个SYN段，请求在它们之间建立连接
SYN => 包含客户端的初始序列号
2. 第二次握手
如果服务器收到请求并允许连接，就会返回给客户端 SYN +ACK 段，并让客户端发送一个确认数据包
此时TCP连接称为半连接状态，服务端等待客户端的回复确认包
SYN => 包含服务端的初始序列号
ACK => 表示确认已收到客户端的 SYN段
题外话 : 很多syn攻击就是在短时间内伪造大量不存在的IP地址不断向服务器发送syn包，服务器回复确认包，并等待客户的确认，由于源地址是不存在的，服务器需要不断的重发直 至超时，导致系统运行缓慢，严重者引起网络堵塞甚至系统瘫痪
检测SYN攻击非常的方便，当在服务器上看到大量的半连接状态时，特别是源IP地址是随机的，基本上可以断定这是一次SYN攻击
3. 第三次握手
客户端给服务器响应一个ACK段，表示连接已建立，初始序列号协商完成
ACK => 表示确认已收到服务器的 SYN段
三、浏览器发送HTTP请求
浏览器和服务器建立连接以后 ( TCP三次握手结束后 )，浏览器接着给这个IP地址给服务器发送一个http请求，方式为get，例如访问www.baidu.com。
其本质是在建立起的TCP连接中，按照HTTP协议标准发送一个索要网页的请求
1. 请求行
请求行 : 包含请求方法、URL、协议版本
01 - 请求方法
- GET => 获取资源
- POST => 新增资源
- HEAD => 获取 HEAD 元数据
- PUT => 更新资源
- DELETE => 删除资源
- CONNECT => 建立 Tunnel 隧道
- OPTIONS => 获取服务器支持访问资源的方法
- TRACE => 回显服务器收到的请求，可以定位问题。(有安全风险)
02 - URL
URL : 即请求地址
03 - 协议版本
协议版本 : 代表协议和协议的版本, 例如 HTTP/1.1”
2. 请求头
是把浏览器的一些基础信息告诉服务器。比如包含了浏览器所使用的操作系统、浏览器内核等信息，以及当前请求的域名信息、浏览器端的 Cookie 信息等
3. 请求体
如果是发送POST请求 : 还需要通过请求体告诉服务器传输的具体内容
如果是发送GET请求 : 基本没有请求体
四、服务器端响应http请求
服务器收到浏览器的请求以后，会解析这个请求，然后生成一个响应头和具体响应内容
1. 响应行
响应行告诉了浏览器一些必要的信息，协议版本和状态码 ( Status Code )
01 - 协议版本
例如 HTTP/1.1
02 - 状态码
- 100-199 用于指定客户端应相应的某些动作。
- 200-299 用于表示请求成功。
- 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
- 400-499 用于指出客户端的错误。
- 500-599 用于支持服务器错误。
2. 响应头
响应头包含了服务器自身的一些信息，比如服务器生成返回数据的时间、返回的数据类型（ JSON、HTML、流媒体等类型 ），以及服务器要在客户端保存的 Cookie 等信息
3. 响应体
响应体 : 就是具体的要请求的页面内容, 通常，响应体就包含了 HTML 的实际内容
五、浏览器解析渲染页面
当拿到index.html ( 一般都是这个 )文件后，开始解析
1. 浏览器内核
常见的浏览器内核有
- Trident （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
- Gecko（ 壁虎） ：Mozilla Firefox；
- Presto（急板乐曲）-> Blink （眨眼）：Opera
- Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
- Webkit -> Blink ：Google Chrome，Edge
浏览器内核包括排版渲染引擎、 JavaScript引擎 ( 执行js代码 )，以及其他
网页下载下来后，就是由排版渲染引擎 来帮助我们解析的。
2. 渲染页面的详细流程 How browsers work
01 - HTML解析过程
解析HTML是所有步骤的开始
02 - 生成CSS规则
在解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件
- 下载CSS文件是不会影响DOM的解析的，浏览器会开一个线程来下载
浏览器下载完CSS文件后，就会对CSS文件进行解析，解析出对应的规则树
- 可以称之为 CSSOM（CSS Object Model，CSS对象模型）
03 - 构建Render Tree
当有了DOM Tree和 CSSOM Tree后，就可以两个结合来构建Render Tree了
注意一 : link元素不会阻塞DOM Tree的构建过程，但是会阻塞Render Tree的构建过程
- 这是因为Render Tree在构建时，需要对应的CSSOM Tree
注意二：Render Tree和DOM Tree并不是一一对应的关系，比如对于display为none的元素，压根不会出现在render tree中
04 - 布局 ( Layout ) 和 绘制 ( Paint )
在渲染树（Render Tree）上运行布局（Layout）以计算每个节点的几何体
- 渲染树会表示显示哪些节点以及其他样式，但是不表示每个节点的尺寸、位置等信息
- 布局是确定呈现树中所有节点的宽度、高度和位置信息
将每个节点绘制（Paint）到屏幕上
- 在绘制阶段，浏览器将布局阶段计算的每个frame转为屏幕上实际的像素点
- 包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）
3. 回流和重绘
1. 回流的概念
回流 : 也可以称之为重排
- 第一次确定节点的大小和位置，称之为布局（layout）
- 之后对节点的大小、位置修改重新计算称之为回流
2. 怎么引起回流
- 比如 : DOM结构发生改变（添加新的节点或者移除节点）
- 比如 : 改变了布局（修改了width、height、padding、font-size等值）
- 比如 : 窗口resize（修改了窗口的尺寸等）
- 比如 : 调用getComputedStyle方法获取尺寸、位置信息
3. 重绘
- 第一次渲染内容称之为绘制（paint）
- 之后重新渲染称之为重绘
4. 怎么引起重绘
比如 : 修改背景色、文字颜色、边框颜色、边框样式等
回流一定会引起重绘，所以回流是一件很消耗性能的事情
5. 尽量避免发生回流
- 修改样式时尽量一次性修改
- 比如通过cssText修改，比如通过添加class修改
- 尽量避免频繁的操作DOM
- 可以在一个DocumentFragment或者父元素中, 将要操作的DOM操作完成，再一次性的操作
- 尽量避免通过getComputedStyle获取尺寸、位置等信息
- 对某些元素使用position的absolute或者fixed
- 并不是不会引起回流，而是开销相对较小, 因为不会对其他元素造成影响
4. script元素和页面解 析的关系
- 浏览器在解析HTML的过程中，遇到了script元素是不能继续构建DOM树的
- 它会停止继续构建，首先下载JavaScript代码，并且执行JavaScript的脚本
- 只有等到JavaScript脚本执行结束后，才会继续解析HTML，构建DOM树
为什么需要这样设计呢
- 这是因为JavaScript的作用之一就是操作DOM，并且可以修改DOM
- 如果我们等到DOM树构建完成并且渲染再执行JavaScript，会造成严重的回流和重绘，影响页面的性能
- 所以会在遇到script元素时，优先下载和执行JavaScript代码，再继续构建DOM树
但是这个也往往会带来新的问题，会造成页面的解析阻塞，在脚本下载、执行完成之前，用户在界面上什么都看不到
为了解决这个问题，script元素给我们提供了两个属性（attribute）：defer 和 async
注意 : 这个位置在合成渲染树之前，执行完这些代码后，才会和css规则生成渲染树
1. defer
defer 属性告诉浏览器不要等待脚本下载，而继续解析HTML，构建DOM Tree。
- 脚本会由浏览器来进行下载，但是不会阻塞DOM Tree的构建过程；
- 如果脚本提前下载好了，它会等待DOM Tree构建完成，在DOMContentLoaded事件之前先执行defer中的代码；
- 在defer代码中DOM Tree已经构建完成，可以操作DOM元素了
DOMContentLoaded总是会等待defer中的代码先执行完成
- 多个带defer的脚本是可以保持正确的顺序执行的。
- 从某种角度来说，defer可以提高页面的性能，并且推荐放到head元素中；
- 注意：defer仅适用于外部脚本，对于script默认内容会被忽略
2. async
async 特性与 defer 有些类似，它也能够让脚本不阻塞页面
async是让一个脚本完全独立的：
- 浏览器不会因 async 脚本而阻塞（与 defer 类似）
- async脚本不能保证顺序，它是独立下载、独立运行，不会等待其他脚本
- async脚本一旦下载完成后立马执行
- async不会能保证在DOMContentLoaded之前或者之后执行
defer : 通常用于需要在文档解析后操作DOM的JavaScript代码，并且对多个script文件有顺序要求的
async : 通常用于独立的脚本，对其他脚本，甚至DOM没有依赖的；
JS高级 之 深入浏览器的渲染原理相关推荐
- JavaScript高级 浏览器的渲染原理与JavaScript代码执行原理
浏览器的渲染原理 1. 网页的解析过程 2. 浏览器内核 1. V8引擎 3. 浏览器渲染过程 1. HTML解析 2. 生成CSS规则 3. 构建Render Tree 4. 布局(layout) ...
- 浏览器渲染机制面试_面试官不讲码德，问我Chrome浏览器的渲染原理（6000字长文）...
前言 对于HTML,css和JavaScript是如何变成页面的,这个问题你了解过吗?浏览器究竟在背后都做了些什么事情呢?让我们去了解浏览器的渲染原理,是通往更深层次的开发必不可少的事情,能让我们更深 ...
- 浏览器的渲染原理你了解吗？
从整体上看浏览器的渲染流程 浏览器的渲染流程主要包括以下几个流程: 解析HTML,生成DOM树,解析CSS,生成CSSOM树. 将DOM树和CSSOM树进行结合,生成渲染树(Render Tree). ...
- Chrome浏览器的渲染原理
正文 Vue Vue2.0:Vue2.0 文档 Vue3.0:Vue3.0 文档 Vue-Router:Vue.js 官方的路由管理器. Vuex:Vue.js 应用程序开发的状态管理模式. Elem ...
- 浏览器的渲染原理简介
原文转自:http://kb.cnblogs.com/page/178445/ 看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细 ...
- 深入浅出浏览器渲染原理
前言 浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.比如在 Firefox 中叫做 Gecko,在 Chrome ...
- js重新渲染div_前端工程师必备：从浏览器的渲染到性能优化
文章来自:华为云开发者社区 摘要:本文主要讲谈及浏览器的渲染原理.流程以及相关的性能问题. 问题前瞻 1. 为什么css需要放在头部? 2. js为什么要放在body后面? 3. 图片的加载和渲染会阻 ...
- 详解浏览器渲染原理及流程
今天来分享一下浏览器的渲染原理及流程. 前言 先来看看 Chrome 浏览器的多进程架构: 通常,我们打包出来的 HTML.CSS.JavaScript 等文件,经过浏览器运行之后就会显示出页 ...
- 图解浏览器渲染原理及流程
本文约 8500 字,预计阅读需要 30 分钟. 今天来分享一下浏览器的渲染原理及流程. 前言 先来看看 Chrome 浏览器的多进程架构: 通常,我们打包出来的 HTML.CSS.JavaScrip ...
最新文章
- github javaguide_GitHub上收获Star数排名前10的Java项目
- 处理json中影响解析的多余引号
- matlab与python交互_Python和MATLAB交互的基本操作
- ping不通win7、8解决方法以及nc后门的制作
- 错误信息Make an entry in Field Text Area
- 为什么要使用PreparedStatement
- .NET 5.0 RC 2 发布，正式版将在 11 月 .NET Conf 大会上发布
- 升级计算机方案,关于计算机升级方案
- css①字体颜色正常显示，背景透明②字体颜色与背景均为透明的设置方法
- 技巧：你未必知道的IE8九大功能
- 查找业务对应的IDOC类型（HELP）
- linux系统开机grub命令修复方法,linux系统ＧＲＵＢ修复
- Python函数中定义函数
- java excel 水印_Java下载文件加文字水印（Excel、PDF、图片）
- SpringCLoud+redis+es高并发项目《九》（Spring Security Oauth2 JWT）
- 7. gdal进行遥感影像的16位转8位和百分比截断增强（看这篇就够了）
- 计算机硬盘内存显示是红色,解决 win10 磁盘容量条显示红色问题
- hexo+yilia修改代码块等样式
- 企业OA管理系统需具备哪些功能？
- python安装0x80072ee7_错误代码为 0x80072EE7 - 卡饭网