Web性能优化一直是前端开发的重要议题,优化好的网站可以提升用户体验,减少加载时间,提高转化率。Web性能优化包含性能分析、网络优化、浏览器渲染优化、打包优化、场景优化等多方面,在进行性能优化前,首先要分析用户的访问链路,即用户在浏览器输入URL后,到页面加载完成的整个过程,这个过程大致包含以下阶段:

• 网络处理流程:
  • DNS解析:浏览器需要将域名解析为IP地址,这个过程需要向DNS服务器发送请求,如果DNS服务器缓存中没有对应的记录,则需要进行递归查询,这个过程可能会耗时较长。
  • 建立TCP连接:浏览器需要与服务器建立TCP连接,这个过程需要进行三次握手,如果网络环境较差,则可能会耗时较长。
  • 发送HTTP请求:浏览器需要向服务器发送HTTP请求,请求中包含了请求方法、URL、请求头、请求体等信息。
  • 服务器处理请求:服务器需要根据请求信息,进行业务逻辑处理,如果处理时间较长,则可能会导致请求超时。
  • 返回响应:服务器需要将处理结果返回给浏览器渲染。
• 浏览器渲染流程:
  • 浏览器需要解析HTML文档,将其转换为DOM树,这个过程可能会耗时较长,如果HTML文档较大,则可能会导致页面加载延迟。
  • 浏览器需要解析CSS文档,将其转换为CSSOM树,这个过程可能会耗时较长,如果CSS文档较大,则可能会导致页面渲染延迟。
  • 浏览器需要将DOM树和CSSOM树合并为渲染树,这个过程可能会耗时较长,如果渲染树较大,则可能会导致页面渲染延迟。
  • 浏览器需要根据渲染树,进行布局和绘制,这个过程可能会耗时较长,如果页面元素较多,则可能会导致页面渲染延迟。