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

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

目录
打赏
0
1
1
0
8
分享
相关文章
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
133 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
372 58
常见的css优化方案都有那些
【7月更文挑战第7天】 - 合并压缩CSS减少HTTP请求,提高加载速度。 - 精简选择器,避免复杂嵌套和通配符,提升渲染效率。 - 利用继承和公共样式减少重复代码。 - 减少浮动和定位,使用Flexbox或Grid优化布局。 - 避免CSS表达式,使用CSS Sprites减少请求。 - 控制重排重绘,减少性能消耗。 - 利用CSS变量和现代布局技术提高灵活性。 - 服务器端启用GZIP压缩,客户端缓存CSS。 综合优化可显著提升网页性能。
132 4
CSS进阶 - CSS性能优化
【6月更文挑战第17天】**CSS性能优化关乎美观与速度。减少无用和重复样式,简化选择器,避免频繁重绘与回流,预加载关键CSS,以及模块化代码,能提升加载速度和用户体验。通过代码审查、工具辅助、选择器优化、使用transform和opacity、CSS预加载、以及文件拆分和模块化,开发者可应对复杂网页的性能挑战。**
173 2
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
291 7
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
88 5
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
220 5
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
171 4
如何检测 CSS 性能瓶颈并进行优化?
【10月更文挑战第28天】通过使用上述性能检测工具,结合对常见CSS性能瓶颈的分析和相应的优化方法,可以有效地提高CSS的性能,提升网页的加载速度和渲染效率,为用户提供更流畅、快速的浏览体验。
122 14

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问