zoukankan      html  css  js  c++  java
  • <收藏>提高Web性能的14条法则(详细版)

    Steve Souders这个家伙写了一本书叫做:High Performance Web Sites: Essential Knowledge for Front-End Engineers

    这本书里定义了14条让你的网页加速的方法,分别如下:

    1.         Make fewer HTTP requests

    2.         Use a CDN

    3.         Add an Expires header

    4.         Gzip components

    5.         Put CSS at the top

    6.         Move JS to the bottom

    7.         Avoid CSS expressions

    8.         Make JS and CSS external

    9.         Reduce DNS lookups

    10.     Minify JS

    11.     Avoid redirects

    12.     Remove duplicate scripts

    13.     Turn off ETags

    14.     Make AJAX cacheable and small

    1. Make fewer HTTP requests

    -减少ImageRequest次数

    -使用CSS Sprites技巧http://alistapart.com/articles/sprites

    -使用Image Map技巧

    -使用Inline Image技巧( data: ) http://tools.ietf.org/html/rfc2397

    P.S.可以开发一个Inline Image产生器!

    PS建议将Inline Image快取在CSS档案中,这样可避免HTML太大

    -减少CSS / JavaScriptRequest次数

    -整合多个分开的CSS / JavaScript

    2. Use a CDN

             http://www.cnblogs.com/ret00100/archive/2010/02/21/1670667.html

    3. Add an Expires header

    -加入Expires HeaderImage, CSS, JavaScript档案里

    4. Gzip components

    -压缩HTML, JavaScript, StyleSheet, XML, JSON,但切记「不要压缩Images, PDF档案」!

    -设定方法

    Apache 2.x:使用mod_deflate

    AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

     

    IIS 6.0

    Enabling HTTP Compression (IIS 6.0)

    http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/502ef631-3695-4616-b268-cbe7cf1351ce.mspx?mfr=true

                 Using HTTP Compression for Faster Downloads (IIS 6.0)

    http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/25d2170b-09c0-45fd-8da4-898cf9a7d568.mspx?mfr=true

    Enabling HTTP Compression in IIS 6.0

    http://dotnetjunkies.com/Article/16267D49-4C6E-4063-AB12-853761D31E66.dcik

                 IIS Compression in IIS6.0

                 http://weblogs.asp.net/owscott/archive/2004/01/12/57916.aspx

             IIS 5.0

    HOW TO:启用IIS中的ASPX压缩

                 http://support.microsoft.com/kb/322603

    - HTTP Header Style

    HTTP request

    Accept-Encoding: gzip, deflate

             HTTP response

    Content-Encoding: gzip

                 Vary: Accept-Encoding (这行是给Proxy Server看的)

    -其他注意事项    

             -个人化的页面要加上==> Cache-Control: Private        

             -移除ETags (Rule 13)

    5. Put CSS at the top

    -一定要将CSS放在<head>区段载入!

    -使用<LINK>标签,不要使用@import语法

    - Avoid Flash of Unstyled Content (FOUC) in IE

    http://www.bluerobot.com/web/css/fouc.asp/

    <!-- Hack to avoid flash of unstyled content in IE -->

                    <script type="text/javascript"> </script>

    6. Move JS to the bottom

    -一定要将所有JavaScript都摆在页面最下方</body>之前

    所有在JavaScript Include以下的HTMLJS还没读完前,都不会显示画面

    -JavaScriptCode都放在onload执行!

    7. Avoid CSS expressions

    -不要使用CSS expressions

    可能这段expression会在每一次mouse move, resize, scroll, key press时执行!

    -要使用EventHandler去执行这些Expression (JS Code)

    8. Make JS and CSS external

    -反正JSCSS拉到外面成独立档案就是好的,但「首页」可以例外!

    -使用Post-onload download技巧

             download external files after onload

             window.onload = downloadComponents;

             function downloadComponents() {

                 var elem = document.createElement("script");

                 elem.src = "http://.../file1.js";

                 document.body.appendChild(elem);

                 ...

             }

            范例:http://stevesouders.com/hpws/dynamic-inlining.php

            作法:

    1.Server-side判断使用者Browser有设定Cookie["hasPostOnloadDownload"]

    1.1.若没有,就使用post-onload download动态下载CSS & JS

    1.2.若有用,就直接用<script src="xxxx.js"></script>下载,Browser会抓取Cache的版本

    P.S. cookie expiration date is key

    9. Reduce DNS lookups

    -在一个页面中,不要超过2 - 4Hostname,不然会降低页面载入速度

    -开启Keep-Alive支援

    10. Minify JS

    - jsmin : http://crockford.com/javascript/jsmin

    下载后更名成jsmin.zip解压缩出jsmin.exe即可执行,jsmin.exe < input.js > output.js (注意:所有UTF-8编码的js档会变成ANSI as UTF-8编码)

    - dojo compressor : http://dojotoolkit.org/docs/shrinksafe

    11. Avoid redirects

    -参考资料:http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

    -避免Redirect产生的方式

    *网址若省略档名时,最后面一定要加上/结尾

    *追查Log

    -查看Log Referer

    12. Remove duplicate scripts

    -这一点虽然很呆,不过连MSN Space, Yahoo都有类似的情况!

    -ASP.NET的元件中(UserControls, WebControls),请多使用Page.ClientScript.RegisterScriptInclude的方式!

    13. Turn off ETags

    -基本格式

    * unique identifier returned in response

    ETag: "c8897e-aee-4165acf0"

                 Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT

    * used in conditional GET requests

    If-None-Match: "c8897e-aee-4165acf0"

                 If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT

    - if ETag doesn't match, can't send 304

    - ETag format

    Apache: ETag: inode-size-timestamp

    IIS: ETag: Filetimestamp:ChangeNumber

    - IIS设定方式

    自动设定方式

    ETagFix - keep IIS eTags from changing http://www.snapfiles.com/get/etagfix.html              

                原创公司:ISAPILab http://www.isapilabs.com/              

                安装http://www.isapilabs.com/downloads/ETagFix-setup.exe之后会重新启动IIS之后就没问题了!  

                 Related: http://www.snapfiles.com/Freeware/server/fwiis.html

                 Note:              

                    IIS 5.0可以正常运作                

                    IIS 6.0必须要执行在Isolate Mode才可以使用ISAPI,预设是不能用的!

    手动设定方式

    *如果不是用Windows Server 2003 SP1要先安装Hotfix 900245 http://support.microsoft.com/kb/900245/        

    *先安装IIS 6.0 Resource Kit

    http://www.microsoft.com/downloads/details.aspx?FamilyId=56FC92EE-A71A-4C73-B628-ADE629C89499&displaylang=en        

    *使用Metabase Explorer开启LM " W3SVC新增DWORD to 2039Value="0" (每一台WebFarm底下的电脑都要这样设定)

    *重新启动IIS

    net stop iisadmin /y

    net start w3svc

    net start smtpsvc

    参考资料

    *您可能会当您使用Internet Explorer 6,试着存取Web应用程式所装载在Internet Information Services 6.0 Web效能非常低

                   http://support.microsoft.com/kb/922703/

    - Apache设定方式

    FileETag none

    14. Make AJAX cacheable and small

    - XHR, JSON, iframe, dynamic scripts都一样可以被快取(Cached)、最小化(minified)和压缩(gzipped)

    -个人化的页面回应时,一样要做快取,但是针对「该使用者」做快取(Cache-Control: private)

    -在使用XHR时,URL可以加上「最近的修改时间」在QueryString里。

             GET /yab/[...]&r=0.5289571053069156 HTTP/1.1

    -回传资料时的Header可以用Cache-Control: private + Last-Modified,使用者就不会一直连到网站抓网站了!!

    设定Cache Header注意事项:

    *个人化的页面一定要设定Response.Cache.SetCacheability(HttpCacheability.Private);

            *如果要Cache页面或External Reference档案(CSS/JS)一定要加上Response.Cache.SetLastModified(DateTime.Now);

    *如果不加上MaxAge的话,将会无限时间的Cache直到下次Reload或开新Browser手动输入网址进入网页

    *如果要指定Cache的时间要加上

    Response.Cache.SetMaxAge(new TimeSpan(0, 0, 0, 10));

    Response.Cache.SetExpires(DateTime.Now.AddSeconds(10));

    *如果不要页面被Cache的话

    Response.Cache.SetMaxAge(TimeSpan.Zero);

    Response.Cache.SetExpires(DateTime.MinValue);

  • 相关阅读:
    机器视觉行业的很多知识
    机器视觉行业的一些状况,新手们可以了解下
    图像处理心得
    自动化机器视觉行业视觉方案设计心得
    关于Visionpro可以同时运行几个VPP的问题
    把Visionpro的控件如何加载到VS中去
    VS2015和OpenCV配置
    在VS2015中用C++编写可被其它语言调用的动态库DLL
    自定义控件实现图像的显示和放大缩小,平移,右击菜单选择“自适应窗口”“保存图像”
    PictureBox中的图片实现鼠标滑轮控制缩放和平移
  • 原文地址:https://www.cnblogs.com/ret00100/p/1618612.html
Copyright © 2011-2022 走看看