一、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前端开发基本概况和相关最佳实践。
因此,一本介绍移动Web开发的书籍便成为开发者最渴望的资源之一。 基于上述两种原因,作者认为需要编写一本能够利用HTML5新技术开发移动Web应用的入门书籍,令广大读者在真正学习到HTML5新技术的同时,也能快速掌握...
的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。 Excetional ...
要大保持干净的所有元素一致化的 reset 才是最佳实践。 为什么不是 Han 这个项目? 2、class="typo" 阅读内容排版 在文章/文档阅读的页面,需添加 .typo 这个 class,这样 table/ol/ul 等都会有预定的样式,让你的...
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...
《JavaScript DOM编程艺术(第2版)》在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的JavaScript编程原则和最佳实践,并全面探讨了...
模板包括web开发的最佳实践,您可以创建伟大的网站布局基于Bootstrap网格系统。 主要特色 基于Bootstrap4. x 100%的响应 干净的CSS 漂亮和干净的设计 清洁和注释代码 有效的HTML5和CSS3 35 +所有页面 6 +主页 6 +...
Bruce Lawson是Opera软件的开放Web专家,是web标准项目组可访问性任务组和W3C的移动web最佳实践组的成员。 Remy sharp是--位开发者、演讲者和博主,他有几本书即将出版。Remy在布莱顿运营着自己的开发公司Left ...
它允许开发人员在一个框架中通过常用的习惯用语和最佳实践来创建可伸缩的单页面应用程序。该框架提供丰富的对象模型、声明性双向数据绑定、计算属性,Handlebars.js提供的自动更新模板,以及一个路由器管理应用程序...
* JavaScript 代码最佳实践、移动 H5 前端性能优化指南、浏览器渲染性能优化 开发和部署 * 前端代码优化、网络请求、页面提速方法、Chrome 开发者工具的使用 * JavaScript 内存优化、javascript 事件优化、页面...
我们在高影响力项目的前端和后端方面的设计和开发以及为其他开发人员之间更好地协作而制定最佳实践的标准方面具有丰富的经验。 编程语言: HTML | CSS | JavaScript | 打字稿| PHP | C#| Python | Java | Kotlin| ...
basic.html - (IE8+) 无布局,但仍包含我们最小的移动最佳实践 请务必查看以验证您的环境是否已准备好运行 WSK。 一旦您确认您的系统可以运行 WSK,请查看可用的以开始使用。 网络性能 Web Starter Kit 致力于为您...
的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。 Excetional ...
翻译MSDN文章 —— 泛型FAQ:最佳实践 Visual C# 3.0 新特性概览 C# 2.0会给我们带来什么 泛型技巧系列:如何提供类型参数之间的转换 C#2.0 - Object Pool 简单实现 Attributes in C# 手痒痒,也来个c# 2.0 object ...
这份118套响应式网站模板的HTML源码合集是前端开发领域的...这套源码非常适合作为毕业设计、课程设计或大型作业的参考模板,它不仅能帮助学生们快速搭建起专业级别的网站,还能在实践中深化对Web前端技术的理解和应用。