从事前端开发必须要了解的CSS原理

标签: geek | 发表时间:2017-06-30 00:00 | 作者:
出处:http://itindex.net/relian

  从事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 的优点

  什么是 CSS?

  • 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有微妙的速度优势)。

如果你在学习前端的过程中遇到什么问题或者想获取学习资源的话,欢迎加入 前端学习交流QQ群:328058344 我们一起学前端!

相关 [前端 开发 css] 推荐:

从事前端开发必须要了解的CSS原理

- - IT瘾-geek
  从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢. 当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢.   一、浏览器的发展与CSS.   网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页, HTTP 容许网页浏览器送交资料到网页服务器并且获取网页.

为什么 Web 前端开发不抛弃 HTML 和 CSS,用纯 JavaScript 开发?

- - 知乎每日精选
首先要确定,即使抛开游戏不论,一般的Web应用或者网站,完全用JavaScript开发也是可行的. 比如ExtJS、webOS的Enyo等. 但是主流Web开发很少采用全JS的方案. 注重考虑那些无法运行JS的用户代理. 用户使用不支持JS的浏览器(比如较老的手机浏览器),或者禁用脚本. 当然你可以选择忽略这一小撮用户,尤其是现在绝大多数网站和应用也是如此选择的,但是至少我们应该对坚持考虑无JS情况的开发者予以基本的尊重.

前端CSS规范整理

- - 标点符
1、文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解:. 所有的CSS分为两大类:通用类和业务类. 通用的CSS文件,放在如下目录中:. 基本样式库 /css/core. 通用UI元素样式库 /css/lib. JS组件相关样式库 /css/ui. 业务类的CSS是指和具体产品相关的文件,放在如下目录中:.

(转)豆瓣css开发规范

- Hu DongHai - 小豪~麦穗的部落格
今天无意间看到了豆瓣的一些前端开发规范,攻城师作战指南. 里面的Javascript代码风格规范 差不多就是基本的javascript规范,主要还是分享一下 css部分的规范. 因为规范是在google docs上,需要穿过篱笆,所以我就直接帖过来了,一起学习一下哈. ——————————————–华丽的分割线————————————————.

10 个加速 CSS 开发的框架

- Tairan Wang - ITeye资讯频道
CSS 可以做很多事情,但开发者更习惯的是变量、常量和一般的更快速的语法,而 CSS 本身是不支持的. 本文介绍了 10 个 CSS 预处理器,让 CSS 支持一些简单的编程语法,使Web开发更高效. Compass 是一个开源的 CSS 制作框架. 针对个人框架开发时,其非常简单、易用. 这是一个很棒的 CSS 预处理器,可以让开发者制作插件,要求 PHP 以及 Apache (mod_deflate 和 mod_rewrite).

高效CSS开发核心要点

- - blog.moocss.com
本文参考了业界规范及主流趋势,详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题,希望对您有所帮助,也可收藏作为参考. 本文来源:http://www.ituring.com.cn/article/1745. 1.1 把CSS放在HTML页面头部. 由于浏览器需要在所有的样式表加载完成后才能开始渲染页面,样式表加载完成之前页面会一直显示空白,因此需要将样式表放在头部.

网易邮箱的CSS开发(一)

- - 博客 - 伯乐在线
网易邮箱是个庞大而且细节繁多的系统,注定了前端开发中样式管理的复杂程度非常高. 如果没有一个合理的体系来管理样式,开发和维护的难度是不可想象的. 从极速3.5版本开始,我们就一直遵循并不断改善这套规则,现在就来分享一下~. 在错综复杂的样式面前,CSS显得过于简陋. 于是我们不得不人为的加上一些思维方式和规则来帮助我们管理样式.

前端设计中的浏览器CSS Hack汇总

- Myheimu - UED TEAM,用户体验设计,web前端开发
CSS Hack是我们解决浏览器兼容性(尤其是IE各版本)问题的常用手段. CSS Hack的手法可以说是五花八门,使用时经常混淆. js代码 /***** Selector Hacks ******/. /* IE6及更低版本浏览器 */. /* IE8, FF, Saf, Opera (除了IE 6、7的所有浏览器) */.

前端代码标准最佳实践:CSS

- - CSDN博客推荐文章
上一篇《 前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高. 这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能. 那么接着上一篇,我们再来谈谈CSS代码的一些标准实践.

16个非常有用的前端CSS框架

- - Jackchen Design 1984
网页是设计风格渐渐走向几个特点. 一种是创意类而另一种就是框架类. 创意类的网页是让网页更趋向于艺术风格,而框架类的网页则是为了加快网页设计的开发速度以及各种标准化的统一管理. 好的团队都会用一种高效的框架来进行快速开发. 更牛的团队会相应的开发自己的框架,或者对一些开源框架进行二次定制修改来更大程度的发挥效用.