最近项目上线，用户一多，页面就卡得不行。首屏加载 3 秒起，滚动掉帧，手机发烫……被 QA 喊去聊了好几次。 没办法，只能低头研究性能优化。翻了一圈文档和实战案例，发现现代浏览器其实给了我们很多“外挂

canvas 优化细节 白板方案，大部分同学第一反应，那肯定是 canvas 啊，没错，但是，可以很直接地告诉大家，canvas 方案在大 家平常小数据量的可视化场景，没太

大家好，我是双越老师。从全栈角度看，前端能做的性能优化不多，就拆分资源和异步加载，这些都会在网络层面很好的解决。一个 web 系统的性能瓶颈主要在于网络和服务端，前端主要做体验优化，而非性能优化。

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

> 于水增 ## 故事背景 事情起源于之前做的海报编辑器，自己调试时无意中发现字体渲染好慢，第一反应就是网怎么变慢了，断网了？仔细一看才发现，淦！这几个字体资源咋这么大，难怪网速变慢了呢😁😁。

前言 性能优化，一个掣肘用户体验的关键模块。它没有固定的标准定义或唯一的解决方案。但是我们从整个项目的开发-部署-用户体验的整个过程中，总能摸到很多有普适性的规范或者优化理念。 我们的目的是什么？优化

前言 性能优化，一个掣肘用户体验的关键模块。它没有固定的标准定义或唯一的解决方案。但是我们从整个项目的开发-部署-用户体验的整个过程中，总能摸到很多有普适性的规范或者优化理念。 我们的目的是什么？优化

new Image() 预加载 为什么比 <img>直接加载要好？<img> 直接加载对比 new Image() 预加载 1. 加载时机和页面渲染的差异 直接渲染到 <img> 标签

B站的离线包技术方案与大部分互联网公司实现的方案在底层逻辑上是一致的，都实现了基础的资源下发和拦截匹配机制。但在此基础上我们也有一些创新。