页面重构技能-Javascript、CSS篇

所属分类: 网页制作 / 应用技巧 阅读数: 269
收藏 0 赞 0 分享

About JS、CSS

CSS:

  1. 样式表置于顶部
  2. 避免CSS表达式
  3. 使用外部JS、CSS
  4. 削减JS、CSS
  5. <link> ,@import
  6. 避免滤镜

JS:

  1. 脚本置于底部
  2. 使用外部JS、CSS
  3. 削减JS、CSS
  4. 不用重复脚本
  5. 减少访问和操作DOM
  6. 事件委托

1、样式表置顶,Why?

浏览器渲染页面都是自上而下的渲染,当在<body>里遇到<link>或是<style>时候会阻塞渲染页面,而且也有可能会造成页面重绘,就好像格子铺里,东西都按顺序摆好了,但是老板说,这个东西得这样、那样摆,又得挨个重新摆了。除此之外,加在<head>里是为了可以顺序加载所需的样式。

2、避免CSS表达式,Why?

很多人包括我在内,当学习到CSS表达式时候,都说避免或不要用它,所以都偷懒的不用看了,包括JS里的eval一样……

后来有一次项目我就偏偏用了一次,结果。。。它成为了最后查出来的BUG。。。(IE6下影响了页面样式)

其实CSS表达式最主要的弊端是它影响性能,要知道CSS是具有时效性的,也就是说,当你修改一下样式,它会马上生效,

而改变窗口大小,滚动页面甚至移动鼠标都会触发表达式进行频繁的求值,会严重影响,所以要尽量避免。

3、使用外部JS、CSS,Why?

我们都知道使用外部文件会增加HTTP请求,但是由于缓存的关系,当用户再次访问时,或者访问其它页面里相同的文件时候,页面会明显提升响应速度,而且,还有一点好处就是外部JSS、CSS可以减少页面内的文档大小。

4、削减JS、CSS,Why?

这个不用说了……你说为什么?

5、用<link>,@import,Why?

先来看看两者区别:

区别1:老祖宗的差别。@import完全是CSS提供的一种方式,link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:加载顺序的差别。link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:兼容性的差别。link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:使用dom控制样式时的差别。link支持使用Javascript控制DOM去改变样式;而@import不支持。

两者比较,@import明显弱爆了……

6、避免使用滤镜,Why?

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。

7、脚本置于底部,Why?

脚本的问题就是当浏览器渲染时候遇到<script>,就会跑去下载,然后执行里面的JS,这期间页面就会阻塞,等待完事了再继续向下执行。所以,为了先将页面最快的呈现给用户,JS应放在</body>的上面。

8、减少访问、操作DOM,Why?

访问:在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JS看成另一个岛屿,两者之间以一座收费桥连接”。

操作:修改和访问DOM元素会造成页面的Repaint和Reflow,也就是重绘和回流。

所以问题显而易见。

解决方案:缓存已经访问过的有关元素

       更新完节点之后再将它们一次性添加到文档树中

9、事件委托,Why?

事件委托,也就是利用事件冒泡的机制,把事件绑定到元素对象的父元素上。

例如:一个多行的表格,含有经过提示行效果,并且表格会随着分页经行变化。

分析:鉴于上面的第7条,我们不能牺牲性能去为每个变化的行元素绑定事件。

解决方案:把事件绑定到table的父元素上,根据e.target(e.secElement)的节点类型判断来进行操作

更多精彩内容其他人还在看

更受欢迎 更具创造性的深底色网页设计实例

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。
收藏 0 赞 0 分享

有创意的关于我们网页页面设计

本文收集了一些“关于我们”网页页面,60个漂亮的有效果的对用户非常友好的关于我们页面的设计实例。希望你能从中获得设计灵感。
收藏 0 赞 0 分享

整洁漂亮的网页设计的4项原则

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这4项原则就是:反差, 重复, 排列, 和分类。
收藏 0 赞 0 分享

设计参考 WordPress建站成功案例

最近国外有个牛人收集了 16 个专门收集 wordpress 精彩建站案例的网站,对于每一个 wordpress 迷来说,这都是一份大礼。
收藏 0 赞 0 分享

新闻风格网站设计实例25个

杂志和新闻风格设计越来越流行了。像Wordpress之类的内容管理系统对此类网站有比较多的模板选择,可以让普通的站长或博主轻松实现一个很像新闻网站的网站。在本文中,我们将推荐25个可以为你提供灵感的杂志风格网站设计。
收藏 0 赞 0 分享

网页文字设计应该像聪明女孩穿衣服

  这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美丽的一面的。界面设计何尝不是如此?那就让我们来看看聪明女人的穿衣之道里有没有什么做设计可以借鉴的地方
收藏 0 赞 0 分享

怎样设计网页?怎样制作网页?

  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。   其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓“功夫在诗外”
收藏 0 赞 0 分享

网页可读性提高的几个方法

1. 使用对比色 (Use contrasting colours). 这里说的对比是文字的颜色和背景色的对比。这样用户可以比较容易的看清文字,减少阅读疲劳。有视力障碍的人可能看不清楚低对比度的文字。可以去Vischeck这个网站可以看看你的网站在色弱(或色盲)用户眼中的样子。
收藏 0 赞 0 分享

网页设计心得:页面布局的简单规则

·重复:在整个站点中重复实现某些页面设计风格。   重复的成分可能是某种字体、标题logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。   颜色作为重复成分也很有用:为所有标题设置某种颜色,或者在标题背后使用精细的背景。 &middo
收藏 0 赞 0 分享

网页设计人员应该注意的43个Web设计错误

这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。 1. 用户必须
收藏 0 赞 0 分享
查看更多