HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开源代码 查看内容

CSS 性能优化笔记

2016-11-9 11:02| 发布者: microHTML| 查看: 1469| 评论: 0|来自: segmentfault

摘要: 在实习做一个移动项目的时候,实现一个动画效果,在 iPhone 和 Chrome 上调试没有问题,在千元左右的 Android 机上测试问题就很大了,卡顿非常明显。

在实习做一个移动项目的时候,实现一个动画效果,在 iPhone 和 Chrome 上调试没有问题,在千元左右的 Android 机上测试问题就很大了,卡顿非常明显,百思不得其解,吐血,卒。


这个悲伤的故事就是本文的引子,真真切切的体会到了 CSS 对用户体验的影响非常明显,稍有不慎就是一个大坑。下面,我们就来谈谈 CSS 性能优化的问题。


加载性能


减少文件体积,压缩代码

减少阻塞加载,不要用 import

提高并发(这个不甚理解)


选择器性能


对整体性能的影响可以忽略不计了,但是选择器的考究更多是为了规范化和可维护性、健壮性。具体怎么实施可以参考 Github 的这个分享:GitHub's CSS Performance by Jon Rohan


渲染性能


渲染性能是 CSS 优化最重要的关注对象。我们先来了解一下浏览器的渲染机制。

浏览器的渲染机制


浏览器渲染展示网页的过程,大致分为以下几个步骤:


解析HTML(HTML Parser)

构建DOM树(DOM Tree)

渲染树构建(Render Tree)

绘制渲染树(Painting)



慎重选择高消耗的样式


什么 CSS 属性是高消耗的?就是那些绘制前需要浏览器进行大量计算的属性。


box-shadows

border-radius

transparency

transforms


CSS filters(性能杀手)


避免过分重排(Reflow)


简单解释一下 Reflow:当元素改变的时候,将会影响文档内容或结构,或元素位置,此过程称为 Reflow。


常见的重排元素


widthheightpaddingmargin

displayborder-widthbordertop

positionfont-sizefloattext-align

overflow-yfont-weightoverflowleft

font-familyline-heightvertical-alignright

clearwhite-spacebottommin-height


怎么减少 Reflow


不要一条一条地修改 DOM 的样式,预先定义好 class,然后修改 DOM 的 className

把 DOM 离线后修改,比如:先把 DOM 给 display:none (有一次 Reflow),然后你修改100次,然后再把它显示出来

不要把 DOM 结点的属性值放在一个循环里当成循环里的变量


尽可能不要修改影响范围比较大的 DOM


为动画的元素使用绝对定位 absolute / fixed


不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局


避免过分重绘(Repaints)


当元素改变的时候,将不会影响元素在页面当中的位置(比如 background-color, border-color, visibility),浏览器仅仅会应用新的样式重绘此元素,此过程称为 Repaint。


常见的重绘元素


colorborder-stylevisibilitybackground

text-decorationbackground-imagebackground-positionbackground-repeat

outline-coloroutlineoutline-styleborder-radius

outline-widthbox-shadowbackground-size


优化动画


CSS3 动画是优化的重中之重。除了做到上面两点,减少 Reflow 和 Repaints 之外,还需要注意以下方面。


启用 GPU 硬件加速


GPU(Graphics Processing Unit) 是图像处理器。GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成,因为 GPU 是专门为处理图形而设计,所以它在速度和能耗上更有效率。


GPU 加速可以不仅应用于3D,而且也可以应用于2D。这里, GPU 加速通常包括以下几个部分:Canvas2D,布局合成(Layout Compositing), CSS3转换(transitions),CSS3 3D变换(transforms),WebGL和视频(video)。


/*
 * 根据上面的结论
 * 将 2d transform 换成 3d
 * 就可以强制开启 GPU 加速
 * 提高动画性能
 */
div {
  transform: translate(10px, 10px);
}
div {
  transform: translate3d(10px, 10px, 0);
}


需要注意的是,开启硬件加速相应的也会有额外的开销,参见这篇文章 CSS 硬件加速的好与坏


参考


CSS 优化、提高性能的方法有哪些? - 赵望野

CSS performance revisited: selectors, bloat and expensive styles

浏览器的渲染原理简介

谈谈 CSS 性能

前端工程师需要明白的「浏览器渲染」

学习通过 CSS 硬件加速提升你网站的性能

CSS 硬件加速的好与坏

两张图解释 CSS 动画的性能


原文链接:https://segmentfault.com/a/1190000007336987

原作者:Mertens


本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系站长QQ:2601929995,我们会在第一时间进行处理!

投稿: admin@html5cn.org


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-25 11:44

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部