当前位置: 首页 > 面试题库 >

列举CSS优化、提高性能的方法

寿鸣
2023-03-14
本文向大家介绍列举CSS优化、提高性能的方法相关面试题,主要包含被问及列举CSS优化、提高性能的方法时的应答技巧和注意事项,需要的朋友参考一下

加载性能

  1. 压缩CSS
  2. 通过link方式加载,而不是@import
  3. 复合属性其实分开写,执行效率更高,因为CSS最终也还是要去解析如 margin-left: left;

选择器性能

  1. 尽量少的使用嵌套,可以采用BEM的方式来解决命名冲突
  2. 尽量少甚至是不使用标签选择器,这个性能实在是差,同样的还有*选择器
  3. 利用继承,减少代码量

渲染性能

  1. 慎重使用高性能属性:浮动、定位;
  2. 尽量减少页面重排、重绘;
  3. css雪碧图
  4. 自定义web字体,尽量少用
  5. 尽量减少使用昂贵属性,如box-shadow/border-radius/filter/透明度/:nth-child等
  6. 使用transform来变换而不是宽高等会造成重绘的属性

暂且先这样吧,看来想回答好,得好好梳理下了。

 类似资料:
  • 本文向大家介绍提高jQuery性能优化的技巧,包括了提高jQuery性能优化的技巧的使用技巧和注意事项,需要的朋友参考一下 下面把提高jQuery性能优化技巧给大家分享如下: 缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存。 避免全局变量 jQuery与javascript一样,一般来说,最好确保你的变量在函数作用域内。 使用匈牙利命名法 在变量前加$前缀,便于识别出jQuery对象。

  • 慎重选择高消耗的样式 高消耗属性在绘制前需要浏览器进行大量计算: box-shadows border-radius transparency transforms CSS filters(性能杀手) 避免过分重排 当发生重排的时候,浏览器需要重新计算布局位置与大小。 常见的重排元素: width height padding margin display border-width positio

  • 在 CRUD 章节,我们已经知道 ES 的数据写入是如何操作的了。喜欢自己动手的读者可能已经迫不及待的自己写了程序开始往 ES 里写数据做测试。这时候大家会发现:程序的运行速度非常一般,即使 ES 服务运行在本机,一秒钟大概也就能写入几百条数据。 这种速度显然不是 ES 的极限。事实上,每条数据经过一次完整的 HTTP POST 请求和 ES indexing 是一种极大的性能浪费,为此,ES 设

  • 本文向大家介绍angularjs性能优化的方法,包括了angularjs性能优化的方法的使用技巧和注意事项,需要的朋友参考一下 学习angularjs有一段时间了,但是一直都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题。所以自己也总结了下常用的性能优化。 优化$watch 1.及时移除不必要的watch 2.尽量避免深度watch 我们都知道$watch有三个参数,第三个参

  • 本文向大家介绍提高Web性能的前端优化技巧总结,包括了提高Web性能的前端优化技巧总结的使用技巧和注意事项,需要的朋友参考一下 这篇文章讲述可以帮助 改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。 一. 清理 HTML 文档 HTML,即超文本标记语言,几乎是所有网站的支柱。HTML 为网

  • Android 应用性能优化系列 原文链接分别为 : https://www.youtube.com/playlist?list=PLWz5rJ2EKKc9CBxr3BVjPTPoDPLdPIFCE https://www.udacity.com/course/ud825 译者 : 胡凯 Android性能优化典范 Android性能优化之渲染篇 Android性能优化之运算篇 Android性能