作为一个前端，肯定知道我们写的页面是跑在浏览器里面的。
知识点梳理
- 浏览器加载页面和渲染过程（分两点说的）
加载页面和渲染过程
如下：
浏览器根据DNS服务器得到域名的IP地址
向这个IP的机器发送HTTP请求
服务器收到、处理后并返回HTTP请求
浏览器得到返回内容
例如在浏览器输入 https://www.iconfont.cn/，然后经过DNS解析。iconfont.cn对应的IP是xx.xxx.xxx.xxx(不同时间、地点对应的IP可能会不同)。然后浏览器向该IP发送发送HTTP请求。
sever端接收到HTTP请求，然后经过计算（向不同的用户推送不同的内容），返回HTTP请求。返回内容如下
其实呢，就是一堆的HTML格式的字符串，因为只有html格式浏览器才能正确的解析，这是W3C标准的要求。
接下来就是浏览器的渲染过程
渲染过程
- 根据HTML结构生成DOM树
- 根据CSS生成CSSOM
- 将DOM和CSSSOM整合成RenderTree
- 根据renderTree开始渲染和展示
- 遇到<script>时，会执行并阻塞渲染
上面说到，浏览器已经拿到了sever端返回的HTML内容开始解析并渲染，最初拿到的内容就是一堆字符串，必须先结构化成计算机擅长处理的基本数据结构，因此就把HTML字符串转化成DOM树————树是最基本的数据结构之一。
解析过程中如果遇到<link>和<script>这样的外链加载CSS和JS标签，浏览器会异步下载，下载过程和上下文下载HTML的流程一样。只不过，这里下载来的字符串是CSS或者JS格式的。
浏览器将CSS和CSSOM，再将DOM和CSSOM整合成RenderTree，然后针对RenderTree即可进行渲染了，可想而知，有DOM结构、有样式，此时就能满足渲染条件了。另外这里也可以解释一个问题（为什么将CSS放在HTML前面？），这样就是让浏览器早点拿到CSS生成CSSOM，然后在解析HTML之后克一次性生成最RenderTree，渲染一次就行了，如果放在HTML底部，会出现渲染卡顿的情况，影响性能和体验。
最后，在渲染过程中，如果遇到<script>就停止渲染，执行JS代码。因为浏览器渲染和JS执行公用一个线程，而且这里必须是单线程操作，多线程会产生渲染DOM冲突。待<script>内容执行完后，继续渲染，最后再思考一个问题（为什么要将JS放在HTML后面？）JS 放在底部可以保证让浏览器优先渲染完现有的 HTML 内容，让用户先看到内容，体验好。另外，JS 执行如果涉及 DOM 操作，得等待 DOM 解析完成才行，JS 放在底部执行时，HTML 肯定都解析成了 DOM 结构。JS 如果放在 HTML 顶部，JS 执行的时候 HTML 还没来得及转换为 DOM 结构，可能会报错。
感谢阅读，不对之处希望各位指出，一并探讨！