前端优化能做到多少

1.阅览器的渲染过程

a 阅览器解析html 形成dom tree

b 阅览器解析css cssom tree

c js 使用html DOM和 cssom 这样的API操作html和css 合成rendertree

d 布局根据render tree 计算每个元素的占位大小等信息

e 绘制根据rendertree 的回流计算元素的绝对信息

f 展示页面上

2. 减少DOM重排操作

3. css 方面

a 避免样式嵌套

b 避免使用 table 布局

c 动画元素使用绝对定位脱离文档流

d 避免使用 float 布局

4 节流防抖减少函数执行次数

throllet(fun, delay) {
    let last = 0
    return function() {
    	let context = this
        let args = arguments
    	let now = new Date()
        if(now - last > delay) {
        	fun.apply(context, args)
            last = now
        }
    }
}

debounce(fun, delay) {
	let timer = null 
    clearTimeOut(timer)
    return function() {
    	let context = this
        let args = arguments
        timer = setTimeout(()=>{
        	fun.apply(context, args)
        }, delay)
    ]
}

5 静态文件打包

使用雪碧图打包js

前端优化