服务器端：
1.找到宝藏
2.通过DNS服务器将URL转换为IP地址
3.浏览器向服务器发送一个http请求
4.网站的永久重定向
5.服务器跟踪重定向地址
6.服务器处理响应。
7.服务器发回一个响应。
浏览器端：
1.下载html
2.将HTML解析成Dom树
3.将css文件解析为CSSOM
4.根据Dom树和CSSOM，形成渲染树
5.布局并计算renderTree每个节点的位置。
6.渲染渲染树
在浏览器呈现期间，会发生回流和重绘。
回流：浏览器返回到整个重新渲染。
重绘：当一个元素的某些属性发生变化时(布局不变，比如颜色变化)，会触发重绘。
对回流性能的影响大于比重拉伸。根据定义，回流必然导致重绘，但重绘不一定导致回流。
导致反流的原因：
1.dom树结构的改变，比如添加或删除节点。
2.更改边距、尺寸(几何属性)等。
3.获取一些属性(比如getComputedStyle)
window.resize()
但是，需要注意的是，浏览器不会对每个js操作进行回流和重绘。事实上，它会维护一个队列，将这些操作放在这个队列中，直到操作累积到一定数量，或者以一定的时间间隔，它才会执行。
最后举个栗子。
例如
！文档类型html
超文本标记语言
头
title演示/标题
link rel=' style sheet ' src=' style . CSS '
/头
身体
p id='noShow'/p
p id='测试'
p/p
img src='1.jpg'/
/p
/body
脚本src='app.js '
/html
渲染过程是什么样的？
浏览器发现了链接标签，所以它发送了一个css文件的请求。
继续浏览，找到img标记，然后请求img，同时继续浏览(浏览器本质上是异步的)
当浏览器渲染到某个块时，img请求它，然后发现布局已经改变，必须重新渲染。
浏览器请求js文件
如果js文件内容是
document . getelementbyid(\ ' no show \ ')，style.display=' none//回流重绘
do document . getelementtagname(\ ' p \ ')，style.color=' red//重绘
do document . getelementtagname(\ ' p \ ')。innerHTML=\ ' offer \
最后，渲染在到达/html时结束。
这也解释了为什么我们通常把css放在前面，js放在后面。
浏览器渲染原理及流程
前锋：https://mp.weixin.qq.com/s/1Ceu1XRvluGNVKM3IHwxUQ
网页浏览器无疑是用户上网最常见的入口。浏览器凭借其免安装、跨平台的优势，逐渐取代了许多传统的富客户端。
Web浏览器通过向URL发送网络请求来访问Web服务器资源，并交互地显示这些内容。操作基本上包括采集、处理、显示和存储。常见的浏览器包括Internet Explorer、Firefox、Google Chrome、Safari和Opera。
浏览器主要由以下几部分组成：
这是用户与浏览器交互的区域。浏览器的外观没有具体的标准。HTML5规范没有规定UI元素应该是什么样子，但是列出了一些常见的元素：地址栏、个人信息栏、滚动条、状态栏、工具栏等。
它提供UI与底层渲染引擎的接口，根据用户交互查询和控制渲染引擎，提供初始化URL的方法，负责重载、返回和前进。
渲染引擎负责在屏幕上显示web内容。渲染引擎的主要工作是解析HTML。渲染引擎默认可以显示HTML、XML和图片，也可以通过插件或扩展支持其他数据类型。
现代浏览器使用不同的渲染引擎：Gecko:Firefox WebKit:Safari Blink:Chrome，Opera(版本15或以上)。
可以参考这篇文章：各种浏览器引擎是不是很蠢，不清楚？终于有人解释了！
web渲染流程大致如下：
渲染引擎接收来自网络层的请求内容(通常是8 kb块)，然后将原始字节转换为HTML文件中的字符(基于字符编码)。然后词法分析器执行词法分析，并将输入分解成各种标记。在标记过程中，会记录文件中的每个开始和结束标记。它知道如何去掉不相关的字符，比如空格和换行符。
然后，解析器进行语法分析，通过分析文档结构，应用语言语法规则，构建解析树。分析过程是迭代的。它从词法分析器请求一个新的标记，如果它与语法规则匹配，这个标记就被添加到解析树中。然后再要一个代币。如果没有匹配的规则，解析器将在内部存储标记，并不断请求新的标记，直到找到匹配所有内部存储标记的规则。如果没有找到规则，解析器将抛出一个异常，表明文档无效并且包含语法错误。
这些节点在DOM(文档对象模型)树形数据结构中相互链接，建立父子关系和相邻兄弟关系。
CSS数据的原始字节被转换成字符、令牌、节点，最后成为CSSOM(CSS对象模型)。CSS的层次性质决定了什么样的样式将被应用于元素。元素的样式数据可以来自父元素(通过继承)，也可以直接在元素上设置。浏览器需要递归遍历CSS树结构来确定特定元素的样式。
DOM树包含HTML元素之间的关系信息，而CSSOM树包含这些元素的样式信息。从根节点开始，浏览器将遍历每个可见的节点。有些节点是隐藏的(由CSS控制)，不会出现在渲染结果中。对于每一个可见的节点，浏览器都会找到CSSOM中定义的相关规则进行匹配，最终这些节点会带着内容和样式出现在渲染树中。
渲染树
接下来，内容布局。需要计算内容的实际大小和位置，然后才能将其呈现在页面上(浏览器视窗)。这个过程也称为回流。HTML采用基于流程的布局模型，也就是说，大多数情况下，几何位置计算一次(内容大小或位置发生变化，需要重新计算)。这个过程是从文档的根元素开始递归完成的。
通过遍历每个渲染器并调用paint方法，内容显示在屏幕上。绘制过程可以是全局的(绘制整个树)或增量的(渲染树以验证屏幕上的矩形区域)。操作系统在这些特定的节点上生成绘制事件，整个树不受影响。画图是一个渐进的过程，其中一部分被解析和渲染，这个过程会继续处理剩下的部分。
JavaScript是一种脚本语言，可以动态更新网页内容，控制多媒体和动画等。这些都是通过浏览器的JS引擎来完成的。而且DOM和CSSOM都提供了JS接口，可以用JS修改。因为浏览器不确定有些JS会做什么，所以遇到script标签后会立即停止构建DOM树。
JS解析器将在从服务器收到代码后立即解析代码。代码被转换成机器能够理解的对象表示。保存所有解析信息的对象被称为抽象语法树(AST)，解析器将这些对象转换成字节码。这种编译方式称为即时编译(JITs)，即从服务器下载JavaScript，然后在客户端实时编译。解析器和编译器结合使用。解析器立即处理源代码，而编译器生成机器码。客户端操作系统可以直接运行。
Chrome: V8引擎(node js是在此基础上构建的)Mozilla:蜘蛛猴(以前叫‘松鼠鱼’)微软edge: chakra safari: nitro
用于绘制基本控件，如复选框和窗口。使用底层操作系统的用户界面方法来公开通用界面，而不考虑平台。
这是持久层，帮助浏览器保存一些数据(比如cookies、会话存储、索引DB、Web SQL、书签、用户偏好等。).HTML5规范提出了浏览器完整的数据库功能。
这一层处理浏览器的各种网络通信。浏览器使用各种通信协议获取网络资源，如HTTP、HTTPs、FTP等。
使用浏览器DNS解析URL。这些解析记录缓存在浏览器、操作系统、路由器或ISP中。如果请求的URL不在缓存中，ISP的DNS服务器首先发起DNS查询，以找到服务器的IP地址。找到正确的IP地址后，浏览器使用特定的协议与服务器建立连接。向浏览器服务器发送一个SYN数据包，询问服务器是否打开了TCP连接。服务器SYN/ACK包的响应作为前一个SYN的响应。
收到响应后，浏览器向服务器发送一个ACK包。TCP连接是通过这样的三次握手建立的。一旦建立了连接，就可以传输数据。数据传输必须遵守HTTP协议的相关要求，包括请求和响应规则等。
现在，市场上有各种各样的浏览器。虽然核心功能相同，但两者有很多不同之处。包括平台(Linux、Windows、Mac、BSD等Unix系统)、协议、用户界面、HTML5支持、开源、所有权等。详情请参考https://en.wikipedia.org/wiki/Comparison_of_web_browsers.维基百科。
以上是对浏览器工作原理的粗浅描述。当然，其实浏览器的底层还是比较复杂的，远不是几张图和一篇文章就能说清楚的。如果有兴趣，可以看看浏览器的源代码进行深入了解。
(1.6w字)浏览器灵魂的问题，你能连接几个？
暴露浏览器指纹：原来我们被互联网巨头监控了，隐私无处可藏。
前端程序员注意到浏览器即将完全禁用三方Cookie。
浏览器渲染过程综合分析及性能优化
10款值得收藏的Chrome浏览器插件
Chrome运行时性能瓶颈分析
30个快捷方式，16个扩展和11个前端调试来提高Chrome的效率。
Chrome开发者工具的11个风骚小技巧【练习】
Chrometools，你只知道console.log，你就出局了。
Chrome Devtools高级调试指南(新)
【新消息】Chrome 81正式发布！消除混合内容最后一步
前端性能优化使用Chrome Dev工具分析页面性能。
教你如何用7个隐藏的Chrome DevTools功能提高你的生产力
前锋：https://mp.weixin.qq.com/s/1Ceu1XRvluGNVKM3IHwxUQ