网上看了一些文章，很多时候也是记不住，于是特地写下这篇文章摘取一些重要的部分记录(简略版)，方便自己更加容易理解。
我的思考是输入url后，这个过程中间涉及到的一些知识点，然后通过这个过程对前端的一些问题对应的解决方案(能解决什么问题)，把知识点和对应的问题的解决方案串联起来，会更加便于自己理解。
1. URL的解析
我们在输入URL回车后，首先我们要了解URL的构成，进行一个解析
一个完整的URL主要包含的部分 (例如 https://www.xxxx.com/list/detail.html?id=12#news)
- 协议 (https或者http协议)
- 域名 (www.xxxx.com)
- 目录名(list)
4 文件名（detail.html） - 参数 （id）
- 锚(news)
2. DNS解析
DNS解析又称为域名解析，每一个域名对应了一个IP地址，使用专用的域名解析服务器来完成解析(这个过程是域名解析服务器自动完成解析)。
(浏览器中可以输入域名也可以输入IP地址，但IP一般难记，所以更多的使用域名)
- 直接输入IP地址，则是直接调用主机上的内容
- 域名解析一般都会有一些过程，域名解析成IP地址，即域名解析服务器指向对应的主机IP地址，然后再调用内容。(域名解析过程暂不做说明，后面单独补充文章记录说明)
3. TCP链接(三次握手)
通过三次握手，建立起客户端与服务端的链接，然后接着会进行数据传输。
4. HTTP Request请求
- 请求方式
- Header
5. 服务端返回HTTP响应
- 状态码
- 响应头
- 响应正文
6. 浏览器中HTML的解析
-
浏览器自上而下解析html，会构建dom树，如果遇到css文件则向服务器发起请求下载css文件，同时也会解析html(不会造成阻塞)，如果遇到js文件则发起请求下载js文件(停止解析html，造成阻塞)。
-
浏览器解析css，构建cssom树，当dom树和cssom树构建完成后，JS引擎会通过dom树和cssom树构建出render树。然后渲染出可视化dom节点。
7. 布局和绘制
布局：得到每个渲染树的具体大小和位置。
绘制：将得到的像素点绘制在屏幕上
页面在渲染的过程中，可能会涉及到不断的重排和重绘(重排的性能消耗比重绘的性能消耗大的多)，一般不会轻易改变布局。(解决方案一般就是使用transform来实现动画，不会引起重绘。使用fixed或者absolute定位，因为跳出了文档流，不用重排)
网友评论