美文网首页
前端性能优化

前端性能优化

作者: waysun375 | 来源:发表于2020-02-26 00:14 被阅读0次

    1. html压缩

    2. css压缩,是否合并?

    3. js压缩,是否合并?

    4. 图片压缩,base64,雪碧图,svg,字体库,懒加载,预加载,图片格式转换

    5. 资源cdn,懒加载,预加载

    6. 重绘,回流

    1. 重绘:元素变化不影响其他元素(如颜色变化)性能消耗较小
    2. 回流:元素变化影响其他元素布局 (如大小变化)性能消耗较大

    7. 避免回流/重绘

    1. 避免回流:采用定位
    2. 避免回流:采用css3样式属性(如动画,转变)
    3. 避免js一条条修改元素样式(现代浏览器有合并设置处理),但还是应采用添加类的方式
    4. 获取和操作元素之间会产生重绘/回流,尽量获取元素放一起,操作元素放一起(操作元素之间有获取操作浏览器不会合并设置)
    5. 获取元素用变量存储,避免重复获取

    相关文章

      网友评论

          本文标题:前端性能优化

          本文链接:https://www.haomeiwen.com/subject/ohmlchtx.html