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

本篇是基于浏览器渲染原理，对 CSS3 动画的一个很好结合实践。CodeReview 时，同事都直呼：细节！

作者：大漠用户在访问一个Web网站（页面）或应用时，总是希望它的加载速度快，功能流畅。如果过于慢，用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员，给自己应用提供更快的访问速度，提供很好

大家看到标题勇士二字不知是否有所疑惑。我这里不做太多解释，只说一句：因为这个是之前的老项目（大家懂吗old very old），那真的可以说是牵一发而动全身啊 但是呢，很快啊，我啪的一下就决定了，直接就选中一个文件CTRL+A，然后Delete了啊，这波操作可以说是意气风发，无…

今天我们将研究一下能显著提升页面性能的方法 —— 资源提示与指令。你也许听说过 preload，prefetch 和 preconnect，可是我们想研究的更深一点，搞清他们之间的区别并且充分的利用它们。它们带来的好处包括允许前端开发人员来优化资源的加载，减少往返路径并且在浏览…

## 关键路径 ### 浏览器加载流程 浏览器在渲染页面时需要将 HTML 标记转化成 DOM 对象 ![](https://developers.google.cn/web/fundamentals/performance/critical-rendering-path/

发现 很多人都知道现代浏览器都支持 DNS 的预解析，学名：DNS Prefetching。用法也很简单，就是在html代码里加入这样的 link 标签 <link rel="dns-prefetch" href="//delai.me">我们之前的用法是在 Head 为2个 静…

下面是前端性能问题的概述，您可能需要考虑以确保您的响应时间是快速和平滑的。 使用 资源提示 来节约时间，如 dns-prefetch （在后台执行 DNS 查询），preconnect （告诉浏览器在后台进行连接握手（DNS, TCP, TLS）），prefetch (告诉浏览…

性能优化相关的文章其实网上挺多，但是大部分都是在讲如何优化性能，也就是讲方法论。但是在实际工作中，如何量化性能优化也是相当重要的一环。今天本文会介绍谷歌提倡的七个用户体验指标（也可以认为是性能指标），每个指标分别根据以下几点讲解： 首次绘制，FP（First Paint），这个…