前端性能

发布自Kindem的博客,欢迎大家转载,但是要注意注明出处

提高前端性能的方法

宏观上看

  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 效率高很多

参考资料

侵删

2条评论



temp_type
reply 2018·8·4 14:39 

都2018年了就不要相信什么"+号拼接字符串比放到一个数组里然后join慢"这种说法了。你总结别人的博客之前起码自己试一试他说的对不对啊 另外我不是很懂你认为寻址很慢的是基于什么,以及所谓常量(const)和let只是一个flag的差别,我不知道所谓"常量比变量快"是什么人基于什么平台的什么实验得出的结果 还有你引用的那篇博客举的关于作用域链查找的例子,所谓缓存一个局部变量,也是典型的想当然。你会缓存,虚拟机就不会缓存吗,虚拟机难道不知道你的若干次访问变量的操作访问的是同一个变量所以只需要一次查找吗。缓存一个局部变量完全是脱裤子放屁。当然在运行时修改作用域导致虚拟机不能提前预知这一点的情况也有,那就是eval,所以eval所在的作用域的代码会变得很慢,因为每次都要重新查找。这种情况你缓存一个局部变量也没任何卵用

2018·8·4 14:39 reply


流渚微梦(Admin)
reply 2018·8·5 15:47 

回复temp_type: 多谢提醒,我回头会做实验的,做完实验会修改文章的!

2018·8·5 15:47 reply