JavaScript和CSS的优化提高网站性能

      在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:
CSS:

  1. 把样式表置于顶部
  2. 避免使用CSS表达式(Expression)
  3. 使用外部JavaScript和CSS
  4. 削减JavaScript和CSS
  5. 用<link>代替@import
  6. 避免使用滤镜

JavaScript

  1. 把脚本置于页面底部
  2. 使用外部JavaScript和CSS
  3. 削减JavaScript和CSS
  4. 剔除重复脚本
  5. 减少DOM访问
  6. 开发智能事件处理程序

17、把样式表置于顶部

      在研究Yahoo!的性能表现时,我们发现把样式表放到文档的<head />内部似乎会加快页面的下载速度。这是因为把样式表放到<head />内会使页面有步骤的加载显示。

      注重性能的前端服务器往往希望页面有秩序地加载。同时,我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户返回可视化的反馈,比如进程指针,已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。点击这里查看网页制作教程频道内容

      把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。

      HTML规范清楚指出样式表要放包含在页面的<head />区域内:“和<a />不同,<link />只能出现在文档的<head />区域内,尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文档<head />内加载你的样式表。       CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:

18、避免使用CSS表达式(Expression)

      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。

      表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

      一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。 

时间: 2025-01-21 20:05:37

JavaScript和CSS的优化提高网站性能的相关文章

JavaScript提高网站性能优化的建议(二)_javascript技巧

在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为

提高网站性能中内容有关的10条原则

英文地址:http://developer.yahoo.com/performance/rules.html Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心就是旨在提高网站性能. Excetional Performance团队总结出了一系列可以提高网站速度的方法.可以分为7大类34条.包括内容.服务器.cookie.CSS.JavaScript.

提高网站性能中网站服务器的改进

在本系列的第一节中,讲了 提高网站性能中网站"内容"有关的10条原则 .除了在网站在内容上的改进外,在网站服务器端上也有需要注意和改进的地方,它们包括: 使用内容分发网络 为文件头指定Expires或Cache-Control Gzip压缩文件内容 配置ETag 尽早刷新输出缓冲 使用GET来完成AJAX请求 11.使用内容分发网络 用户与你网站服务器的接近程度会影响响应时间的长短.把你的网站内容分散到多个.处于不同地域位置的服务器上可以加快下载速度.但是首先我们应该做些什么呢? 按地

用CSS开启硬件加速来提高网站性能

国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css   你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多

JavaScript关于提高网站性能的几点建议(一)_javascript技巧

近在学习<高性能网站建设指南>这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看. 性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片.脚本.样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上   --Steve Sounders 1 文件合并(减少HTTP请求数量) CSS Sprites   利用css s

ASP.NET 4进行SEO优化提高网站排名和权重

ASP.NET 4包括了一系列新的运行时特性,可以帮助你进一步优化你的网站.其中一些新特性可以用来进行SEO优化以提高网站在搜索引擎中的排名和权重,这些特性包括: 新的Page.MetaKeywords 和 Page.MetaDescription 属性 针对ASP.NET Web Forms的新URL导向支持 新的Response.RedirectPermanent() 方法 下面是如何利用这些特性来进一步提高搜索引擎相关性的细节. Page.MetaKeywords 和 Page.MetaD

四个简单的站内优化 提高网站排名

站长每天都会根据自己的网站情况调整一系列的优化策略,而更多的站长对于站内优化的重视程度还不高,致使大部分时候因为站内优化处理做得不好,而使得网站排名达不到应有的高度.相对来说,现在的网站优化不再是以站外优化为主了,搜索引挚更注重的用户体验则是发生在站内的,所以搜索引挚也明显的开始重视站内的优化细节. 最普通的站内优化细节如标题.图片ALT标签.导航等等之类的非常基本也是非常重要的细节处理.也只有在站外优化做好的同时做好站内优化细节的处理才能达到双剑合壁达到一个完美的排名高度.而今天笔者主要跟大家

优化DotNetNuke网站性能的10个技巧

随着越来越多的人开始应用DNN,被问到最多的一个问题就是如何提高DNN的运行速度?默认的DNN配置并不是最优化的配置,在这里就和大家分享一下优化DNN的技巧.以下的这些配置是目前为止我所发现的最佳基准配置,依据不同的主机运行环境,更新频率,访问量,以及用户数量,网站的优化配置会有些不同.经过优化的DNN也是可以运行得很快的. 以下我将使用DNN5.01中文版示范,这些技巧同样适用于DNN4.x. 1. 主机管理 -> 主机设置中的基本优化 首先我们来优化主机设置,我仅在这里指出关键的设置 外观

提高网站性能之 如何对待JavaScript_javascript技巧

尤其是JavaScript 文件,在下载它时,并行下载实际上是被禁用的,并且还会阻塞页面的呈现! 关于JavaScript 的下载 在下载JavaScript 脚本文件时,浏览器不会并行启动其它下载,而是让JavaScript 脚本文件单独下载完毕后,再继续其它请求.这将对页面的整体性能是一个很大的问题,解决方案如下: 解决方案1:将JavaScript 脚本内联在页面中,即直接将JavaScript 脚本写在HTML标签中. 优点:速度最快.在大型网站的首页中,可以合理的将JavaScript