前端常用的优化技巧汇总

  1. 项目中我们需要把JS和CSS合并压缩，如果项目中CSS和JS内容不是很多，我们可以采取内嵌式，以此减少HTTP请求的次数，加快页面的加载速度

    1. CSS压缩成1个，JS最好合并为一个
    2. 首先通过一些工具（例如：webpack）把合并后的CSS或者JS压缩成xxx.min.js，减少文件的大小
    3. 服务端开启资源文件GZIP压缩
    4. …

    通过一些自动化工具完成对CSS以及JS的合并压缩，或者在完成LESS转CSS，ES6转ES5，我们把这种自动化构建模式，称之为前端“工程化”开发

  2. 在客户端和服务端进行数据通信的时候，我们尽量使用JSON格式进行数据传输

    1. 优势
      1. JSON格式的数据，能够清晰的展示出数据结构
      2. 相对于很早以前的XML格式传输，JSON格式的数据更加轻量级
      3. 客户端和服务端都支持JSON格式数据的处理，处理起来方便
    2. 项目中，并不是所有的数据都基于JSON，对于某些特殊需求（例如：文件流传输或者文档传输），使用JSON就不合适了

  3. 编写代码的优化技巧

    1. 除了减少HTTP请求次数和大小可以优化性能，我们在编写代码的时候也可以进行一些优化，让页面性能有所提升（有些不好的代码编写习惯，会导致页面性能消耗过大，例如：内存泄露）
    2. 在编写JS代码的时候，尽量减少对DOM的操作
      1. 在JS中操作DOM是一个非常消耗性能的事情，但是我们又不可避免的操作DOM，我们只能尽量减少对于它的操作
      2. 操作DOM的弊端
        1. DOM存在映射机制（JS中的DOM元素对象和页面中的DOM结构是存在映射机制的，一改则全改），这种映射机制是浏览器按照W3C标准对JS语言的构建和DOM的构建（其实就是构建了一个监听机制），操作DOM是同事要修改两个地方，相对于一些其他的JS编程来说是消耗性能的
        2. 因为页面中DOM结构改变或样式改变会触发浏览器的回流或重绘
          1. 回流：浏览器重新计算DOM结构
          2. 重绘：把元素的样式重新渲染

  4. 采用图片兰姐在技术，在页面开始家在的时候不请求真实的图片地址，而是使用默认占位图，当页面加载完成后，再根据相关的条件一次加载真实图片（减少页面首次加载HTTP请求的次数）

    1. 项目中，我们开始图片都不加载，页面首次加载完成，先把第一屏中可以看见的图片进行加载随着页面的滚动，再把下面区域中能够呈现的图片进行加载
    2. 根据图片懒加载技术，还可以扩充出：数据懒加载
      1. 开始加载页面的时候，我们只把首屏或者前两屏的数据从服务器端进行请求（有些网站首屏数据是后台渲染好，整体返回给客户端呈现的）
      2. 当页面下拉，滚动到那个区域，再把这个区域需要的数据进行请求（请求回来做数据绑定、图片延迟加载）
      3. 分页展示技术采用的也是数据的懒加载思想实现的：如果我们请求获取的数据是很多的数据，我们最好分批请求，开始只需要请求第一页的数据，当用户点击第二页再请求第二页的数据

  5. 如果当前页面中出现了audio/video标签，我们最好设置他们的preload=none页面加载的时候，音视频资源不进行加载，播放的时候开始加载（减少首次加载的HTTP请求的次数）

    1. preload=auto 页面首次加载的时候就把音视频资源加载了
    2. preload=metadata 页面首次加载的时候只把音视频资源的头部信息进行加载

  6. 编写代码的时候，更多的使用异步变成

    1. 同步编程可能会导致，上面的东西完不成，下面的任务也做不了，我们开发的时候可以把某一个区域模块都设置为异步变成，这样只要模块之间没有必然的先后顺序，都可以独立进行加载，不会受上面模块的影响
    2. 尤其是ajax数据请求，我们一半都要使用异步变成，最好基于promise设计模式进行管理（项目中经常使用fetch、vue axios等插件来进行处理，因为这些插件就是基于promise设计模式对ajax进行的封装处理）

  7. 在项目中，我们尽可能避免一次性循环过多的数据（因为循环操作是同步变成），尤其是要避免while导致的死循环操作

  8. CSS选择器优化

    1. 尽量减少标签选择器使用
    2. 尽可能少使用ID选择器，多食用样式类选择器（通用性强）
    3. 减少选择器前面的前缀，例如：.headerBox .nav .left a{}（选择器是从右向左查找的）
    4. 避免使用CSS表达式

  9. 减少页面中的冗余代码，尽可能提高方法的重复使用率：“低耦合高内聚”

  10. 最好CSS放在head中，JS放在body底部，让页面加载的时候限价在CSS再加载JS（目的：先呈现页面，再给用户提供操作）

  11. 对于不经常更新的数据，最好采用浏览器的304缓存做处理

    • 第一次请求CSS、JS下来，浏览器会把请求的内容缓存起来，如果做了304处理，用户在此请求CSS、JS直接从缓存中读取，不需要再去服务器获取了（减少HTTP请求的次数）

    • 当用户强制刷新或者当前缓存的CSS、JS发生变动，都会重新从服务器拉去

    • 主要由服务端处理，对于客户端来讲，我们还可以基于localstorage来做一些本地存储

  12. JS中尽量较少闭包的使用

    1. 闭包会形成一个不销毁的堆内存，过多的堆内存累积会影响页面的性能
    2. 还容易导致内存泄露

  13. 在做DOM事件绑定的时候，尽量避免一个个的时间绑定，而是采用性能更高的事件委托来实现

    1. 事件委托（事件代理）
    2. 把时间绑定给外层容器，当里面的后代元素相关行为被触发，外层容器绑定的方法会被触发，（冒泡传播机制），通过事件源是谁，我们做不同的操作即可

  14. 尽量使用CSS3动画，代替JS动画（因为CSS3的动画会开启硬件加速，性能比JS好）

  15. 编写JS代码的时候尽可能使用设计模式来构建体系，方便后期的卫华，也提高代码的可读性

  16. CSS中减少对滤镜的使用，页面中也减少对flash的使用

  17. 采用cdn加速