搜狗百科是一个服务于互联网用户的高质量内容平台。文章主要介绍团队在梳理业务时发现百科无线前端项目在研发流程、架构设计、研发效率、页面性能等方面存在诸多问题和痛点。

高性能站点比低性能站点更能吸引和留住用户，而留住用户对于提高用户转化率至关重要。本文以此为背景，介绍字节内部是如何衡量站点性能的，如何依靠性能监控定位线上站点性能问题。

1. 适当大小的图像 提供适当大小的图像，以缩短加载时间。 2. 提供新一代格式的图像 提供JPEG 2000，JPEG XR和WebP这样的图像格式通常比PNG或JPEG更好的压缩率，意味着更快的下载速度和更少的数据消耗。 3. 视频格式替换动图(gif/apng) 大的GI…

前端优化，这是一个很大的范围。可能平时更多的文章是基于某一点去深入的讲解。所以趁机整理一套前端优化的基础大纲，一方面给让自己沉淀下这些知识，另一方面也方便后续优化时有个清单可以去对照着优化。

最近在学习前端性能优化方面的知识，看了很多大佬的文章，感觉文章多了比较零散，学习效率不高，所以就整合了一下大佬们写的性能优化的东西，从页面的渲染过程来建立自己的一个前端性能优化的体系。

在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内 在这里总结记录一下，基本上都是一些常规可复制的优化手段，希望能为同样想优化网页性能的你提供思路~

所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里，笔者通过本文整理出关于前端性能优化的九大策略和六大指标

前言 大家好 我是鲨鱼哥~ 这是鲨鱼哥 2022 年的第一篇文章 为啥第一篇文章就要写前端性能定位相关呢 其实老粉都知道 性能优化文章我早在去年六月就说要完成的 各种事情一耽误 就过了大半年了

从上图可以看到各种字段可以看到，我们网页从发起请求开始到整个网页资源加载完成的时间都有，下面我们再来看张图，就能清晰了解到这些字段属于网页资源加载的哪个阶段。 运行得到结果有一些值居然负数，出现这种情况主要是因为整个网页没有加载完成的情况下就调用了这方法，所以下面我们进行改进，…