前端页面性能如何优化？

加载优化:

减少http请求,缓存资源,压缩代码,按需加载,压缩图像,预加载

执行优化:

css写在头部,js写在尾部并异步

避免img,iframe的src为空,空src会重新加载页面,影响速度和效率

避免多次重置图像大小,这会引起多次重绘,影响性能

渲染优化:

设置viewport,加速页面渲染

减少dom节点

优化高频事件,函数的节流防抖

样式优化:

避免在html中写style

正确使用display,

• display:inline后不应该再使用float、margin、
• padding、width和height
• display:inline-block后不应该再使用float
• display:block后不应该再使用vertical-align
• display:table-*后不应该再使用float和margin

不乱用float,不乱用web字体

脚本优化:

减少重绘和回流

尽量使用事件代理,避免批量绑定事件

尽量使用id选择器