前端性能、代码方面优化的几个点：

优化

前端性能优化的几个点：

1、放弃传统的操作DOM的时代
基于react、vue去写你的项目，(特点是数据影响视图的模式，框架内部操作的是虚拟的DOM，还会进行DOM-diff的对比)

2、DOM操作的读写分离
现代版的浏览器有一个"渲染队列"的机制，如果发现某一行要修改元素的样式，不会立即进行渲染，他要看看下一行是否还要进行元素样式的修改，如果是，那就把上一次的修改样式放到渲染队列里，这个过程一致持续到不是修改样式的操作为止，整体进行一次渲染引发一次回流，

    box.style.width = '100px';
    console.log(box.offsetWidth);
    box.style.height = '100px';
    console.log(box.offsetWidth);
    box.style.background = 'red';
    box.style.padding = '10px';
    引起3次dom的回流
    
     box.style.width = '100px';
     box.style.height = '100px';
     box.style.padding = '10px';
     console.log(box.offsetWidth);
     console.log(box.offsetWidth);
    会触发一次回流

     box.style.cssText = 'width:100px;height:100px;padding:10px;background:red';
     box.style.classList.add('box');

3、 js中的13个盒子模型和getComputedStyle都会引发渲染队列的刷新

4、样式的集中改变
box.style.cssText = ‘width:100px;height:100px;padding:10px’
或者动态增加类名

4、缓存布局信息
box.style.width = box.offsetWidth + 1 + ‘px’;
box.style.height = box.offsetHeight + 1 + ‘px’;
// 渲染两次
==>

            let w = box.offsetWidth; // 100
            let h = box.offsetHeight; // 100

            box.style.width = w + 1 + 'px';
            box.style.height = h + 1 + 'px';
            // 渲染一次

5、文档碎片 cerateDocumentFragment 模板字符串

   文档碎片 cerateDocumentFragment ：(存放DOM元素的容器)
        for(let i = 0;i<4;i++){
          let p = document.createElement('p');
          p.innerHTML = i;
          box.appendChild(p);
          // 每执行一次就会触发一次渲染引发一次回流
        }

        let frg = document.createDocumentFragment(); // 创建一个容器
        for(let i = 0;i<4;i++){
           let p = document.createElement('p');
           p.innerHTML = i;
           frg.appendChild(p);
        }
         box.appendChild(frg);
        // 只会触发一次渲染引发一次回流

         let frg = ``;
         for(let i = 0;i<4;i++){
         frg+=`<p>${i}<p>`
         }
         box.innerHTML = frg;
       // 只会触发一次渲染引发一次回流

6、css3的硬件加速
比起考虑如果减少回流，那不如直接不让回流发生 transform opacity filter
以后再js中可以操作元素的transform opacity filter，不会引发重新渲染

7、牺牲平滑度换取速度
每过10ms移动1px 如果全长是100px，那这样你的动画就要动100次
每过10ms移动5px 如果全长是100px，那这样你的动画就要动20次

代码方面的优化

1、减少HTTP的请求次数和传输报文的大小
- CSS SPRITE (雪碧图 图片精灵)
- iconFont(字体图标)或者使用SVG的矢量图
+ 减少请求的次数，或者减少请求的质量
+ 渲染时按照代码进行渲染，要更快，而位图(png/jpeg/jpg/gif)是需要先把图片进行编码在去渲染
+ 图片不容易失真

2、 懒加载
+ 图片的懒加载
+ 当前的页面加载完，那下边的页面用户看不见的地方的数据可以先不加载(节约流量，减轻服务器的压力)
- 取消音视频的预加载(一个事不加载 preload = ‘none’, 还有一个就是分段加载)
- 客户端与服务端的数据传输尽可能拿JSON格式完成，XML格式要比JSON格式质量大
- 把页面中的css文件和js文件等进行合并压缩(后期webpack会帮咱们处理)

      - 做CDN(地域分布式服务器) 、加服务器
        - 图片做base64转码(把图片转化成base64编码，可以减少图片的请求次数，提高页面的渲染速度，但是不利于开发和维护，用webpack可以实现图片的批量base64转化，这个过程也是webpack去做)

3、代码方面的优化

   - 减少对闭包的应用(因为闭包会产生不销毁的作用域，在占用内存，如果js掌握的不好，写出了死递归的代码了，这样就会导致堆栈溢出)
   - 避免过多和嵌套的循环
   - 对于动画来说，用能css解决的就不用js(能用transform就不用别的)，能用requestAnimationFrame，就不用定时器
      + requestAnimationFrame还有一个优势，当前页面处于休眠状态的时候，可以停止动画的运行，当你在结束休眠的时候在开辟动画
  - 减少对DOM的操作(用框架)
  - 尽可能使用事件委托
  - 函数的防抖和节流
  - 尽可能的减少css样式的层级(选择器是从右往左解析的) .box a {}    a {}

  - 在项目里边尽可能的使用异步，来模拟出多线程的执行机制，避免主线程的阻塞
  - 堆栈内存的手动释放(赋值为null)
  - 对于数据的请求加载尽可能的分批请求(分页)

 let obj = { name:1}
    delete obj.name;
    obj = null;