Html渲染过程
原文（https://www.cnblogs.com/dojo-lzz/p/3983335.html）
一，用户输入了网址。
二，浏览器会解析这个网址。
（注：解析网址。当然要知道这个网址是什么。φ(*￣0￣)。）
2.1网址：学名统一资源定位符。具体使用主要体现在用户通过浏览器访问服务器（b/s模式）！
2.2它又是由什么东西组成的呢~的呢？(～￣▽￣)～
第一种网络风格：协议://服务 域名 (IP:端口号) / URI？key1=1&key2=2
第二种本地风格：协议://服务 域名（ IP:端口）/文件名or目录（restful风格）
2.3具体一点来讲呢~φ(゜▽゜*)?
http://www.baidu.com/s?key1=’ohh’&key2=’kekeke’#abc
协议：http、https、ftp…。
服务：万维网（World Wide Web ）。
域名 = 标识串（baidu 、google、sina…）+网站类型（com、gov、edu…）。
ip：(ping 某个网址可查)。
端口号：http默认为80端口，可以不用输入。https默认是443，也可以不用输入( ?? ω ?? )?。
URI请求路径：像百度一哈就有个/s的请求路径。通常调用后端接口的时候也会有各种千奇百怪的请求路径`(*>﹏<*)′。
携带参数：请求路径后加 ?key1 = 1 就是当前url携带的一个参数，可以在后面用&key2=2再多带几个参数。
片段: #。片段。#代表的呢，就是 网页中的位置。如vue的单页面多路由模式。其中一种切换页面的方式就是通过#标识符进行路由导航。 由于它只对浏览器起作用而对服务器没用~所以在Http中不包括它。ㄟ(≧◇≦)ㄏ
回到正题啦，浏览器是怎么解析这一个url的呢？
浏览器拿到了这个url后，会先从本地DNS缓存查找，如果本地的没，那就去DNS服务器查找，如果还没，那浏览器就会返回请求失败了。
当在DNS中找到了了，DNS就会解析出请求地址，浏览器就会通过这个地址，向服务器发送http请求，服务器处理请求并且会返回相应的资源。
正常情况下呢服务器接收请求后会对请求进行处理，然后生成html代码返回给浏览器。此html代码可能经过压缩。
浏览器接收了段代码，有压缩那就解压缩。
现在浏览器终于拿到了html代码，接下来就是页面的解析渲染了
(ノω<。)ノ))☆
（注：DNS即域名系统，是互联网的一项服务。身份：将域名和ip地址相互映射的一个分布式数据库，使用户更容易访问互联网。
其中记录有各种资源记录。常见类型有(o′┏▽┓｀o)
主机记录（A记录）：用于名称解析的重要记录，将特定主机名映射到对应的主机IP地址上。
别名记录（CNAME记录）: RFC 1035定义，CNAME记录用于将某个别名指向到某个A记录上，这样就不需要再为某个新名字另外创建一条新的A记录。
更多资料：https://zhidao.baidu.com/question/534088505.html
）
浏览器的代码解析，页面渲染过程 有以下几个步骤：
1.解析HTML, 2.构建DOM树， 3.DOM树与CSS样式进行附着构造呈现树， 4.布局
5.绘制
第一步：解析Html与构建DOM树
浏览器有专门的html解析器解析Html代码，还会在解析过程中构建DOM树。解析的过程中有二种类型DOM元素的解析会 阻塞浏览器的解析过程。是哪儿二个呢？
(～￣▽￣)～
就是样式<link>,<style>和脚本<script>。浏览器采用自上而下的解析方式，当有外部资源 加载并解析 或者 执行 完毕后才会继续向下解析html.对于样式与脚本的先后顺序同样影响浏览器解析过程。这是因为嘛(●’?’●)。脚本执行过程中可能会修改html界面，DOM节点的CSS样式会影响js的执行结果。其中得到以下四个结论：
1，外部样式会阻塞后续脚本执行。直到自己加载完毕
2，外部样式不足阻塞后续脚本加载，但会阻塞其执行。
3，如果后续外部脚本包含async属性，则外部样式不会阻塞该脚本的加载与执行。
4，对于动态创建的link标签，不会阻塞其后动态创建的script的创建与执行。
当html解析完毕，dom树即构建完成，此时DOMContentLoaded事件触发。可以用script操作DOM节点。
第二步：构造呈现树
Html解析完毕后，开始构建呈现树RenderTree,这一步主要工作呢就是将css样式，应用到DOM节点上。形象的来说呢，第一步是画画的时候先把人物用线条描绘出来，但是没有上色，这一步呢就是给人物上色了。WebKit内核称之为附着。
每个树节点都有与之相应的DOM节点，而每个DOM节点不一定有与之对应的树节点。当一个DOM节点的display值为none时，DOM节点就没有树节点啦?(^?^*)
第三步：布局
当呈现树构造完成了，浏览器会进行布局处理以及计算每个呈现树节点的大小和位置信息。 浏览器要根据窗口的实际大小来处理呈现树节点的实际显示大小和位置，如margin:auto;。
布局是一个递归的过程，从呈现节点开始，递归遍历子节点，计算几何信息。
第四步：绘制
当布局完成后，便可以将呈现树绘制出来，然后在屏幕上显示了哟? つ ?_? ?つ。对于每个呈现树节点，主要绘制顺序是：
背景色(bcgc) -> 背景图片(bcgImg) -> 边框(border) -> 子呈现树节点（sonNode）-> 轮廓((⊙﹏⊙))
目前就先写这些，之后会慢慢研究的。(?■_■)
原文：https://www.cnblogs.com/jgnba/p/15074956.html