前端性能优化的简单常见方式

• 减少请求数量

    文件合并、字体图片代替普通图片、减少重定向、使用缓存、避免使用空的src和href

• 减小资源大小

    文件的压缩、图片的压缩

• 优化网络连接

    DNS预解析、并行连接

• 优化资源加载

    将 CSS 放在文件头部，JavaScript 文件放在底部、模块按需引入、

• 减少重绘重排（回流）

    浏览器渲染过程
        解析HTML生成DOM树。
        解析CSS生成CSSOM规则树。
        将DOM树与CSSOM规则树合并在一起生成渲染树。
        遍历渲染树开始布局，计算每个节点的位置大小信息。
        将渲染树每个节点绘制到屏幕。

重排和重绘的概念    

重排（回流）
        当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排。
    重绘
        当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。不是所有的动作都会导致重排，例如改变字体颜色，只会导致重绘。
        回流必将引起重绘，而重绘不一定会引起回流。

    什么操作会导致重排？
        添加或删除可见的 DOM 元素
        元素位置改变
        元素尺寸改变
        内容改变
        浏览器窗口尺寸改变

• DOM优化

    防抖、节流限制方法的频繁触发
    防抖：
    当高频度触发事件时，在一定的时间内会取消前面所有的触发，只执行最后一次触发

    function debounce(fn,delay){
        let timer = null //借助闭包
        return function() {
            if(timer){
                clearTimeout(timer) 
            }
            timer = setTimeout(fn,delay) // 简化写法
        }
    }

    节流：
    允许一个函数在一个规定时间内必须执行一次我们所希望触发的事件。

    function throttle(fn,delay){
        let valid = true
        return function() {
           if(!valid){
               //休息时间 暂不接客
               return false 
           }
           // 工作时间，执行函数并且在间隔期内把状态位设为无效
            valid = false
            setTimeout(() => {
                fn()
                valid = true;
            }, delay)
        }
    }