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

最新推荐文章于 2024-07-17 10:11:41 发布

校园苦行生

最新推荐文章于 2024-07-17 10:11:41 发布

阅读量941

点赞数 1

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

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

版权

文章目录关键路径渲染优化什么是优化关键路径关键指标构建对象简单流程图代码准备不设置明确禁止缓存private与public缓存过期策略1、三种方式设置服务器告知浏览器缓存过期时间2、两种方式校验资源过期强制校验缓存性能优化期中总结：HTTP 缓存性能检查清单前端工程化参考附代码关键路径渲染优化什么是优化关键路径优化关键路径的就是优先显示与用户操作相关的内容，也就是常说的尽量减少白屏时间或...

摘要由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

最低0.47元/天解锁文章

校园苦行生

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
性能优化——关键路径渲染优化

文章目录关键路径渲染优化什么是优化关键路径关键指标构建对象简单流程图代码准备不设置明确禁止缓存private与public缓存过期策略1、三种方式设置服务器告知浏览器缓存过期时间2、两种方式校验资源过期强制校验缓存性能优化期中总结：HTTP 缓存性能检查清单前端工程化参考附代码关键路径渲染优化什么是优化关键路径优化关键路径的就是优先显示与用户操作相关的内容，也就是常说的尽量减少白屏时间或...
复制链接

扫一扫