Tag: 浏览器内核

URL到页面加载发生了什么

1、用户输入网址，浏览器开发一个线程处理这个请求

2、DNS解析 - DNS解析该网站地址对应的IP

3、TCP连接 - 获取到IP后，浏览器向该IP所在的服务器建立TCP连接（三次握手）

4、发送HTTP请求 - 客户端向服务器发送报头和报文；

    后台服务如: Apache、Tomcat、Nginx、Node.js 等服务器

    常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等

    报文: Content-Type: application/json

5、服务端接收请求处理逻辑

6、服务端返回响应报文，浏览器接收到响应后，查看是否有缓存资源，status - 304、200

7、浏览器解析渲染页面 - 创建DOM树、渲染DOM树、JS引擎解析、重排重绘

8、连接结束

https://zhuanlan.zhihu.com/p/24913080
https://zhuanlan.zhihu.com/p/24944905

浏览器六个阶段

1、用户界面(User Interface): 用户所看到及与之交互的功能组件，如地址栏，返回，前进按钮等

2、浏览器引擎(Browser engine): 负责控制和管理下一级的渲染引擎

3、渲染引擎(Rendering engine): 负责解析用户请求的内容(如HTML或XML，渲染引擎会解析HTML或XML，以及相关CSS，然后返回解析后的内容)

4、网络(Networking): 负责处理网络相关的事务，如HTTP请求等

5、UI后端(UI backend): 负责绘制提示框等浏览器组件，其底层使用的是操作系统的用户接口

6、JavaScript解释器(JavaScript interpreter): 负责解析和执行JavaScript代码

7、数据存储(Data storage): 负责持久存储Stroage诸如cookie和缓存等应用数据

浏览器内核

1、Trident内核:  IE

2、Webkit内核: Chrome,Safari

3、Gecko内核: FireFox

DNS预解析

浏览器DNS解析大多时候较快，且会缓存常用域名的解析值，但是如果网站涉及多域名，在对每一个域名访问时都需要先解析出IP地址，

希望在跳转或者请求其他域名资源时尽量快，则可以开启域名预解析，浏览器会在空闲时提前解析声明需要预解析的域名，如: 

<link rel="dns-prefetch" href="http//t1.we.com">

多进程

浏览器加载资源一般会并行进程同时加载，限制一般在2-6个

渲染引擎

一、访问一个页面执行流程

    1、发起请求        2、解析HTML        3、解析样式        4、执行JavaScript        5、布局        6、绘制


二、通过网络模块加载到HTML文件后渲染引擎渲染流程如下，这也通常被称作关键渲染路径(Critical Rendering Path):

    1、构建DOM树(DOM tree): 从上到下解析HTML文档生成DOM节点树(DOM tree), 也叫内容树(content tree)

    2、构建CSSOM(CSS Object Model)树: 加载解析样式生成CSSOM树

    3、执行JavaScript: 加载并执行JavaScript代码(包括内联代码或外联JavaScript文件)

    4、构建渲染树(render tree): 根据DOM树和CSSOM树, 生成渲染树(render tree) 渲染树: 按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性

    5、布局(layout): 根据渲染树将节点树的每一个节点布局在屏幕上的正确位置

    6、绘制(painting): 遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成


三、解析样式和脚本

    1、脚本是可能存在改变DOM结构，于是浏览器以同步方式解析，加载和执行脚本，浏览器遇到script标签就选择js代码，现在HTML5提供defer和async两个属性支持延迟和异步加载JavaScript文件

        <script defer src="script.js">

    2、样式不同于脚本，浏览器对样式处理并不会阻塞文档解析，因为样式不会改变DOM结构


四、重绘、重排

    尽量减少reflow:

    重排: 当页面结构发生改变，渲染树重新组装，如块级元素的（margin、padding）当前元素位置发生改变会影响下面所有元素的位置需要重排，position: absolute不会引发重排

    重绘: 就是不改变页面的结构，只改变一些颜色，如(文字颜色、边框颜色)

收集

一、访问域名

    访问京东域名时，会发现有Remote Address，这里是在访问域名时并不会直接访问服务器而是在中间过了一层，目的是为当前用户找到离他最近的一台服务来进行跳转，可以让最快速度来访问

jd_ip

| http://blog.codingplayboy.com/2017/03/29/webpage_render/
| https://www.webpagetest.org/ // 网站的性能评估