每日面试（5）---性能优化

目录

1. 从哪些点做性能优化？

2.在前端里那些是性能优化

3.手写一个懒加载（给window滚动条添加懒加载事件）

---

1. 从哪些点做性能优化？

A. 加载（方向）

1. 减少http请求（使用精灵图，文件合并等）

2. 减小文件大小（资源压缩，图片压缩，代码压缩等）

3. CDN（第三方库）----->大文件，大图通过链接引入

4. SSR服务端渲染，预渲染

5. 懒加载（也属于减少http请求）

6. 分包（加快主页的加载）

B. 减少dom操作，避免回流，虚拟dom，文档碎片

2.在前端里那些是性能优化

举例来说：

1. while循环快还是for循环快？

2. | 0 是不是比Math.floor性能好

3. if else与三元运算符哪个更快？

像是这些问题，哪怕选择了位运算，三元运算符这样更快的代码，但是这些也都跟性能优化无关，他们跟执行效率有关，而这对性能优化起到的作用微乎其微。

与哪些相关？

1. 页面加载性能（加载时间，用户体验）
2. 动画与操作性能（是否流畅卡顿）（eg：为什么提倡使用translate，定位等属性，就是因为它会脱离正常文档流，移动操作就不必再重新计算重新渲染，卡顿就会小，所以当有大片dom的切换，变动首选这两个属性就是为了不必在文档流中渲染）
3. 内存占用（内存占用过大，浏览器崩溃，比如即时通讯较多，数据实时变化）
4. 电量消耗（游戏方向）

3.手写一个懒加载（给window滚动条添加懒加载事件）

let num = document.getElementsByTagName("img").length;
  let imgs = document.getElementsByTagName("img"); //类数组，获取所有标签
  let n = 0; //计数器 避免重复加载
  console.log(num,imgs)

  lazyload()
  window.onscroll = lazyload;

  function lazyload() {
    let seeHieght = document.documentElement.clientHeight;//可见区域，不包含滚动条
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条的高度

    for(let i = n; i < num; i++) {
      console.log(imgs[i])
      if(imgs[i].offsetTop < seeHieght + scrollTop) {
        //从属性中拿到真正的地址赋值给src
        if(imgs[i].getAttribute("src") == "./img/loading.gif") {
          imgs[i].src = imgs[i].getAttribute("data-src")
        }
        n = i + 1;
      } 
    }
  }

一开始只加载了两张图片，随着滑动滚动条，下面的图片逐渐加载出来了，这就实现了简单的懒加载。

简单理解：用到时再加载。