美文网首页
前端性能优化

前端性能优化

作者: 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. 获取元素用变量存储,避免重复获取

相关文章

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

  • 前端性能优化

    前端性能优化 下面是我认知的前端性能优化的策略,本书主要着手 JavaScript 优化展开阐述。 JavaScr...

  • 2019-10-22

    2018 前端性能优化清单

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

网友评论

      本文标题:前端性能优化

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