zoukankan      html  css  js  c++  java
  • 十四条你绝对不能不知道的网页优化准责

      今天偶然在网上遇见一篇谈网页性能的文章,觉得其中很多地方还是可取的,特摘录至此与大家讨论分享。

      第一条:尽可能的减少HTTP的Request请求数:对于这一点我给予10分的肯定。

      大家可以用一些http请求监听的软件测试一下你的网站,这里我向大家推荐我最喜欢的firebug,这个插件功能强大,除了支持实时修改html,css外,还可以监听http请求,截获http中传递的get/post隐藏信息。你可以打开firebug的网络功能看看你的网站打开一个网页有多少个请求,js,css,gif,jpg,png……看看哪些请求让你的网页变的如此缓慢吧。因此第一步就是如何去减少这些请求。

      1. 用一个大图片代替多个小图片。

      2. 合并你的css文件。

      3. 合并你的javascript文件。

      第二条:使用即内容分发网络(Use a Content Delivery Network)CDN,即我们经常听说的电信专线,网通专线。很强大但不是人人都能享受这样的待遇的。所以打5分吧。

      现在有很多网站都用这项技术的,像天空,华军,迅雷等。当你接入这些网站的时候,它们会自动为你选择一台离你最近,网速最快的服务器。

      第三条:Add an Expires Header 添加周期头,这个没听说过,估且给个5分吧。

      这个也并非开发人员来控制,而是网站服务器管理员的职责。所以,如果作为开发人员的你不了解和明白也没有关系。还是把这个准则告诉公司的网站服务器管理员。

      第四条:Gzip Components 启用Gzip压缩,这个不用说了吧,大名鼎鼎的Gizp可以将一个160k左右的js压缩到16k左右,而且这个js是经过去空格这样的压缩的。应该打10分

      这个大家应该比较熟悉。Gzip的思想就是把文件先在服务器端进行压缩,然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员,而是网站服务器管理员的工作范畴,这里就不详细讲解了。如果你对此感兴趣,可以资讯贵公司的网站服务器管理人员。

      第五条:Put CSS at the Top 把CSS样式放在页面的上方。这点更多的与体验有关,没什么可讲的,网页设计的基础课了8分。

      无论是HTML还是XHTML还是CSS都是解释型的语言,而非编译型的。所以CSS到上方的话,那么浏览器解析结构的时候,就已经可以对页面进行渲染。这样就不会出现,页面结构光秃秃的先出来,然后CSS渲染,页面又突然华丽起来,这样太具有“戏剧性”的页面浏览体验了。

      第六条:Move Scripts to the Bottom 将脚本放在底部,对于这一点,我不置可否,保留意见吧。6分。

      原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和CSS正好相反,脚本应该放在页面的底部。

      第七条:Avoid CSS Expressions 避免使用CSS中的Expressions,反正我是不用啦,因为我不知道有这个东西。

      CSS中的Expressions其实也是一种if判断 首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——

    <style>
      input{background-color:expression((this.readOnly && this.readOnly==true)?”#0000ff”:”#ff0000″)}
    </style>
    <INPUT TYPE=”text” NAME=”">
    <INPUT TYPE=”text” NAME=”" readonly=”true”>
    

      这样css就可以根结一些情况分别使用不同的样式了。如果你对这个感兴趣可以阅读相关的文章—— 《CSS中的expression系列文章》。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候,那么你的浏览器将长期处于假死状态,从而给用户带来极差的用户体验。

      第八条:将JavaScript and CSS External 将javascript和css独立成外部文件,很重要,你总不可能把你的jquery代码贴到每个页面吧。也不可能将你通用的css分别贴到每个页面。理由嘛当然是你不是这样的菜鸟咯。给予10评定。

      这一条好像和第一条有点矛盾。的确,如果从HTTP的request请求数来讲的话,这样做的确是降低了效率。但是之所以这么做,是因为另外一个重要的考虑因素——缓存。因为外部的引用文件会被浏览器缓存,所以如果javascript和css体积较大的时候,我们将它们独立成外部文件。这样当用户只要浏览一次以后,这些体积较大的js和css文件就能被缓存起来,从而极高地提高用户再次访问时的效率。

      第九条:Reduce DNS Lookups 减少DNS查询

      DNS域名解析系统。大家都知道我们之所以能记住那么多的网址,是因为我们记住的都是单词,而非http://202.153.125.45这样的东西,而帮我们把那些单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指导意义呢?其实有两条:

      1:如果不是必须,请不要把网站放到两台服务器上。
      2:网页中的图片、css文件、js文件、flash文件等等,不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子,要比壁纸图片来源于不同网站的帖子显示要快得多的原因。

      第十条:Minify JavaScript and CSS 减少JavaScript和CSS文件的体积

      这点很好理解。在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低,好在网上到处都是用于压缩这些东西的工具。压缩JavaScript代码体积的工具随处可见,我便不再列举了,这里我只提供一个用于压缩css代码体积的在线工具网站—— http://www.cssdrive.com/index.php/main/csscompressor

      第十一条:Avoid Redirects 避免跳转

      1:“此域名已过期,5秒钟以后,页面将跳转到http://www.xxxxxx.com/index.html页面”,这句话看起来的确很熟悉。但是,我就奇怪了,为什么不直接链接到那个页面呢?

      2:一些链接地址请更明确的写出来。例如:将http://justinyoung.cnblogs.com/ 写成http://justinyoung.cnblogs.com (注意最后面一个“/”符号)。的确,这两个网址都能访问到我的博客,但是,事实上,它们是有区别的。http: //justinyoung.cnblogs.com 的结果是个301响应,它会被重新指向http://justinyoung.cnblogs.com/ 。但是显然,中间多浪费了一些时间。

      第十二条 Remove Duplicate Scripts 移除重复的脚本

      这个准则的道理很浅显,但是真正在工作中,很多人却因为“项目时间紧”、“太累了”、“初期没有规划好”……这样的理由搪塞过去了。你,的确可以找很多的理由不去处理这些多余重复的脚本代码,如果你的网站不需要更高的效率和后期维护的话。

      也正是这点,我提醒大家一些,一些javascript框架、javascript包一定要慎用。至少要问一下:用了这个js kit 到底给我们多少方便,提高了多少工作效率。然后,再与它因为多余的、重复的代码带来的负面效果比较一下。

      第十三条:Configure ETags 配置你的实体标签

      首先来讲讲什么是Etag吧。Etag(Entity tags )实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的,而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存,缓存中的内容是否已经发生变化的一种机制。通过Etag,浏览器就可以知道现在的缓存中的内容是不是最新的,需不需要重新从服务器上重新下载。这和 “Last-Modified”的概念有点类似。很遗憾作为网页开发人员对此无能为力。他依然是网站服务器人员的工作范畴。如果,你对此有兴趣,可以咨询贵公司的网站服务器管理员。

      第十四条:Make Ajax Cacheable 上面的准则也适用Ajax

      现在的Ajax好像有点被神话了,好像网页只要Ajax了,那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高,反而会降低你的网页效率。Ajax的确是个好东西,但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。
    1. 合并图片,当然这个图片指的是一些背景图,这么可以减少http请求数,从而减轻服务器负担。
    2. 给内嵌于网页中的图片添加宽度和高度,因为没有写图片大小的话,浏览器在下载完图片后还要对图片进行在一次的渲染。
    3. 选取好图片格式,并给图片添加alt和title属性。
    4. 优化网页结构,网页代码尽量语义化,并且严格控制好嵌套层次,并且合理运用好table。
    5. 对于页面整体的压缩,当然这个压缩包括了css压缩(尽量使用缩写,css代码的复用,同时删空格和注释,而在命名上个人喜欢使用长类名,虽然相对文件的容量大了,但是浏览器对于网页的解析速度会加快);js压缩(js代码的复用,同时象最小化一样,它通过删除注释和空格来减少源码大小,同时它还可以对代码进行混淆处理。);html的压缩体现在之前说的网页结构的优化,尽量无冗余代码。压缩HTTP响应内容,目前最流行的应该是Gzip;当然程序的压缩优化也是一部分。
    6. 把JavaScript和css文件放到外部,并不内嵌于网页,同时可以考虑把样式表放到头上把脚本文件放到底部。需要注意的是尽量不要使用css的表达式,他很容易让浏览器出现假死。
    7. 合理使用Ajax和iframe,避免页面大量刷新

     
  • 相关阅读:
    10. Regular Expression Matching
    9. Palindrome Number
    8. String to Integer (atoi)
    7. Reverse Integer
    6. ZigZag Conversion
    《设计模式
    《设计模式
    《设计模式
    《linux 计划任务》- cron
    《设计模式
  • 原文地址:https://www.cnblogs.com/shuaixf/p/2336415.html
Copyright © 2011-2022 走看看