浏览器加载过程
前言：
浏览器从输入URL 到加载页面中间经历哪些过程是面试中经常提到的问题，现在总结内容如下
输入URl地址
输入URL地址，浏览器开启线程，对输入的地址进行解析
域名组成
protocol：协议头，比如http，https，ftp等；
host：主机域名或者IP地址；
port：端口号；
path：目录路径；
query：查询的参数；
hash：#后边的hash值，用来定位某一个位置。
DNS 解析
通常我们在浏览器中输入的都是地址，而浏览器只是别 IP 地址，所以要将域名解析成 IP 地址
DNS 解析过程
- 首先会查看浏览器DNS缓存，有的话直接使用浏览器缓存
- 没有的话就查询计算机本地DNS缓存（localhost）
- 还没有就询问递归式DNS服务器（就是网络提供商，一般这个服务器都会有自己的缓存）
- 如果依然没有缓存，那就需要通过 根域名服务器 和TLD域名服务器 再到对应的 权威DNS服务器 找记录，并缓存到 递归式服务器，然后 递归服务器 再将记录返回给本地
发送http 请求
三次握手建立连接，四次挥手断开数据传输。
五层网络协议
1、应用层（DNS，HTTP）：DNS解析成IP并发送http请求；
2、传输层（TCP，UDP）：建立TCP连接（3次握手）；
3、网络层（IP，ARP）：IP寻址；
4、数据链路层（PPP）：封装成帧；
5、物理层（利用物理介质传输比特流）：物理传输（通过双绞线，电磁波等各种介质）。
「OSI七层框架：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层」
请求结束
请求成功后，服务器会返回相应的网页，浏览器接收到响应成功的报文后便开始下载网页，至此，网络通信结束。
构建
浏览器接受下载对应文件
浏览器解析渲染页面
浏览器下载完成后，根据页面文件顶部定义的DTD类型进行对应的解析，开启 GUI渲染线程 开始解析。
- 解析构建 DOM Tree
- 解析构建 CSSOM Tree
构建Render Tree
等DOM Tree与CSSOM Tree都构建完毕后，接着将它们合并成渲染树
（Render Tree），渲染树 只包含渲染网页所需的节点，然后用于计算每
个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上
渲染
- 计算CSS样式;
- 构建渲染树;
- 布局：主要定位坐标和大小，是否换行，各种position overflow z-index属性 ；
- 绘制：将图像绘制出来。
- 这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。
普通图层和复合图层
普通图层以及复合图层
首先，普通文档流内可以理解为一个复合图层（这里称为默认复合层，里面不管添加多少元素，其实都是在同一个复合图层中）
其次，absolute布局（fixed也一样），虽然可以脱离普通文档流，但它仍然属于默认复合层。
然后，可以通过硬件加速的方式，声明一个新的复合图层，它会单独分配资源 （当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘）
可以简单理解下：「GPU中，各个复合图层是单独绘制的，所以互不影响」，这也是为什么某些场景硬件加速效果一级棒
可以Chrome源码调试 -> More Tools -> Rendering -> Layer borders中看到，黄色的就是复合图层信息。
另附证个加载过程流程图
标签：浏览器,前端,复合,DNS,服务器,图层,解析,加载 来源： https://www.cnblogs.com/yidejiyi/p/16192467.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。