浏览器加载页面和渲染过程

参考:Web 前端面试指南与高频考题解析 浏览器相关
加载过程:

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

返回内容其实就是一堆HTML格式的字符串。

渲染过程:

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

为何要把CSS放在HTML头部?可以让浏览器尽早拿到CSS尽早生成CSSOM,然后在解析HTML之后可一次性生成最终的RenderTree,渲染一次即可。如果CSS放在HTML底部,会出现渲染卡顿的情况,影响性能和体验。

渲染过程中,如果遇到script就停止渲染,执行JS代码。因为浏览器渲染和JS执行共用一个线程,而且这里必须是单线程操作,多线程会产生渲染DOM冲突。

为何要把script放在HTML底部?JS放在底部可以保证让浏览器优先渲染完现有的HTML内容,让用户先看到内容,体验好。另外,JS执行如果涉及DOM操作,得等待DOM解析完成才行,JS放在底部执行时,才不会因为操作DOM而报错。

关于浏览器的整个流程,可以参考百度的多益大神的从输入 URL 到页面加载完成的过程中都发生了什么事情?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。