首页 > 代码库 > web移动开发最佳实践之 css篇

web移动开发最佳实践之 css篇

2024-08-13 04:50:42   217人阅读

web移动开发最佳实践之 css篇

 

一、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="http://www.mamicode.com/img/logo.png" style="width: 100px; height: 100px;">

因为浏览器是分开下载各个图片的，声明了尺寸就可以提前确定排版，否则等到图片下载完成后才知道图片的尺寸信息，渲染过程就明显变慢了。

还有就是，声明图片尺寸的时候，应该是实际的尺寸。例如：一个图片实际尺寸是50*50，但是你希望它小一点，把尺寸声明为20*20，那么调整图片尺寸的过程就会耗费CPU资源、内存资源等，使渲染速度变慢。其次，这还会避免下载一个不必要的较大的图片，手机流量是有限的，这也是为用户节约资源。

声明图片尺寸的方式有3种（html，内联css，外联css）：

<img id="logo" src="http://www.mamicode.com/logo.jpg" alt="Company logo" height="100" width="100" /> <img id="logo" src="http://www.mamicode.com/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移动开发最佳实践之 css篇


联系
我们