前端那些事儿 - 记录前端开发的那些事儿！生活记录|创意激发|技术交流|网络梦想！

CSS渲染原理

Jimco — Sun, 13 May 2012 11:30:06 +0000

从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？

一、浏览器的发展与CSS

网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1，这个协议在RFC2616中被完整定义。HTTP/1.1 有其一套Internet Explorer并不完全支援的标准，然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以URL（统一资源定位符）指示，此乃网页的地址；以http:开首的便是通过 HTTP协议登陆。很多浏览器同时支援其他类型的URL及协议，例如ftp:是FTP（档案传送协议）、gopher:是Gopher及https: 是 HTTPS（以SSL加密的HTTP）。

早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的HTML代码的产生。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。伯特·波斯（BertBos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式,这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2007年为止，第三版还未完备。

二、浏览器是如何渲染页面和加载页面

为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始：

1. 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。

3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。

4. 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。

5. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。

6. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

这里关键的是第2-5这三点。渲染效率与下面三点有关：

1. css选择器的查询定位效率

2. 浏览器的渲染模式和算法

3. 要进行渲染内容的大小

三、什么是CSS以及CSS的优点

什么是Cascading Style Sheets（层叠样式表）

-CSS是Cascading Style Sheets(层叠样式表)的简称.

-CSS 语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).*在标准网页设计中CSS负责网页内容 (XHTML)的表现.

-CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.

-可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.

-CSS是由W3C的CSS工作组产生和维护的。

采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优势：

1. 表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2. 提高页面浏览速度对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3. 易于维护和改版你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

四、浏览器对CSS的匹配原理

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为 divBox的div元素，如果都存在则CSS匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。firefox称这种查找方式为keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。

五、优化你的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：

1、不要在ID选择器前使用标签名

一般写法：DIV#divBox

更好写法：#divBox

解释：因为ID选择器是唯一的，加上div反而增加不必要的CSS匹配。

2、不要在class选择器前使用标签名

一般写法：span.red

更好写法：.red

解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：

p.red{color:red;}

span.red{color:#ff00ff}

如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写

3、尽量少使用层级关系

一般写法：#divBoxp.red{color:red;}

更好写法：.red{..}

4、使用class代替层级关系

一般写法：#divBox ul li a{display:block;}

更好写法：.block{display:block;}

5、在css渲染效率中id和class的效率是基本相当的

class最在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微妙的速度优势）。

自适应网页设计

Jimco — Thu, 03 May 2012 03:20:26 +0000

随着3G的普及，越来越多的人使用手机上网。

移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

一、"自适应网页设计"的概念

2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。

如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。

如果屏幕宽度在400像素以下，则6张图片分成三行。

mediaqueri.es上面有更多这样的例子。

这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。

二、允许网页宽度自动调整

"自适应网页设计"到底是怎么做到的？其实并不难。

首先，在网页代码的头部，加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

三、不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

四、相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {
　　　　font: normal 100% Helvetica, Arial, sans-serif;
　　}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {
　　　　font-size: 1.5em; 
　　}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small {
　　　　font-size: 0.875em;
　　}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

五、流动布局（fluid grid）

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {
　　　　float: right;
　　　　width: 70%; 
　　}
　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

六、选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

七、CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}
　　　　#sidebar {
　　　　　　display:none;
　　　　}
　　}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

八、图片的自适应（fluid image）

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {
　　　　var imgs = document.getElementById("content").getElementsByTagName("img");
　　　　imgSizer.collate(imgs);
　　});

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

转载自 - 阮一峰的网络日志

智能手机的又一电池杀手：网站代码

Jimco — Fri, 27 Apr 2012 15:05:17 +0000

如果你经常泡智能手机论坛，你会发现几乎每个手机论坛都会有一个类似的经典帖子，帖子标题通常是《如何让你的 ××× 待机超过两天》《××× 省电大法》等等……再看看这类帖子的发帖时间，你会发现它们历史都比较久远，并且回复量大、经久不衰是它们的一致特点。

而这些帖子的内容都大同小异：必有的是关闭 3G，关闭蜂窝数据，关闭定位服务，调低屏幕亮度，稍稍高级点的就是删进程，关后台等等。以上列举的都是属于用户的可控因素，然而有一些因素却是不可控的，比如耗电惊人的移动广告，还有就是你所浏览的网站使用的代码——大多数人可能都不知道浏览没有为移动设备优化的网页同样会“吃光你的电池”。为什么？

近日，来自斯坦福大学的一个调查小组经过实验证明：不恰当的网站编码方式会给智能手机带来额外的电量消耗。

以 Wikipedia 为例，不影响用户体验的情况下对 Wikipedia 移动站点的代码进行优化，可以为智能手机省下 30% 的电量。

对“要功能性更要持久性的智能手机”来说，30% 的电量显然可以为用户“争取到宝贵的使用时间”。

那么网站应该在哪些方面针对智能手机进行优化可以达到最好的省电效果呢？主要有以下几点：

1、使用 HTML 链接，而不是 JavaScript。Gmail 移动版正是凭借这一点夺得了“最环保”（消耗电量最少）的移动网站称号。与之相对应，消耗电量最多的是 Apple 官网。

2、使用 HTML 表格元素，而不是用 CSS。在这一方面 AOL （美国在线）的网站是一个好榜样。

3、图片格式最好选择 JPEG，而不是 PNG 或者 GIF 等。

该报告还指出，在移动化趋势愈演愈烈的今天，网站设计者不得不为越来越多的智能移动设备使用者考虑。设计出更加省电的网页，也许能够增强移动网站的粘性，让移动用户停留更长时间。

完整的调查报告请点击这里查看

转载自爱范儿 - www.ifanr.com

手机便签应用 - 0.1 Beta

Jimco — Sun, 22 Apr 2012 11:30:29 +0000

原计划是折腾上次没有完成的 js 模拟自定义滚动条，悲催的是精神恍惚，所以还是先整点简单的吧。想起昨天晚上刚和非常巴适讨论了关于 WebStorage + Appcan 的一些想法，简单实现了一下。

使用说明：

1、目前版本属于 0.1 beta 版，只提供 Android 支持；

2、安装开启之后若出现乱码或错误，请检查网络是否通畅，是否开启了 wifi 或数据流量，若关闭，请退出应用，开启 wifi 或数据流量之后重新登录；

3、测试版，下载请慎重！出现任何问题请在文章后留言反馈。

上图：

最后，放出 0.1 Android Beta版下载地址！点击下载

CSS强制英文、中文换行与不换行

Jimco — Mon, 16 Apr 2012 08:30:32 +0000

整理电脑文档，翻出一堆有用，没用的，温习修改后放出。

.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/

.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/

.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/

.p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/

.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}/*不换行，超出部分隐藏且以省略号形式出现*/

1、word-break:break-all;只对英文起作用，以字母作为换行依据

2、word-wrap:break-word; 只对英文起作用，以单词作为换行依据

3、white-space:pre-wrap; 只对中文起作用，强制换行

4、white-space:nowrap; 强制不换行，都起作用

5、white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现

注意：

一定要指定容器的宽度，不然的话是没有用的。

word-break 是IE5+专有属性。

语法：
word-break : normal | break-all | keep-all

参数：
normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行；
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本；
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。

说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。

也说自定义滚动条样式（1）

Jimco — Sun, 08 Apr 2012 12:39:41 +0000

这篇文章分两部分来和大家交流，之前对于自定义滚动条样式的实现一直不是很了解，因项目需求，临时抱佛脚，现学现卖。

先来说说如何通过 CSS 来实现。当然，兼容性依然是最令人蛋疼的问题。

IE兼容：

scrollbar-arrow-color: color; /* 三角箭头的颜色 */

scrollbar-face-color: color; /* 立体滚动条的颜色（包括箭头部分的背景色） */

scrollbar-3dlight-color: color; /* 立体滚动条亮边的颜色 */

scrollbar-highlight-color: color; /* 滚动条的高亮颜色（左阴影？） */

scrollbar-shadow-color: color; /* 立体滚动条阴影的颜色 */

scrollbar-darkshadow-color: color; /* 立体滚动条外阴影的颜色 */

scrollbar-track-color: color; /* 立体滚动条背景颜色 */

scrollbar-base-color: color; /* 滚动条的基色 */

IE 依旧是如此的销魂，就算是私有属性也只允许咱改改配色，艹！

webkit兼容：

/* 7个私有属性 */

::-webkit-scrollbar { /* 滚动条整体部分 */ }

::-webkit-scrollbar-button { /* 滚动条两端的按钮 */ }

::-webkit-scrollbar-track { /* 外层轨道 */ }

::-webkit-scrollbar-track-piece { /* 内层轨道，滚动条中间部分 */ }

::-webkit-scrollbar-thumb { /* 滑块 */ }

::-webkit-scrollbar-corner { /* 边角 */ }

::-webkit-resizer { /* 右下角拖动块 */ }


/* 11种滚动条类型（伪类） */
/* :horizontal（水平方向）和:vertical（垂直方向）使用的最频繁，其他很少使用 */

:horizontal

:vertical

:decrement

:increment

:start

:end

:double-butto

:single-button

:no-button

:corner-present

:window-inactive

很不幸 FF 目前还木有针对滚动条的样式实现的私有属性，所以只能通过另一个途径，js来模拟滚动条的实现，这是第2部分将要分享的内容。当然，本人的 js 依旧还很菜，到时如有描述不当的地方还请各路大神批评指正。

Demo

CSS压缩工具发布

Jimco — Sat, 31 Mar 2012 12:10:16 +0000

废话不多说！RT, 上一个 CSS 压缩工具，优化阶段，各种不稳定，看不上的兄弟们悠着点喷！！

传送门：http://www.xiejiancong.com/tools/css-min/

说说小米的这些日子

Jimco — Tue, 20 Mar 2012 15:20:29 +0000

开着酷狗的寂寞电台，伴着莫名的旋律……

转眼3月也要过去，小米的这段时间，学到很多，收获很多，偶尔想想我是怎么的就来了小米？匆匆的就和新浪前端开发班说了再见，因为各种原因未能留下，些许遗憾…还未从新浪 js 与 css 分开开发中缓过来，转眼来到小米 js 王道的环境中，不适应那是自然，但却是很庆幸能够来到小米，能够认识你们，给力的团队，给力的你们！

虽说在新浪有过一段时间的培训经历，因为是重构方向，对于 css 有些许粗浅的经验， js 却并没有深入的学习，至于项目经验那更是少的可怜，项目一上来，js 也就成了我的一大弱势，所以还得多多练习，多多积累。第一弹，放上改造后博客选项卡 js 代码，欢迎拍砖：

//快捷插件
var plug = {
  addEvent:function(obj, type, fn){
    if ( obj.attachEvent ) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
      obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
      obj.addEventListener( type, fn, false );        
  }
}
//封装
var tab = function(list,con,tag01,tag02,eventType){
  this.list=document.getElementById(list).getElementsByTagName(tag01);
  this.con=document.getElementById(con).getElementsByTagName(tag02);
  this.$event="on"+eventType;
}
tab.prototype.fn = function(){
  var me=this;
  for(var i=0;i
       寂寞在唱歌，伴着莫名的旋律，还有许多话，只在心里默默讲给自己听……

上一道 js 题

Jimco — Mon, 12 Mar 2012 12:10:42 +0000

团队 js 牛人永哥出的一道题目，拿出来和大家分享一下，先别看下面答案，你想得到吗？

var x;
// 在此处写一些代码，使下面分别弹出1、2
alert(x);
alert(x);

正解：

var x;
x = {
toString: function() {
var i = 0;
return function() { return ++i; };
}()
};
alert(x);
alert(x);

HTML5 - Canvas绘图基础

Jimco — Tue, 06 Mar 2012 06:50:17 +0000

在html5中我觉得最重要的就是引入了Canvas，使得我们可以在web中绘制各种图形。给人感觉单在这点上有点模糊我们web和桌面程序的感觉。之前对于canvas的研究不多，收集了一些基础知识和大家一起来学习学习：

我们可以获取canvas对象为 var c = document.getElementById("myCanvas"); 其应有js属性方法如下列举：

1、绘制渲染对象，c.getContext("2d"),获取2d绘图对象，无论我们调用多少次获取的对象都将是相同的对象。

2、绘制方法：

clearRect( x , y , width , height ) 清除制定矩形区域，

fillRect( x , y ,width ,height ) 绘制矩形，并以fillStyle填充。

fillText( text , x , y ) 绘制文字；

strokeRect( x , y , width , height ) 绘制矩形，以strokeStyle绘制边界。

beginPath ( ) : 开启路径的绘制,重置path为初始状态；

closePath ( ) : 绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线；

moveTo（x，y）：设置绘图其实坐标。

lineTo(x，y) : 绘制从当前其实位置到x，y直线。

fill ( )，stroke ( ) ，clip ( ) ：在完成绘制的最后的填充和边界轮廓，剪辑区域。

arc ( ) ：绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小；

rect( ) : 矩形路径;

drawImage（Imag img）：绘制图片；

quadraticCurveTo( ) : 二次样条曲线路径,参数两个控制点；

bezierCurveTo ( ) ：贝塞尔曲线，参数三个控制点；

createImageData,getImageData，putImageData : 为Canvas中像素数据。ImageData为记录width、height、和数据 data，其中data为我们色素的记录为 rgba，所以数组大小长度为width*height*4，顺序分别为rgba。getImageData为获取矩形区域像素，而putImageData则为设置矩形区域像素；

3、坐标变换：

translate ( x , y )：平移变换，原点移动到坐标( x , y )；

rotate ( a )：旋转变换，旋转a度角；

scale ( x , y )：伸缩变换；

save ( )，restore ( )：提供和一个堆栈，保存和恢复绘图状态，save将当前绘图状态压入堆栈，restore出栈，恢复绘图状态；

HTML5新标签解释及用法

Jimco — Tue, 28 Feb 2012 04:37:12 +0000

HTML5是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML5提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似

和标签，但有一定含义，例如

（网站导航块）和