减少请求次数，合并资源更高效
打开一个页面，浏览器要发起十几个甚至几十个请求，等来等去页面就是不显示，这种情况你肯定遇到过。解决办法其实不难：把多个小文件合并成一个大文件。比如把几个小的 JavaScript 文件合并成一个，CSS 也一样处理。这样虽然单个文件变大了点，但省去了多次网络往返的时间，整体加载反而更快。
举个例子，你去便利店买早餐，如果一次拿齐面包、牛奶、纸巾，比跑三趟分别买快得多。资源合并就是这个道理。
<!-- 合并前 -->
<script src="util.js"></script>
<script src="helper.js"></script>
<script src="main.js"></script>
<!-- 合并后 -->
<script src="bundle.js"></script>压缩静态资源，减小体积是硬道理
JS、CSS、图片这些静态文件，原始大小往往偏大。上线前记得压缩。JavaScript 可以用工具去掉空格、注释，还能把变量名缩短；CSS 同样处理。别小看这一步，有时能砍掉一半体积。
图片更得注意。一张没压缩的 PNG 图可能几百 KB，经过工具优化后可能只有原来的三分之一，肉眼几乎看不出差别。用户在移动网络下打开你的应用，省下的每 KB 都是实实在在的流畅体验。
利用缓存机制，让重复访问飞起来
用户第一次打开慢一点没关系，关键是第二次、第三次要快。浏览器缓存就是干这事的。设置合适的 HTTP 缓存头，比如 Cache-Control: max-age=31536000，告诉浏览器这个资源一年内都不用重新下载。
不过要注意版本更新问题。可以在文件名里加哈希值，比如 app.a1b2c3d.js，内容变了哈希就变，URL 就不一样，自然会重新请求。相当于给每个新版本贴了个新标签，老缓存不影响新功能。
懒加载非关键资源，优先核心内容
页面里有些资源不是一打开就要的，比如底部的推荐列表、弹窗里的图片。这些完全可以等需要时再加载。图片懒加载很常见，滚动到附近才发起请求，既节省带宽又提升初始渲染速度。
<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy" />配合 JavaScript 监听滚动事件，判断元素是否进入视口，再把 data-src 的值赋给 src，实现按需加载。就像做饭，先炒主菜，配菜可以稍后准备，保证最快吃上饭。
避免主线程阻塞，提升交互响应感
JavaScript 是单线程的，一段耗时操作会让整个页面卡住。比如遍历几万个数据做计算，用户点击按钮都没反应。这时候可以拆解任务，用 setTimeout 或 requestIdleCallback 分片执行，留出时间响应用户操作。
还有一种情况是 DOM 操作太频繁。比如循环里每次都要修改元素样式，浏览器可能会反复重排重绘。更好的做法是先把所有变更收集起来，一次性更新，减少渲染压力。