iview做的网站,xampp wordpress 手机访问,网络销售怎么做自己的网站,专业营销网站公司一、浏览器的发展与CSS 网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页#xff0c; HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1#xff0c;这个协议在 RFC2616 中被完整定义。HTTP/1.1 有其一套 Internet Explorer 并不完…一、浏览器的发展与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工作组产生和维护的。 采用 CSSDIV 进行网页重构相对与传统的 TABLE 网页布局而具有以下3个显著优势 1. 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。 2. 提高页面浏览速度。对于同一个页面视觉效果采用 CSSDIV 重构的页面容量要比 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有微妙的速度优势。转载于:https://www.cnblogs.com/JoannaQ/archive/2012/10/02/2710063.html
