`
panzertank
  • 浏览: 16176 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

    博客分类:
  • CSS
 
阅读更多

(转)http://www.open-open.com/bbs/view/1348305538150

 

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

分享到:
评论

相关推荐

    HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计.zip

    通过这样的实践,不仅可以巩固理论知识,还能提升解决实际问题的能力,为未来从事web前端开发工作打下坚实基础。 在完成这个大作业的过程中,学生可能会涉及以下几个关键知识点: 1. HTML5新特性:了解并熟练使用...

    前端开发之CSS原理详解

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

    web前端开发工程师的工作职责.doc

    Web 前端开发工程师是指从事 Web 前端开发工作的人员,负责网站或应用程序的用户界面设计、开发和实现。他们需要具备良好的编程能力、设计能力和沟通能力,并且能够与后台工程师和设计师进行良好的沟通和协作。 一...

    Web前端开发职业标准串讲(初级)

    【Web前端开发职业标准串讲(初级)】 Web前端开发是IT行业中一个至关重要的领域,主要涉及构建用户在互联网上看到和交互的网页内容。初级Web前端开发职业标准旨在为初学者提供基础的技能和知识,使他们能够入门并...

    前端面试必备1000题HTML+CSS+JS

    在前端开发领域,HTML、CSS和JavaScript是三大基础技术,对于任何想要从事或者提升自己前端技能的开发者来说,深入理解和熟练掌握这三者至关重要。"前端面试必备1000题HTML+CSS+JS"是一个全面的题库,旨在帮助准备...

    web前端实习报告.zip

    这份报告对于学习Web前端开发的初学者以及有志于从事该领域的人来说,具有很高的参考价值。以下是报告中的主要知识点: 1. **HTML基础**:HTML是构建网页的基础,报告中详细介绍了HTML5的新特性,如语义化标签...

    web课程设计 网页设计 包含js,div+css布局

    这些技术是构建现代网页不可或缺的部分,对于任何想要从事Web开发的人来说,理解和掌握它们至关重要。 首先,JavaScript是一种强大的编程语言,它为网页提供了动态交互性。JavaScript可以处理用户输入、更新内容、...

    基于python+html+css+javascript开发的运维自动化开发项目【前端源码+后端源码+数据库SQL】.zip

    这是一个基于Python、HTML、CSS和JavaScript技术开发的运维自动化项目,包含了完整的前端源码、后端源码以及数据库SQL文件。这个项目的核心目标是利用编程技术来提升IT运维的效率和准确性,通过自动化处理日常的系统...

    整理的前端 学习笔记资料

    因此,"前端 学习笔记.zip"的资料对于正在学习或已经从事前端开发的人员来说,是一份宝贵的资源,能够帮助他们深化理解,解决问题,提升技能。通过深入阅读和实践,开发者可以不断磨练自己的前端技能,从而在Web应用...

    2023 大厂前端面试攻略.pdf

    为了帮助想要从事前端工作的朋友们更好地备战面试,本笔记将对2023大厂前端面试攻略的要点进行总结和剖析。 HTML语义化标签 HTML语义化标签是前端开发中非常重要的一部分,主要是为了让浏览器更好地理解网页的结构...

    Head first html & css深入浅出html and css中文PDF

    HTML(HyperText Markup Language)和CSS(Cascading Style Sheets)是构建网页和网页设计的基础技术。这本书《Head First ...无论你是想从事网页设计工作,还是想要为个人项目创建网页,这本书都是一个很好的起点。

    《图解CSS3核心技术与案例实战》PDF+源代码

    《图解CSS3核心技术与案例实战》PDF,配套源代码。《图解CSS3核心技术与案例实战》将CSS3特性按模块功能分类,通过理论、...能帮助从事CSS3开发的前端工程师 系统掌握CSS3的各项知识,提升技术水平和业务能力。  

    微信小程序项目实例-烘焙电商小程序源码纯前端项目

    微信小程序是一种轻量级的应用开发平台,主要针对移动端,由腾讯公司推出,旨在提供便捷的、无需安装即可使用的在线服务。...对于想要从事前端开发,尤其是微信小程序开发的同学来说,这是一个非常有价值的实践项目。

    韩顺平html+css+javascript笔记完整版

    这份资料以韩顺平老师的专业讲解为基础,旨在帮助学习者深入理解和掌握前端开发的核心原理。 HTML是构建网页的基础,它定义了网页的结构。笔记中详细介绍了HTML的各种元素、属性以及它们的用法。从基础的文本、图像...

    div+css布局入门教程PDF

    《div+css布局入门教程》是一本专门为初学者...学习并掌握div+css布局对于任何想要从事网页设计或者前端开发的人来说都是必不可少的。通过深入学习本教程,你将能够创建出美观且功能强大的网页,开启你的网页设计之旅。

    精通CSS层叠样式表

    **精通CSS层叠样式表** CSS(Cascading Style Sheets)是用于控制网页元素呈现方式的一种语言,它赋予HTML或XML文档结构与...无论你是准备从事前端开发,还是提升现有技能,这都是一个值得投入时间学习的宝贵资源。

    WebGIS原理与应用开发源代码

    通过学习和实践《WebGIS原理与应用开发》的源代码,读者不仅可以掌握WebGIS的基本原理,还能了解如何将这些原理应用于实际项目中,例如构建在线地图应用、实现空间数据的查询和分析、设计互动式地图等。这有助于提升...

    web标准常见问题集合(CSS).rar

    学习和掌握Web标准,特别是CSS,对于任何想要从事前端开发的人来说都是至关重要的。这不仅可以提升网页的视觉效果,还能提高用户体验和搜索引擎优化。通过深入研究“web标准常见问题集合(CSS)”这个资源,开发者可以...

Global site tag (gtag.js) - Google Analytics