1.用户角度
- 用户在浏览器输入一个网站（URL）；
- 浏览器会找到对应的服务器地址，请求静态资源（可以存放在世界上任何一个地方）；
- 服务器返回静态资源给浏览器；
- 浏览器（浏览器渲染引擎）对静态资源进行解析和展示；
2.前端开发工程师
- 开发项目（HTML/CSS/JavaScript/Vue/React）
- 打包（生成静态资源）、部署项目到服务器里面
3.浏览器渲染引擎
浏览器最核心的部分是渲染引擎（Rendering Engine），一般也称为“浏览器内核”，负责解析网页语法，并渲染（显示）网页，不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同。
- Trident（三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
- Gecko（壁虎）：Mozilla Firefox；
- Presto（急板乐曲）->Blink（眨眼）：Operap
- Webkit：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
- Webkit->Blink：Google Chrome
4.URL
组成部分：[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]
URL 代表着是统一资源定位符 通俗点说：URL 无非就是一个给定的独特资源在Web 上的地址。理论上说，每个有效的URL 都指向一个唯一的资源；这个资源可以是一个HTML 页面，一个CSS 文档，一幅图像，等等；
5.地址栏输入 URL 敲下回车后发生了什么?
-
URL解析
-
DNS 查询（获取域名对应的目标服务器
IP地址） -
TCP 连接
三次握手和四次挥手：三次握手是为了准确的将数据送达目标处，TCP协议采用了三次握手策略；四次挥手是TCP终止一个连接，需要经过四次挥手 vue3js.cn/interview/h…
-
HTTP 请求静态资源
-
响应请求，返回静态资源
-
页面渲染（浏览器内核）
6.TCP/IP通信传输流分层管理
- 应用层
- 传输层（TCP）
- 网络层
- 链路层
7.浏览器渲染流程
-
解析HTML，生成DOM树，解析CSS，生成CSSOM树
-
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
-
Layout(回流) :根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
-
Painting(重绘) :根据渲染树以及回流得到的几何信息，得到节点的绝对像素
-
Display: 将像素发送给GPU，最后通过调用操作系统Native GUI的API绘制，展示在页面上。
-
回流一定会触发重绘，而重绘不一定会回流
比如以下情况发生回流：
根据改变的范围和程度，渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点。
- 页面一开始渲染的时候（这肯定避免不了）
- 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
- 元素字体大小变化
- 激活CSS伪类（例如：:hover）
以下情况发生重绘而不回流
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程重绘而不回流。
侵权删除
