一、css概述
css即层叠样式表(Cascading Style Sheets),它的作用主要是控制页面元素的样式,包括布局、颜色、字体、字号、空白、边框、属性等等。css的出现使得html的内容和样式分离,极大的提高了工作效率。
目前最新的标准是css3,下面几节将介绍在使用css过程中应遵循的最佳实践方案。
二、使用高效的css选择器
欲创建一个高效的web应用,你要了解浏览器是如何读取你的web页面并呈现出来的。当浏览器读取你的html文档时,它首先对html文档进行语法分析,然后把相应元素填充到一个文档树中;然后从css样式表中匹配相应的样式到各个元素中。浏览器读取样式表是从右到左的,即从最右边的选择符(key selector)开始,然后依次向左移动,直到匹配到元素结束。为了使这个匹配过程高效些,就要减少匹配元素样式的过程。举例来说:
#home a {color: blue;}
我们希望id是home下的所有a标签,使用蓝色字体。但是这样声明并不高效,浏览器首先会查找每一个a标签,然后查看它的父元素是否含有home的id,直到文档的结尾。更高效的方式是避免使用子选择器,使用class属性:
.home-anchor {color: blue;}
使用特定的样式规则就可以减少匹配的时间(但是要在可维护性性之间找到一个平衡点),可能的形式为:
#main-navigation { } /* ID (Fastest) */ body.home #page-wrap { } /* ID */ .main-navigation { } /* Class */ ul li a.current { } /* Class * ul { } /* Tag */ ul li a { } /* Tag */ * { } /* Universal (Slowest) */ #content [title='home'] /* Universal */
有四种类型的选择器,其中id和class比元素选择器和通配符更快:
#chapter1 {text-align: center; } .chapter1 { font-weight: bold; } h1 { font-family: sans-serif; } * {font-family: Arial; }
三、声明图片的尺寸
为了提高页面渲染的速度,声明图片的尺寸是很好的办法:
<img src="img/logo.png" style="width: 100px; height: 100px;">
因为浏览器是分开下载各个图片的,声明了尺寸就可以提前确定排版,否则等到图片下载完成后才知道图片的尺寸信息,渲染过程就明显变慢了。
还有就是,声明图片尺寸的时候,应该是实际的尺寸。例如:一个图片实际尺寸是50*50,但是你希望它小一点,把尺寸声明为20*20,那么调整图片尺寸的过程就会耗费CPU资源、内存资源等,使渲染速度变慢。其次,这还会避免下载一个不必要的较大的图片,手机流量是有限的,这也是为用户节约资源。
声明图片尺寸的方式有3种(html,内联css,外联css):
<img id="logo" src="logo.jpg" alt="Company logo" height="100" width="100" /> <img id="logo" src="logo.jpg" style="width: 100px; height: 100px;"> #logo { width: 100px; height: 100px; }
四、使用css精灵(sprites)
css精灵即把多个小图片放到一个大图片中,这样就可以减少http请求的数量。使用时,就进行相应的裁剪,这在各大网站中常被用到。放在一个大图片中,也更容易对图片进行统一管理,这对于按钮、导航图标等非常合适。
#navcontainer li { background-image: url('spritebg.jpg'); /* single image */ } #navcontainer ul li:nth-child(1) { background-position: -130px -700px; /* position = xpos ypos */ } #navcontainer ul li:nth-child(2) { background-position: -130px -718px; } #navcontainer a { width: 250px; /* size */ height: 18px; }
五、启用硬件加速
如果你的应用中含有动画,那么就可以启用硬件加速功能来提升用户体验。默认情况下,大多数浏览器是没有开硬件加速的,使用该功能的典型情况是WebGL组件、3D动画等。但是,如果你希望某个特定的元素使用硬件加速,可以手动触发:
... { -webkit-transform: <transform function>; }
transform属性会把2D或3D转换应用到一个元素中,可以使用这个属性来进行旋转、缩放等操作。例如:
img.rotate3d { -webkit-transition: -webkit-transform 1s ease-in-out; -webkit-transform: rotate3d(0, 0, 1, 0deg); } img.rotate3d:hover { -webkit-transform: rotate3d(0, 0, 1, 15deg); }
以上代码对图片进行15度的旋转
但是开启硬件加速并不会加速其他元素的执行,它只是加速了动画的转换(使用GPU)。最后,硬件的资源是很宝贵的,有必要的时候才考虑使用。
相关推荐
本书贴近Web前端标准来介绍前端开发相关最佳实践,目的在于让前端开发工程师提高编写代码的质量,重视代码的可维护性和执行性能,让初级...第四部分包括第12章和第13章,介绍移动Web前端开发基本概况和相关最佳实践。
本书贴近Web前端标准来介绍前端开发相关最佳实践,目的在于让前端开发工程师提高编写代码的质量,重视代码的可维护性和执行性能,让初级...第四部分包括第12章和第13章,介绍移动Web前端开发基本概况和相关最佳实践。
“HTML5移动Web开发.pdf”这份资源很可能是详尽的教程或参考手册,涵盖了以上及更多HTML5在移动场景下的应用技巧和最佳实践。通过学习,你可以掌握创建高性能、跨平台的移动Web应用所需的知识,为你的职业发展打下...
通过这个微课版的PPT课件,学习者不仅可以深入理解HTML5和CSS3的基础知识,还能通过实例掌握实际开发中的技巧和最佳实践,从而成为一名出色的Web前端开发者。这份教学资料是自学或课堂教学的理想资源,帮助学习者...
总的来说,"WEB移动开发项目"是一个综合性的学习资源,涵盖了前端到后端的开发技术,适合对移动应用开发感兴趣的学习者或开发者进行深入研究。通过实践这些技术,不仅可以提升个人技能,也能更好地理解和掌握现代...
Web前端开发规范、CSS手册以及W3C手册资料合集是前端开发者不可或缺的学习资源,它们涵盖了前端开发的基础知识、最佳实践以及最新的标准指南。在这个资料合集中,"小趴菜前端资料合集"可能包含了丰富的教程、实战...
通过阅读和运行这些代码,学习者不仅可以理解概念,还能掌握实际开发中的技巧和最佳实践。 在移动Web开发中,除了HTML5,CSS3也是不可或缺的一部分。CSS3提供了更多的选择器、动画、过渡效果,以及媒体查询等功能,...
本压缩包“移动web开发资料.rar”提供了关于移动端适配、CSS3新特性和移动端实战案例的宝贵资源,旨在帮助开发者更好地理解和实践移动Web开发。 首先,让我们深入探讨移动端适配。移动端适配主要包括响应式设计...
在现代互联网技术中,H5(HTML5)已经成为构建高质量移动Web应用的关键技术。...通过阅读和实践,读者将能熟练掌握H5在移动环境下的各种开发技术和最佳实践,从而打造出高性能、用户体验优良的移动Web应用。
在本资源"从0到1 实战朋友圈移动Web App开发.rar"中,我们可以深入学习如何构建一个完整的移动Web应用程序,特别是在微信朋友圈环境下的应用。移动Web开发是当前互联网技术领域中的一个重要分支,它涉及到多种技术和...
网络连接的不稳定性也是移动开发的一个重要考虑因素,因此,离线存储、数据同步和网络状态检测的策略可能会被提及。 移动互联网应用开发不仅限于Web应用,还包括原生应用的开发,如使用Android Studio和iOS的Swift...
### 移动端开发最佳实践概述 在当前数字化时代,移动端应用开发已成为企业与个人连接用户、提升用户体验的关键环节。本文档旨在分享一系列移动端APP开发的最佳实践,涵盖从设计到编码的全过程,帮助开发者构建高...
HTML5和CSS3是现代网页开发的两大核心技术,它们为移动Web开发提供了强大的工具和功能。在"HTML5CSS3移动Web开发实战-PPT.zip"这个压缩包中,我们可以期待找到一系列关于如何利用这些技术来构建响应式、交互性强且...
综上所述,《Web前端开发技术储久良第三版答案》不仅包含了前端开发的基础知识,还涉及了高级技术和最佳实践,是学习和提升Web前端技能的宝贵资源。通过深入学习和实践书中的答案,开发者可以更好地掌握前端开发的...
响应式Web设计是一种现代网页设计方法,...总的来说,通过学习这本书,你不仅可以掌握响应式设计的基本原理,还能深入了解HTML5和CSS3的新特性和最佳实践,从而在移动优先的设计理念下,创造出既美观又实用的现代网页。
- **最佳实践**:Cederholm还分享了一些使用CSS3时的最佳实践建议,帮助设计师避免常见陷阱并提高工作效率。 #### 理解CSS过渡(Transitions) 第二章《Understanding CSS Transitions》专注于CSS3中的过渡效果,...
5. **最佳实践与工具** 在移动WEB开发过程中,开发者应遵循W3C的Web标准,利用响应式设计和适配技术,确保页面在不同屏幕尺寸下表现良好。同时,利用自动化测试工具(如Sauce Labs、BrowserStack)进行跨设备测试,...