前端项目性能优化

1、HTML性能优化

1. 把js移到HTML后加载，因为JS会阻塞后面的页面的显示。
2. 减少iframe的使用，因为iframe会增加一条http请求。
3. 避免图片和iframe等的空Src。空Src会重新加载当前页面，影响速度和效率。
4. 减少不必要的嵌套，避免代码纵深层次过深，尽量扁平化，因为当浏览器遇到一个开始标签时就会寻找它的结束标签，直到匹配上才会显示它的内容，所以当嵌套很多时打开页面就会特别慢。
5. 代码要结构化、语义化，因为这样可以增加代码的可读性，比如说使用header、footer、section等标签

2、css性能优化

1. 尽量减少重绘重排的次数

2. 动画效果的实现，需开启独立的图层，减少重绘重排
   1） 定位： position: absolute/relative

3. 多个小图标，使用CSS sprite来处理，减少请求次数

4. 多利用继承，多个子元素公用的样式，如果该样式能继承的话就写在父元素身上

   相信经常可以看到，一个元素的样式，会存在许多被覆盖的情况，大多是子元素本身的样式覆盖了继承自父元素身上的样式。这样的话，页面可能就会出现被多次重绘的现象

5. 使用子选择器、后代选择器时，不要嵌套过深，加深解析的难度。

3、JS性能优化

1. 懒加载: 对于页面列表较长，且图片较多的场景，使用懒加载，只加载当前屏的资源

2. 减少回流与重绘：比如说：对于需要频繁操作的dom，可以先将其取出放入到DocumentFragment中，在操作完成后，再将其所有子孙节点插入文档中 ，这样能减少回流和重绘。

3. 节流和防抖：
   对于调用频率比较高的方法，通过函数节流，函数防抖等方法，降低回调频率。

   函数防抖：简单的说，当一个动作连续触发，则只执行最后一次（在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。）
   函数节流：简单的说，当一个动作连续触发，则限制该方法在一定时间内只能执行一次。减少执行的频率

   函数节流、函数防抖的参考链接：
   https://blog.csdn.net/yiyueqinghui/article/details/108711456

4. 对于项目中的图片进行优化；---- 小图使用base64、多个图标合并到一张图中、对于大部分图标可用svg代替、照片使用JPEG

5. 合并压缩js

6. 不要反复去获取相同的dom节点，查找节点是非常消耗性能的

如何减少dom操作：
1、对dom查询做缓存，
2、多个操作尽量合并在一起执行
3、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4、避免全局查询

7 减少http请求的次数，节省网络资源
8. 少用全局变量
9. 对更新频率不高的资源做缓存,减轻服务器压力的同时也能够提高响应速率

---

10. 移动端使用touch事件代替click事件
11. 非核心代码异步加载，实现方法是，script标签中使用defer 、async实现延迟或异步加载

defer是在html解析完之后才会执行，如果是多个，按照加载的顺序依次进行。
async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。

4、Vue/React框架开发项目的优化

参考链接：https://blog.csdn.net/yiyueqinghui/article/details/122056448

参考链接：http://www.atguigu.com/mst/html/gp/17646.html

5、懒加载

• 懒加载的特点:
  1、减轻服务器的负担；
  2、减轻浏览器的负担，提升用户体验，保障用户操作的流畅性；

• 懒加载的实现原理

  图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片资源。

  根据这个原理，我们使用 HTML5 的 data-src 属性来储存图片的路径，在需要加载图片 的时候，将 data-src 中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。

  懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。

• 代码实现

  关键是判断图片是否在可视区域的判断
  方法一： img.offsetTop < window.innerHeight + document.body.scrollTop;
  方法二： img.getBoundingClientRect().top < window.innerHeight (该节点距离页面可视区域顶部的距离)
  方法三：intersectionObserve() ---- 是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

参考地址：https://blog.csdn.net/darabiuz/article/details/123151266

    <img src="loading.gif" data-url="./img/1.jpeg">
    <img src="loading.gif" data-url="./img/2.jfif">
    <img src="loading.gif" data-url="./img/3.jfif">
    <img src="loading.gif" data-url="./img/4.jfif">
    <img src="loading.gif" data-url="./img/5.jfif">
    <img src="loading.gif" data-url="./img/6.webp">

<script>
   var imgs = document.getElementsByTagName('img')
   // 2. 懒加载
   function lazyload(imgs){
	   let clietH = window.innerHeight;
       let scrollTop = document.body.scrollTop;
       for (let i = 0; i < imgs.length; i++) {
       	  //当内容的偏移量+视口高度>图片距离内容顶部的偏移量时，说明图片在视口内
          if (imgs[i].offsetTop < scrollTop + clietH ) {
          	   //从dataurl中取出真实的图片地址赋值给url
              imgs[i].src = imgs[i].getAttribute('data-url'); 
          }
       }
    }
   // 3. 监听滚动事件
   window.onscroll = function(){
		lazyload(imgs)
   }
   window.onload = function(){
		lazyload(imgs)
   }
</script>