m0_38066007的博客

性能指标

需要1.53s 完成整个页面的显示从网络详情中可以看出，页面显示慢最大的问题在于图片的加载需要在接口请求后才能开始，而这两者都需要消耗较长的时间。在接口请求前对图片进行预加载，那么在接口返回后就能直接渲染图片。在 head 标签中加入以下代码。

从输入URL到页面显示发生了什么？宏观DNSTCPHTTP/SSL响应解析浏览器渲染 （how browser works）url => DNS解析获取ip=>建立TCP连接 =>解析响应 =>浏览器渲染DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。目前每次DNS解析...

从输入URL到页面加载显示完成都发生了什么？什么是首屏加载？怎么优化？

...

1

关键渲染路径

RAIL测量模型Response 响应Animation 动画Idle 浏览器空闲时间Load 网络资源加载RAIL评估标准响应：处理事件应在50ms以内完成动画：每10ms产生一帧空闲：尽可能增加空闲时间加载：在5s内完成内容加载并可以交互性能测量工具Chrome DevTools 开发调试、性能评测Lighthouse 网站整体质量评估WebPageTest 多测试地点、全面性能报告webpagetest.org解读W...

性能优化指标与测量工具行业标准优化模型测量工具性能相关APIs代码优化Javascript优化HTML优化CSS优化渲染优化现代浏览器渲染原理可优化的渲染环节和方法资源优化压缩&合并图片格式图片加载字体优化构建优化webpack的优化配置代码拆分代码压缩持久化缓存监测与分析按需加载传输加载优化GZipKeepAliveHTTP缓存Service Worker...