Web开发之CSS

  Web开发,除了后台开发和数据开发,很大一块是前端开发。前端开发中使用最大的技术是:HTML(现在也有项目开始使用HTML5了,比如沪江英语的听力曲线使用html5 canvas绘制的),CSS(这个也有一个新版本,CSS3.0。很多应用出现圆角效果,估计都使用到了3.0的新特性),Javascript(其实这个也有版本的哦!盛大的权一大师就在研究ECMAScript5了),一个javascript框架,比如说jQuery,Dojo,YUI等等。

  主要讲解CSS性能调优,内容涉及一下几个方面。 1.Style标签的调优 2.特殊CSS样式的使用 3.CSS的缩写 4.CSS的声明(省略) 5.CSS的选择器 第一点:  把Stylesheets文件放在HTML页面的头部,把Javascript文件放在页面的底部。这也是《高性能网站开发》中的建议方法。对于 @import 和 <link> 两种加载外部 CSS 文件的方式:@import 就相当于是把 <link> 标签放在页面的底部,所以从优化性能的角度看,应该尽量避免使用 @import 命令。

第二点:  避免是有某一特定浏览器的技术的。比如IE支持的CSS Expression和AlphaImageLoader Filter。

第三点:  CSS的缩写。原来把 #FFFFFF写成#FFF也是可以减小代码量,提高性能的呀!在项目中PM经常会指导我们,把Font-style: italic; Font-variant: small-caps; Font-weight: bold; Font-size: 1em; Line-height: 140%; Font-family: sans-serif; 写成一行,font: italic small-caps bold 1em 140% sans-serief。不过这个对于熟练的工程师来说还好,但是对于初学者来说,这样的样式不够清晰易懂。因为我没有分析过浏览器解析和渲染样式的原理,写成一句是否真的有利于各个浏览器提供性能。我还是不敢肯定。

第四点:  CSS选择器。周祥老师给出了这个例子,让我大吃一惊。 示例一:Child Selector #toc > li {font-weight: bold} ,他说:浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向左来进行匹配的。这里,浏览器首先会查找页面上所有的“li”节点,然后再去做进一步的判断:如果它的父节点的 id 为“toc”,则匹配成功。PS:不过我们项目基本不用这个样式,因为IE6不支持子代选择器。不过他在后面列举 示例二:Descendant selector #toc  li {font-weight: bold} ,这个效率比之前的“child selector”效率更慢,而且要慢很多。浏览器先便利所有的“li”节点,然后步步上溯其父节点,直到 DOM 结构的根节点(document),如果有某个节点的 id 为“toc”,则匹配成功,否则继续查找下一个“li”节点。不是吧!这个样式在我们开发的Web项目中用到的特别多呀!不过我们现在也逐步习惯一级一级的定位元素,减少浏览器在DOM结果查找的节点的时间。 如果一个标签有id,直接使用ID seletor,比如 <div id="footer"></div>,不要写 div#footer,查找效率很低。但是关于class选择器,我倒是觉得可以使用tag和class同时定位,有时需要这样的需要。      treehead treerow treecell {...} ----->> treehead > treerow > treecell {...} Descendant 选择器是耗时相对高的选择器,通常来讲,它在 CSS 里的使用应该是尽量避免的,如果能用 child 选择器替代就应该尽量这样去做。还是那个原因,IE6不支持,所以不使用这个。

同时推荐2本淘宝工程师翻译的书,确实不错。目前看完第一本,正在看第二本。作者是前Google Web工程师,翻译都是由口碑前端团队完成的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(一)

一、不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用...

3375
来自专栏数据小魔方

这种自带黑科技的R包,请给我来一打

今天要介绍的这个R包,有些特别! 它即不能做可视化,也不能用来抓数据! 它的核心功能是抓拍,对,你没听错,就是抓取,和狗仔差不多! 而且专门抓拍网页,有点儿类似...

37516
来自专栏web前端

用jQuery+easyUI遇到的几个插件与文件详解

很早就开始跟着老师学习jQuery课程,那时候是要求熟练使用jQuery中的easyUI插件中的控件,包括textbox、combobox、panel、chec...

18510
来自专栏鹅厂优文

鹅厂优文 | ReactJS一点通

当React 刚开始红的时候,一直觉得 JSX 的设计思想极其独特,属于革命性的创新,它性能出众,代码逻辑却非常简单。

1.1K4
来自专栏liulun

学习WPF——使用Font-Awesome图标字体

图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可...

3115
来自专栏张戈的专栏

解决SecureCRT的vim中为下划线而无高亮问题,附最佳护眼配色方案。

今天第一天上班,发现新公司也是用的最熟悉的 SecureCRT 终端。领到自己的办公电脑后,第一件事就是下载并安装了 SecureCRT 7.1。并设置了以前最...

5495
来自专栏hrscy

iOS百度地图开发中遇到的问题

由于项目需要地图功能,公司决定使用百度地图,但是百度地图也有很多问题,现在总结一下在百度地图中遇到的坑,希望给各位看官一点参考,避免走一些弯路.我使用的百度地图...

702
来自专栏腾讯NEXT学位

React.JS一点通

972
来自专栏腾讯社交用户体验设计

SVG fallback 及可读性

1373
来自专栏知道一点点

bootstrap快速入门笔记(二)-栅格系统,响应式类

1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列

2143

扫码关注云+社区

领取腾讯云代金券