后台管理系统性能优化

项目结构调整

Base开头是全局业务组件 BaseForm BasePagination BaseIcon
Form开头是Form相关的小组件 FormPanel
Table开发时Table相关的小组件 TableOptions
The开头的是每个页面引入的无状态组件，TheSideBar TheBreadcrumb

网络请求相关

用到的第三方类库使用CDN，推动运维搭建自己的CDN
合理的缓存策略，例如首页的大背景图等确定长期不变的资源直接强缓存Cache-Control: max-age=1000000,某些资源选择协商缓存
开启gzip，不借助nginx的话使用compression-webpack-plugin，节省nginx资源，少占用cpu gzip_static on，NGINX开启这个选项即可主动寻找.gz结尾的文件，就不会占用CPU去压缩文件了。

构建相关

路由懒加载使用import()，传统路由组件通过import静态打包到项目里面，所有的页面组件都在一起了，生产环境下就加载的慢了。 import()使ES6的模块有了动态加载的能力，让url匹配到相应的路径时，会动态加载页面组件，这样首屏的代码量会大幅减少，webpack会把动态加载的页面组件分离成单独的一个chunk.js文件，同时配置上路径别名会更好用。
合理使用路径别名，例如@ utils mixins等等，可以减少模块查找时耗费的时间。
图片懒加载，在一开始图片只使用展位图，滚动到不同的位置加载不同的真正的图片吗，一般有两个方法：

element.getBoundingClientRect()，该方法返回一个DOMRect对象，包含了bottom height left right top width x y值，其中的top值代表当前DOM节点距离窗口顶部的高度，需判断top值是否小于当前浏览器窗口的高度（window.innerHeight），若小于说明已经进入用户视野，然后替换为真正的图片即可。使用这个方法需要注意三点：

需要监听scroll事件，注意函数节流
首屏渲染时不会触发scroll，需要手动调用事件处理函数
当所有需要懒加载的图片都被加载完了，清楚事件监听器。

IntersectionObserver()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// intersectionObserver 实现懒加载
let imgList2 = [...document.querySelectorAll(".intersection_observer")]

let lazyLoad2 = function () {
    // 实例化observer
    let observer = new IntersectionObserver(entries => {
        //entries存储着所有观察被元素的intersectionObserverEntry配置
        entries.forEach(entry => {
            // 大于0表示进入视口
            if (entry.intersectionRatio > 0) {
                entry.target.src = entry.target.dataset.src
                //取消观察
                observer.unobserve(entry.target)
            }
        })
    })
    imgList2.forEach(img => {
        observer.observe(img)
    })
}

图片压缩

编码相关

创建DOM相关的需求，尽量使用文档碎片

1
2
3
4
5
6
7
8
9


const fragment = document.createDocumentFragment();
  
let child;
while ((child = vm.$el.firstChild)) {
  fragment.append(child);
}

// 处理完文档碎片
element.appendChild(fragment);

避免频繁获取视图信息(getBoundingClientRect,clientWidth,offsetWidth)，这些操作会频繁地引发重排、重绘，而正式情况下浏览器会通过一个队列维护这些可执行性操作，等到超过了最大值或过了指定时间（1000ms/60 = 16.6ms）才会去清空队列一次性执行操作
高频监听需要防抖节流
CSS3动画，transform触发渲染层，开辟新的图层，避免重排重绘。

文章目录

项目结构调整

网络请求相关

构建相关

编码相关