优化网络性能

  1. 优化打包体积：利用一些工具压缩、混淆最终打包代码，减少包体积；
  2. 多目标打包：利用一些打包插件，针对不同的浏览器打包出不同的兼容性版本，这样一来，每个版本中的兼容性代码就会大大减少，从而减少包体积；
  3. 压缩：现代浏览器普遍支持压缩格式，因此服务端的各种文件可以压缩后再响应给客户端，只要解压时间小于优化的传输时间，压缩就是可行的；
  4. CDN：利用 CDN 可以大幅缩减静态资源的访问时间，特别是对于公共库的访问，可以使用知名的 CDN 资源，这样可以实现跨越站点的缓存；
  5. 缓存：对于除 HTML 外的所有静态资源均可以开启协商缓存，利用构建工具打包产生的文件 hash 值来置换缓存；
  6. http2：开启 http2 后，利用其多路复用、头部压缩等特点，充分利用带宽传递大量的文件数据；
  7. 雪碧图：对于不使用 HTTP2 的场景，可以将多个图片合并为雪碧图，以达到减少文件的目的；
  8. defer、async：通过 defer 和 async 属性，可以让页面尽早加载 js 文件；
  9. prefetch、preload
    • 通过 prefetch 属性，可以让页面在空闲时预先下载其他页面可能要用到的资源；
    • 通过 preload 属性，可以让页面预先下载本页面可能要用到的资源；
  10. 多个静态资源域：对于不使用 HTTP2 的场景，将相对独立的静态资源分到多个域中保存，可以让浏览器同时开启多个 TCP 连接，并行下载；

代码上的优化

  1. 减少 dom 的重绘和回流；

  2. 在 js 中尽量减少闭包的使用 （内存优化）；

  3. 在 js 中避免 嵌套循环 和 死循环；

  4. 尽可能使用事件委托；

  5. 尽量减少 css 表达式的使用 (expression)；

  6. css 选择器解析规则是从右向左解析，基于 less/sass 开发的时候尽可能减少层级嵌套，目的是让选择器的前缀短一点；

  7. 尽可能实现 js 的封装 （低耦合高内聚），减少页面中的冗余代码；

  8. 在 css 导入的时候尽量减少使用 @import 导入式；

  9. 使用 window.requestAnimationFrame （js 中的帧动画） 代替传统的定时器动画 （能用 css3 动画的绝对不用 js 动画）；

  10. 减少递归的使用，避免死递归，避免由于递归导致的栈内存嵌套；

  11. ……

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 优化网络性能
  2. 2. 代码上的优化