性能优化——关键路径渲染优化

最新推荐文章于 2024-08-13 11:18:41 发布

校园苦行生

最新推荐文章于 2024-08-13 11:18:41 发布

阅读量965

点赞数 1

分类专栏：性能优化文章标签：性能优化关键渲染路径浏览器渲染原理 DOM CSSOM

本文链接：https://blog.csdn.net/guduyibeizi/article/details/98731221

版权

本文探讨了关键渲染路径的优化，旨在减少白屏时间和首屏渲染时间，提高用户体验。文章阐述了浏览器渲染过程，包括DOM和CSSOM的构建，强调了CSS对渲染的阻塞作用。同时，讨论了defer、async属性以及预加载和预获取的区别，并提供了不同场景下的性能分析案例，以指导优化策略。

摘要由CSDN通过智能技术生成

文章目录

关键路径渲染优化

关键路径渲染优化

什么是优化关键路径

优化关键路径的就是优先显示与用户操作相关的内容，也就是常说的尽量减少白屏时间或是减少首屏渲染时间。
好的页面交互，即使是在服务器处理或是资源还未完全返回期间，也应该尽量渲染部分信息给用户，而不是让用户明显感知过长白屏时间，以为页面卡死。例如Google时，在服务器处理搜索时及时渲染局部信息，而后逐步显示完整信息。
接下来，主要研究下从获取页面到渲染浏览器私底下都做了哪些东西。如下图，HTML解析成DOM树，JS可能生成或编辑DOM和编辑CSSOM，然后组成渲染树渲染在屏幕上。
浏览器渲染解析主要操作，解析HTML生成DOM，解析CSS生成CSSOM，有JS可能改变DOM、CSSOM，两种结合成渲染树layout，知道了元素的大小、位置、颜色、层次等信息浏览器就可以绘制图层组合图层渲染页面啦。
卡通图片更加直观。

关键指标

宗旨：你不需要去优化你无法测量的东西。

关键资源数量
关键资源字节大小
关键路径长度（RTT：网络往返次数）

关键渲染路径考虑的时间维度一般是指发起请求到 DOMContentLoaded 这段时间。
性能监控首屏渲染信息获取上报通常使用 performance.getEntriesByType('navigation')[0] 获得。

{
   
    "name": "https://mp.csdn.net/mdeditor",
    "entryType": "navigation",
    "startTime": 0,
    "duration": 1929.0599999949336,
    "initiatorType": "navigation",
    "nextHopProtocol": "h2",
    "workerStart": 0,
    "redirectStart": 30.985000004875474,
    "redirectEnd": 258.7400000047637,
    "fetchStart": 258.7400000047637,
    "domainLookupStart": 258.7400000047637,
    "domainLookupEnd": 258.7400000047637,
    "connectStart": 258.7400000047637,
    "connectEnd": 258.7400000047637,
    "secureConnectionStart": 0,
    "requestStart": 262.220000004163,
    "responseStart": 316.87500000407454,
    "responseEnd": 319.18999999470543,
    "transferSize": 2113,
    "encodedBodySize": 1834,
    "decodedBodySize": 4430,
    "serverTiming": [],
    "unloadEventStart": 0,
    "unloadEventEnd": 0,
    "domInteractive": 1289.1050000034738,
    "domContentLoadedEventStart": 1289.9250000045868,
    "domContentLoadedEventEnd": 1296.4300000021467,
    "domComplete": 1928.7900000053924,
    "loadEventStart": 1928.859999999986,
    "loadEventEnd": 1929.0599999949336,
    "type": "navigate",
    "redirectCount": 1
}

一般以 domComplete 完成时间为止，也就说这段时间影响渲染主要的资源和操作才是重点需要关注的。
好了有了大致的时间维度的观念后，然后接着分析浏览器做了什么。

构建对象

浏览器渲染页面需要DOM、CSSOM，所有应该尽快把HTML、CSS给到浏览器。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance