前端性能优化

原则： 多使用内存和缓存等存储，减少CPU计算，减少网络请求。

            从加载页面和静态资源，及页面渲染这两方面入手

1. 加载资源优化

    a. 静态资源的压缩合并

    b. 静态资源缓存

    c. 使用CDN让资源加载更快（如<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="         stylesheet"/>       搜索boot cdn）

    d. SSR后端渲染，数据直接输出到HTML中（如jsp，php，数据直接输出到html中，不用通过ajax来获取）

 2. 渲染优化

     a. CSS放前面，js放后面（避免不必要的重绘重排）

     b. 懒加载（图片懒加载，下拉加载更多）

     c. 减少DOM查询，对DOM查询做缓存（定义一个变量来接受首次dom查询的结果）

     d. 减少DOM操作，多个DOM操作尽量合并在一起执行

          （如使用document.createDocumentFragment();这个对象不会触发DOM操作）

     e. 事件节流（减少不必要的事件触发，减少CPU计算）

      f. 尽早执行操作（如，DOMContentLoaded，DOM渲染完即可执行，此时图片视频还可能没有加载完）