前端优化技巧

HTML/CSS优化技巧

在熟练使用HTML/CSS的条件下, 同样的功能肯定是前者实现更简洁快速, 往往也更高效

CSS3提供了很好的动画实现功能, 熟练使用可以写出简洁高效的代码

使用语义化标签可以使布局更易理解

尽量使用官方推荐的标签, 比如要提交表单就使用form, 获取表单数据更简单, 而且action也很方便; 需要点击就使用button, 可以设置disabled; 如果要跳链就用a, 手机上划不会触发touchstart…

伪元素是一个元素的子元素, 并且是inline行内元素, 但是不可以使用JS获取到, 它可以制造视觉效果, 但并不会增加JS查找DOM的负担

在JS书写过程中, 尽量避免全局变量耦合, 容易出现冲突且不易调试

尽量避免在JS中改变CSS样式, 因为不容易调试

对重复代码进行抽取封装, 可以利用各种设计模式, 或者抽取class/mixin等方式重复利用

按强类型风格书写代码, 具有更好的阅读性, 并且会触发解释器的"优化回滚”, 降低执行效率

不要把代码暴露在全局作用域, 减少作用域查找

不要滥用闭包, 闭包会导致作用域查找层级变深, 时间变长

适当在局部作用域缓存全局作用域可以减少作用域查找时间

避免使用==, 代码不易阅读和维护

合并表达式可以提高效率, 如使用三元表达式替代if/else, 使用连等/自增等

减少魔数, 用变量来记录常量, 以更好地描述该常量的含义

使用ES6简化代码, 如箭头函数/class/模板字符串/块级作用域等

JS是单线程运行的, 页面卡顿的主要原因是某一段代码执行时间过长, 使得页面刷新逻辑阻塞不能及时更新出现掉帧

拆分代码段可以防止线程长时间被占用, JS在渲染每一帧时会调用requestAnimationFrame, 将代码段依次传入requestAnimationFrame方法, 可以在JS渲染完成每一帧之后空闲的时候被调用

减少重绘, 因为layout比较耗时; 简化DOM操作, DOM越复杂, 需要重绘的元素就越多

避免head标签阻塞: 所有放在head标签中的JS会阻塞渲染, 解决方法是将其放到body或者使用script的defer属性进行异步加载, 两者的区别是defer会降低资源加载的优先性, 甚至比加载图片优先级更低

CSS必须放到head, 但也一样会阻塞渲染, 所以只能尽量减少加载时间, 比如尽可能减少CSS体积: 不要放太多base64/对CSS进行压缩, 使用内联CSS

优化图片: 使用响应式图片, 避免不必要的大图片加载拖慢速度; 图片懒加载, 减少带宽占用

压缩和缓存资源(可以使用gzip, 设置HTTP缓存), 使用HTTP2.0多路复用技术

DNS预读取