一、减少 HTTP的请求次数和报文的大小

  1. css sprite （雪碧图、图片精灵）技术

  2. 使用字体图标或者 svg 等矢量图

  • 减少HTTP请求次数或者减少请求内容的大小
  • 渲染更快：因为他们是基于代码渲染的，而对于位图（png / jpg / gif)是需要把图片编码再渲染
  • 不容易失真变形
  • 也可以使用 webp 格式图片，这种格式要小一些，但是需要服务器端支持这种格式的请求处理
  1. 图片懒加载（延迟加载）技术
  • 第一次加载页面的时候不去请求真实的图片，提高第一次渲染页面的速度
  • 当页面加载完，把出现再用户视野区域中的图片做真实加载，没有出现的先不加载（节约流量，也能减少对服务器的请求压力）
  • 对于数据我们也尽可能分批加载（不要一次请求过多的数据，例如分页技术）

  1. 音视频文件取消预加载（preload = ‘none’），这样可以增加第一次渲染页面的速度，当需要播放时侯再加载

  2. 客户端和服务器端的数据传输尽可能基于 json 格式完成，xml 格式比 json 格式要大一些；还可以基于二进制编码或者文件流格式，这种格式比文件格式快很多

  3. 把页面中的 css / js 图片等文件进行合并压缩

  • 合并：争取 css 和 js 都只导入一个，（webpack 可以实现自动合并压缩）
  • 压缩：基于 webpack 可以压缩，对于图片自己找工具压缩，还可以使用服务器的 gzip 压缩

  1. 图片地图：对于多次调取使用的图片尤其是背景图，我们尽可能把它提取成公共的样式，而不是每一次都重新设置 background

  2. 图片 base64 ：用 base64 码，代表图片，减少 HTTP 请求，增加浏览器渲染的速度，所以真实项目中，尤其是移动端，如果图片加载缓慢，可能 base64 一下就好了。但是 base64 会导致文件中的代码超级恶心，不利于维护和开发，所以少使用：webpack 中可以配置图片为 base64 格式

二、设置各种缓存、预处理和长连接机制

  1. 把不经常更改的静态资源做缓存处理：一般做的是304或者 etag 等协商缓存

  2. dns 缓存或者预处理 （dns prefetch），减少 dns 的查找

  3. 设置本地的离线存储（manifest）或者把一些不经常更改的数据做本地临时存储（webstorage、indexdb）等

  4. 有钱就做 cdn （地域分布式服务器），还有一个财大气粗的方式：加服务器

  5. 建立 connection ：keep-alive tcp 长链接

  6. 建立 Cache-Control 和 Expires HTTP 的强缓存

  7. 使用 HTTP2 协议，现在使用的一般都是 HTTP1.1 版本

  • 可以多条 tcp 通道共存，管道化链接
  • 一个项目分为不同的域（不同服务器），例如：资源 web 服务器，图片服务器，视频服务器等，这样合理利用服务器资源，但是导致过多的 dns 解析。

三、代码方面的性能优化

  1. 减少对闭包的使用（因为过多使用闭包会产生很多不销毁的内存，处理不好的话，会导致内存溢出：栈溢出）减少闭包的嵌套，减少作用域链的查找层级

  2. 对于动画来说：能用 css 解决的就不用 js 动画（能用 transform 处理的，不用传统的css样式，因为 transform 开启硬件加速，不会引发回流），再或者使用定位的元素也会好很多，因为定位的元素脱离文档流，不会对其他元素的位置产生影响。能用 requestAnimationFrame 解决的不用定时器

  • requestAnimationFrame还有一个好处，当页面处于休眠无访问状态，动画会自己暂停，直到恢复访问才开始，而定时器是不论什么状态，只要页面不关，就一直处理

  1. 避免使用 iframe （因为 iframe 会嵌入其他页面，这样父页面渲染的时候还要同时把子页面也渲染了，渲染进度会变慢）

  2. 减少直接对 dom 操作，原因是减少 dom 的回流和重绘（当代项目基本上都是基于 mvvm / mvc 数据驱动视图渲染的），对 dom 的操作框架本身完成，性能要好很多

  3. 低耦合高内聚（基于封装的形式： [方法封装]、插件、组件、框架、类库等封装，减少页面中的冗余代码，提高代码使用率 ）

  4. 尽可能使用事件委托，性能至少提高50%

  5. 避免出现死循环或者嵌套循环：嵌套循环会增加循环的次数

  6. 项目中尽可能使用异步编程来模拟出多线程的效果，避免主线程阻塞（异步操作基于 promise 设计模式来管理）

  7. js 中不要使用 with

  8. 避免使用 css 表达式

  9. 函数的防抖和节流

  10. 减少使用 eval 主要原因是防止压缩代码的时候，由于符号书写不合规导致代码混乱

  11. 减少 filter 滤镜的使用

  12. 尽可能减少选择器的层级：.box a{} 和 a{} 第二个性能好，选择器是从右向左解析

  13. 尽可能减少 table 布局

  14. 手动回收堆栈内存（赋值为 null）

  15. 读写分离：现代版浏览器都有渲染队列机制：发现某一行要修改元素的样式，不立即渲染，而是看下一行，如果下一行也会改变样式，则把修改样式的操作放到渲染队列中，。。。一直到不是再修改样式的操作，整体渲染一次，引发一次 dom 回流，所以采用读写分离的方式

四、webpack性能优化

五、安全优化