Css3在移动设备上的优化点

简介: Css3在移动设备上的优化点

最近进了一家新公司,主要是做互联网电视盒子的,盒子系统用的是android,界面则由html5来弄,在mac上开发完放到盒子中运行时发现真的性能很差,非常卡,很多时候还黑屏。所以要非常注重性能优化,特别是css3上有很多坑啊。网上关于css3优化的中文资料相当少,没办法只能google国外的资料了,最后发现了zepto.js作者Thomas Fuchs的博客,觉得这大牛说的应该没错。

1、图片

图片在移动设备上渲染是众所周知的慢

 

2、渐变gradients

这个属性在公司的电视盒子上跑时明显感觉到性能非常差

-webkit-gradient, 渐变在浏览器中真实的实现是构建一张位图并渲染到浏览器,这和从外部加载一张图片无异(如从外部加载一张png图片)

对渐变的优化,可采用canvas来实现如:

// WebKit CSS gradient
-webkit-gradient(linear, left top, right top,
  from(#4b4c4d),
  color-stop(0.249, #4b4c4d),
  color-stop(0.25, #575b5c),
  color-stop(0.329, #575b5c),
  color-stop(0.33, #6b7071),
  color-stop(0.749, #6b7071),
  color-stop(0.75, #575b5c),
  color-stop(0.909, #575b5c),
  color-stop(0.91, #4b4c4d),
  to(#4b4c4d)
);
 
// <canvas> gradient
var gradient = $('canvas').getContext("2d").createLinearGradient(0,0,230,0);
gradient.addColorStop(0,'#4b4c4d');
gradient.addColorStop(0.249,'#4b4c4d');
gradient.addColorStop(0.25,'#575b5c');
gradient.addColorStop(0.329,'#575b5c');
gradient.addColorStop(0.33,'#6b7071');
gradient.addColorStop(0.749,'#6b7071');
gradient.addColorStop(0.75,'#575b5c'); 
gradient.addColorStop(0.909,'#575b5c');
gradient.addColorStop(0.91,'#4b4c4d');
gradient.addColorStop(1,'#4b4c4d');

 

 

3、避免使text-shadow和box-shadow

这两个东东是另一个主要降低性能坑

 

4、硬件加速hardware acceleration

这玩意儿很新很酷,但是bug也不少。例如它的并发动画是有限的,过多会导致闪烁或渲染错误。也许会闪瞎你的钛合金狗眼哟…

 

5、 touch事件优先

尽量使用touch事件代替click等一些老的事件,因为老的事件可能会有轻微的延迟

 

6、opacity

避免使用opacity,因为某些原因,它会干扰硬件加速的渲染

 

7、对于javascript和css没有银弹

别太依赖框架或库

 

8、要用translate3d别用translate

因为某些原因后者没有硬件加速

相关文章
|
5月前
|
缓存 前端开发 JavaScript
|
3月前
|
存储 缓存 前端开发
常见的css优化方案都有那些
【7月更文挑战第7天】 - 合并压缩CSS减少HTTP请求,提高加载速度。 - 精简选择器,避免复杂嵌套和通配符,提升渲染效率。 - 利用继承和公共样式减少重复代码。 - 减少浮动和定位,使用Flexbox或Grid优化布局。 - 避免CSS表达式,使用CSS Sprites减少请求。 - 控制重排重绘,减少性能消耗。 - 利用CSS变量和现代布局技术提高灵活性。 - 服务器端启用GZIP压缩,客户端缓存CSS。 综合优化可显著提升网页性能。
39 4
|
4月前
|
前端开发 JavaScript UED
CSS进阶 - CSS性能优化
【6月更文挑战第17天】**CSS性能优化关乎美观与速度。减少无用和重复样式,简化选择器,避免频繁重绘与回流,预加载关键CSS,以及模块化代码,能提升加载速度和用户体验。通过代码审查、工具辅助、选择器优化、使用transform和opacity、CSS预加载、以及文件拆分和模块化,开发者可应对复杂网页的性能挑战。**
44 2
|
5月前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
148 4
|
5月前
|
前端开发 UED
【专栏:工具与技巧篇】CSS Sprites 与图标字体:优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法:CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求,提高加载速度,但维护复杂;图标字体则提供良好扩展性和定制性,易于调整大小和颜色。两者各有优劣,适用于不同场景。在实际应用中,应结合使用,根据项目需求灵活选择,以实现最佳性能优化和用户体验。
61 1
|
5月前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
294 1
|
5月前
|
缓存 前端开发 UED
关于CSS性能优化的建议。
【4月更文挑战第13天】优化CSS性能的关键点包括:合并和压缩样式表,减少网络请求;使用简洁选择器,避免通配符;利用CSS Sprites减少请求;限制嵌套深度;创建公共样式类和继承机制;按需拆分公共CSS文件;慎用昂贵属性;考虑使用CSS预处理器;适当使用内联样式。通过这些方法,可提升网站加载速度和用户体验。
38 2
|
5月前
|
缓存 前端开发 UED
css优化的方法
css优化的方法
34 6
|
5月前
|
缓存 前端开发 JavaScript
《CSS 简易速速上手小册》第8章:CSS 性能优化和可访问性(2024 最新版)
《CSS 简易速速上手小册》第8章:CSS 性能优化和可访问性(2024 最新版)
50 0
|
5月前
|
前端开发 开发者
深入了解 CSS 伪类:优化页面样式与交互
深入了解 CSS 伪类:优化页面样式与交互
93 2