Skip to main content

从输入 URL 到页面加载全过程

重点#

回答问题的时候，关键要抓住核心的要点，把要点说全面，然后再稍微加一些解析，要简明扼要，思路清晰，不能拖沓。

1.首先回答加载的流程，回答要点#

  • 浏览器根据DNS服务器得到域名的IP地址
  • 向这个IP 的机器发送HTTP请求
  • 服务器收到、处理并返回HTTP请求
  • 浏览器得到返回内容

2.稍加分析#

  • 例如在浏览器输入https//xxx.com的时候，首先经过DNS解析，xxx . com对应的IP 是101. 200.185.250 ,然后浏览器向该IP发送HTTP请求。
  • server端接收到HTTP请求，然后经过计算(向不同的用户推送不同的内容)返回HTTP请求，返回的内容其实就是一堆HMTL格式
  • 的字符串，因为只有HTML格式浏览器才能正确解析，这是W3C标准的要求。

3.接下来就是渲染过程了，回答要点#

  • 根据HTML结构生成DOM树
  • 根据CSS生成CSSOM
  • 将DOM和CSSOM整合形成RenderTree
  • 根据RenderTree 开始渲染和展示
  • 遇到<script>时，会执行并阻塞渲染

4.加以分析#

  • 浏览器已经拿到了server 端返回的HTML内容，开始解析并渲染。最初拿到的内容就是一堆字符串，必须先结构化成计算机擅长处理的基本数据结构，因此要把HTML字符串转化成DOM树一树是最基本的数据结构之一。
  • 解析过程中，如果遇到<link href="..."> 和<script src="...">这种外链加载CSS和JS的标签，浏览器会异步下载，下载过程和上文中下载HTML的流程-样。只不过，这里下载下来的字符串是CSS或者JS格式的。
  • 浏览器将CSS生成CSSOM,再将DOM和CSSOM整合成RenderTree ，然后针对RenderTree 即可进行渲染了。大家可以想一下，有DOM结构、有样式，此时就能满足渲染的条件了。另外，这里也可以解释-一个问题一为何要将CSS放在HTML头部?一这样会让浏览器尽早拿到CSS尽早生成CSSOM,然后在解析HTML之后可一次性生成最终的RenderTree,渲染一次即可。 如果CSS放在HTML底部，会出现渲染卡顿的情况，影响性能和体验。
  • 最后，渲染过程中，如果遇到<script>就停止渲染，执行JS代码。因为浏览器渲染和JS执行共用一个线程，而且这里必须是单线程操作，多线程会产生渲染DOM冲突。待<script> 内容执行完之后，浏览器继续渲染。最后再思考一个问题一为何要将JS放在HTML底部?一JS放在底部可以保证让浏览器优先渲染完现有的HTML内容，让用户先看到内容，体验好。另外，JS执行如果涉及DOM操作，得等待DOM解析完成才行，JS放在底部执行时，HTML肯定都解析成了DOM结构。JS如果放在HTML顶部，JS执行的时候HTML还没来得及转换为DOM结构，可能会报错。