提高前端性能的方法

宏观上看

1. CDN加速

   • 什么是CDN(内容分发网络)
   • 由于 CDN 位于用户网络的第一跳，将大多数静态文件启用 CDN 加速可以大大提高效率，很多框架用的很多的静态文件都启用了 CDN 加速

2. 反向代理

   • 什么是反向代理 ? 正常的代理服务器是位于浏览器一端，代理用户发送 http 请求给 Web 服务器，但是反向代理服务器则是位于 Web 服务器一端，代理 Web 服务器接受请求，然后再将请求处理转发，这样可以提高效率，用过 Nginx 的同学可能就有印象， Nginx 就可以做反向代理

3. 减少 http 请求，合理设置 http 缓存

   • 将多个文件合并成一个文件，将多个请求合并成一个请求
   • 能够进行缓存的情况下缓存越多越好，越久越好

4. 使用浏览器缓存

   • 某些静态文件长期不变化，可以使用 http 头中的 cache-control 和 expires设置浏览器缓存

5. 压缩文件

   • 很常见，html、css、js 等文件压缩后的效果很好，很多框架支持构建 min 文件，即是这么一种办法

6. CSS Sprites

   • 即使用该技术将很多零散的图片合成一张大图，比较适合图标之类的使用，可以参照很多游戏制作中的 Sprites 贴图，效果类似，这种办法能够大大减少 http 请求量

7. LazyLoad Images

   • 懒加载，比如旋转木马，可以先加载第一张图片，如果用户不继续翻阅，后面的图片也没有加载的必要了

8. CSS 放在页面最上部，javascript 放在页面最下面

   • 这与页面的渲染顺序有关，CSS尽早加载可以使得页面尽早开始渲染，而js是会阻塞页面的，js的加载需要等到 DOM 完成形成之后才会开始生效，所以js最好放到最下面

9. 减少 cookie 传输

   • cookie 是会包含在每一次 http 请求中的(如果启用 cookie)，所以太大的 cookie 是会影响到性能的

微观(代码层面)上看

1. 虚拟 DOM

   • 什么是虚拟 DOM ? 大体上来说就是使用 js 模拟了 DOM，对虚拟 DOM 的操作会影响到真正的 DOM，这样的方式提高了性能，很多前端框架都采用了虚拟 DOM，比如 Vue、React 等等
   • 详细了说有点麻烦，看这里吧：虚拟DOM介绍

2. 慎用eval

   • 这玩意真的慢

3. js 链式作用域需要注意的地方

   • js 的链式作用域：用到一个变量的时候，现在当前作用域下的局部变量查询，查不到了再往上一级作用域查询
   • 因为这样的作用域，当使用到全局变量的时候，最好先将全局变量缓存到本地

4. 变量/常量访问开销

   • 常量最快
   • 局部变量次之
   • 链式作用域找到的变量再次之
   • 对象和数组的操作涉及到寻址，很慢

5. 字符串拼接

   • 想想都慢
   • 可以使用模板字符串或者尽量避免

6. css 选择器优化

   • 选择器实际上是从右往左选，所以 div#hello 会比 #hello div 效率高很多

参考资料

• 前端影响性能的细节 - CSDN - i秋风伴落叶
• 百度百科 - CDN
• 虚拟 DOM 介绍

侵删