通过示例加速你的网站

分享于 

20分钟阅读

Web开发

  繁體
  • 下载示例 AllInOne.zip - 37Kb - AllInOne.zip 包括 ( cut-n-paste就绪): 优化的HTML网页模板,CSS翻转,CSS精灵示例等。

介绍

我们生活只是为了发现美,其他都是等待的形式。 如果你同意这说法的话,你很清楚,最小化等待你的网站访问者的意思。
在过去几年中,构建一个HTML页面,添加图像,CSS和JS已经成为 Cake的一部分了。 这个缩小的检查列表将帮助你检查你的网站,以减少下载时间。

注意:本文只介绍前端工程问题,本文没有讨论编程/cgi脚本/数据 Structure/Database/Multimedia 优化技术。

背景

去年,我决定在 WNetwork.com 和 Treehousetv.com, 上写下几年的经验,并从许多来源学习,并尝试使用它们。 我已经编译了这些笔记,希望每个读者至少能获得一两个想法。

在第一部分中,我们将看到时间的花费,然后在第二部分中,我们将概述一些概念和列表工具。
  • 节A: behind 场景
  • 节B: 优化加载时间
  • 节C: 命令行工具

部分 A: behind 场景

本节描述了在用户键入WWW地址并在他/她的眼睛之前看到完整的网页时发生的事情。 这将告诉我们时间花费在哪里以及如何最小化它。

Click so see larger image.
请注意:上面 图像看起来很复杂,但是DNS查看通常占用 LESS的时间比一秒大。 100ms 至 900 ms给出了一个完整的过程。

Click so see larger image.

Click so see larger image.

Click so see larger image.

Click so see larger image.

Click so see larger image.

现在让我们来了解一下:

分区 B: 优化加载时间

以下准则基于常见知识和经验的Collection,应用程序可以能不同于情况。 我建议记录当前网站加载统计信息,并在应用任何指南后分析结果。 1.减少HTTP请求的数量
  • 为什么?
    • Web服务器进行连接是一个时间和网络资源消耗过程( 其中包括软件/硬件握手。数据包传输。数据包丢失。重发。验证处理和关闭连接等。),以及一个主要时间花费区域。
    • Web客户端( 浏览器) 在加载主资源( 比如 ) 后为每个资源发送单独的请求。 index.htm。global.css, spring.css, logo.jpg, menu1.jpg, menu2.jpg, menu3.jpg, 1 x1.gif, corner1.gif, common.js, validation.js。 )
    • 从技术上讲,在加载主页( index.htm ) 后,浏览器从所有 src={URL}href={URL} 和css标签的url({URL}) 提取 {URL}
    • 通常,浏览器只对每个主机并行下载 2到 4资源。 ( 取决于HTTP版本和浏览器。 Firefox 看起来比 IE 好
    • 结论:请求/连接浏览器的数量越少,响应速度就越快。
  • 如何做到?
  • 最小化文件( CSS,JS,图像等)的数量。
  • 合并文件:( 可能的位置)
    • 所有CSS文件到一个文件中。
    • 所有JavaScript文件到单个文件。
    • 在可能的情况下,将图像文件连接到一个文件中: 使用 background-imagebackground-position 显示所需的图像"窗口"。 ( 请参见在 AllInOne.zip 中的 CSS-Sprites.html
  • 使用浏览器缓存:
    • 浏览器必须下载所有资源,但是在第二次访问时,为什么浏览器不能从缓存( 以前加载和保存的资源- 估计为 50%到 60%的用户浏览器是设置为缓存 ) 获取资源。 尽可能优化你的页面以使用浏览器的缓存。
    • 在未来的日期使用"过期"header 将节省下次访问的时间。 浏览器会使用缓存版本的对象,只要它没有过期或者删除。
      对于HTML页面:
      <html><head><title>Cache - Example</title><metahttp-equiv="Expires"content="Sat, 16 Jul 2016 18:45:00 GMT">. . ...
       </head><body>. . .....
       </body></html><html>
      对于 Images/CSS/JavaScripts, 配置Web服务器,如下所示:
      • IIS: 在IIS中,右键单击文件夹,右键单击文件夹或者文件属性> HTTP标头> 单击启用内容过期> 在 {set 以后的date}> 上单击应用。 请参见下面的文件夹图片:
      • Apache: 使用 mod_cachemode_file_cache 模块来配置缓存。
    • 不要缓存动态HTML页面,请参见示例 below:
      <html><head><title>No Cache - Example</title><metahttp-equiv="CACHE-CONTROL"content="NO-CACHE">. . ...
       </head><body>. . .....
       </body></html>
    • 捕获/质询:
      • 如果稍后更改了一些对象( JavaScript等),该怎么办。 然后尝试使用像" jsfunc_5.2. 3。js"这样的文件名作为新版本( 或者重新配置 etag )。
      • 另一个想法:不要缓存HTML并缓存所有其他东西。 [you can simply rename object names (modify Urls) in HTML to force Browser to load newer version next time]。
2.精通 <HTML>
  • 为什么?
    • 通常情况下,HTML只需要 20%个时间,而其他的则需要个下载时间,这意味着我们需要减少HTML的大小,同时还需要"帮助"浏览器来快速。
    • HTML是所有对象和样式的主包装,对于浏览器理解。展开和呈现它是非常重要的。 由于 X/HTML/CSS 标准和浏览器战争的implemented,浏览器采用两种模式构建: 标准( 快速模式,浏览器信任HTML页面开发人员),c#模式( 浏览器必须验证 HTML/css,查找和"原谅错误")。
  • 如何做到?
  • 最小化下载时间:
    • 可以缩小页面大小? 用户可能希望为每个 5页花费 2秒的时间,而不是一个页面的10秒( 例如。 : 将页面分割为较小的页面并创建指向其他页面的链接。 另一方面,用户可以能希望一次阅读,所以更好的方法是在这两者中间。
    • 消除不必要的空格,不需要的/未优化的标记和注释。 实际上,可以用于人类可以读性和维护的空间,然后使用一些工具去移动文件。
  • 渲染速度更快:
    • 最简单的设计是最好的。 google页面主页是 6 KB并且具有非常简单的HTML,这将帮助浏览器解析和渲染快速。
    • 标准 vs 模式,使用浏览器构建信任( 我们是专业的,遵循标准),使用优化的HTML解析。 到 switch 浏览器到标准模式使用:
      <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>DTD - Example</title>. . ...
       </head><body>. . .....
       </body></html>
    • 将 inline 脚本和CSS移动到外部文件( 减少 inline 脚本 i.e.的数量: document.write(); )
      • 注意:在这种情况下,浏览器会混淆呈现内容,应用CSS以及运行脚本,在这种情况下浏览器必须重新绘制或者停止显示内容,然后停止内容渲染。 所以使用外部文件是更好的方法。
      • 打破这个准则: 外部文件意味着额外的HTTP请求和缓慢的下载。 小 inline 脚本和CSS可能适合于主页以更快地下载和减少HTTP请求。
    • 区块内容
      • 将基于 table的布局替换为 div 块或者将表格拆分为更小的表。 浏览器无法呈现元素,直到它的结束标记未被接收。 换句话说,在未接收到它的</table> 之前,无法呈现大外部 <table> 中的任何对象。
      • 以块形式编写 HTML,使用更多的<div> 和 LESS <table>
      • 请参阅 。html中的示例。html。to to template5.
3。精通 <>
  • 为什么?
    • 图像是最重要的时间和带宽消耗对象之一。 保存在这方面的时间将显著提高性能。
  • 如何做到?
  • 最小化图像的使用。
  • 在链接中使用CSS滚动而不是图像。 ( 请参见在 AllInOne.zip 中的 RollOvers.html
  • 始终为所有 IMG 指定 WIDTHHEIGHT 参数。 即使是最小的。
  • 仔细选择颜色数,然后选择图像格式:
    GIF: 最适合于纯色和从一种颜色到另一种颜色的锐利边缘过渡,最大颜色为: 256.
    :适用于多种颜色或者灰色色调的连续渐变。

    什么时候使用下面的GIF实例:
    GIFJPEG
    质量:10%
    JPEG
    质量:60%
    JPEG
    质量:100%

    字节:156

    字节:379

    字节:433

    字节:434

    颜色:2
    字节:318


    字节:927


    字节:1,994


    字节:4,037

    颜色:17
    字节:713


    字节:987


    字节:2,159


    字节:4,928

    颜色:3 +1 ( 透明)
    字节:379



    字节:1,249



    字节:2,823



    字节:6,651


    以下是使用JPEG示例的费用:
    GIFJPEG
    质量:10%
    JPEG
    质量:60%
    JPEG
    质量:100%

    颜色:256
    字节:8,693

    [x ]
    字节:4,370

    颜色:256
    字节:6,952


    字节:863


    字节:1,962

    [x ]
    字节:5,604
    请注意:不同的程序创建不同的图像大小,我使用了Photoshop的,W100xH100在 72 dpi。
  • 避免动画gif和 Flash ( 因为加载时间长,造成干扰。)
  • 使用 background 颜色,填充和图像( 重复) 代替大图像。
  • 不要在服务器上的多个文件夹中保存相同的映像。 ( 为了避免两个HTTP请求,并且无法获得第一个缓存映像
  • 在图层/逐行加载大图像。 它的技巧,尝试如果工作,可以能需要更长的时间,但用户可能会感到更好。
  • 较 LESS,但不要将单个图像大小更改为 10 KB,但不要将较大的图像分割为小的图像,以减少文件大小,使用CSS或者图像映射。 ( 请参见在 AllInOne.zip 中的 CSS-Sprites.html
4.精通 <表>
  • 避免使用一个大的外部 table,而是使用单独的表用于 header,content1,800x600,content3。 footer 等等 ( 请参见 Table-vs-Div(1-Okay) 中的Not-An-Example )。 html 和 Table-vs-Div(2-Better)。AllInOne.zip 中的html
  • 使用 <div> s 代替 <table> s,在块( 表或者 div ) 中开发页面而不是大型外部 table。 ( 请参见 AllInOne.zip 中的Table-vs-Div ( 3-even 更好)的示例)
  • 使用嵌套表而不是使用单元合并和拆分进行设计。 尽可能使用单独的table。
  • 始终为 table 中的每个单元格提供 WIDTH。 确保行中的单元格总数与 table 宽度相加。 使用 CSS table-layout:fixed ( 请参见 AllInOne.zip 中的Table-ColGroup-2.html 示例。) 或者使用 COLGROUP 标记( 请参见 AllInOne.zip 中的Table-ColGroup-1.html 示例。)。
  • 当使用 WIDTH 或者 HEIGHT 小于 10像素时,使用 1 x1.gif 透明图像。 ( Netscape不喜欢按百分比进行度量。)
5.页面中组件的顺序
  • css:
    • 将CSS放置在页面 inside HEAD的顶部,它帮助浏览器在开始之前了解如何样式化和显示内容。
  • JavaScipt:
    • 页面页面顶部:只有在页面显示开始时需要 JavaScript,然后将它保存在要下载的中,否则将DHTML脚本放在页面的末尾。
    • 页面的底部:在页面底部放置 JavaScript,因为浏览器在下载过程中可能会出现呈现( 或者 rerender ),希望 document.write() 能够引起HTML的HTML复制。 否则,尝试使用延迟属性:
      <html><head><title>CSS and JS defer - Example</title>. . ...
       <linkrel="stylesheet"type="text/css"href="rich-layout.css"media="screen"><linkrel="stylesheet"type="text/css"href="simple-layout.css"media="print"><scripttype="text/vbscript"src="fval1.0.2.js"defer></script>
       </head><body>. . .....
       </body></html>
  • 使CSS和JS成为外部文件。
    • 遵循以下准则: 外部文件将帮助浏览器缓存下一次使用,并适合多次访问。
    • 打破这里准则: 为了避免额外的HTTP请求和更快的响应,inline 可能适合于主页。 ( 这取决于每个会话的网页视图页面- Google主页上有 1个 pv。)
  • 下载几个基本页面布局模板。 ( 请参见 Template1.html的示例。 to AllInOne.zip 中的 Template5.html )
6.减少请求&响应大小
  • 为什么?
    • 通常,在下载HTML和其他对象时,80%到 90%时间是花费在下载HTML和其他对象的时间,因此减少下载时间是获得更好性能的关键。 一种支持的方法是将基于文本的文件压缩为 gzip。
    • 大多数浏览器都可以将 Accept-Encoding:gzip,deflate 作为请求的一部分发送,而在响应中,服务器可以发送带有压缩数据的Content-Encoding:gzip
    • HTTP压缩在一个大请求上比几个小请求更高效。
  • 如何做到?
  • 压缩基于文本的文件,比如: HTML,JAVASCRIPT,CSS file(s)。 压缩可以降低大小达 70%。
    IIS管理器:在IIS管理器中,双击本地计算机,右键单击网站文件夹> 属性> 服务> HTTP压缩部分:

    请注意:你可能还需要配置Web服务扩展和配置数据库。 ( 你可以为某些基于文本的( *。htm。*.css, *.js 等) 文件配置。)
    Apache: mod_deflate 使用 mod_gzip,模块来配置压缩。
  • 缩小:删除空格。换行。制表符。注释。字符串。变量和文本;删除重复的脚本并尽可能多地使用CSS继承。
  • 减少开销:
    Cookie: 每个请求都有附加到它的Cookie。
    • 大小:如果 LESS 比 100字节更好,如果 LESS 大于 500字节,则为 ok。
    • 仔细选择域级别 i.e.: .mydomain.com。
    • 仔细选择到期日期在不需要时删除。
7.减少域查找
  • 减少域查找:通常,2比一个( 利用浏览器下载功能的优势) 好,4比 2差。
  • 使用浏览器的缓存也将减少域查找。
8.内容传递网络:( 针对特定区域)9.AJAX:
  • javascript的所有预防措施也是用于AJAX库的true。 尽量利用缓存中的内容。
  • 在需要( $import() ) 或者加载 background 时动态加载JavaScript库。
  • 如果可能,在服务器端获取 3rd 方内容,在显示内容后从客户端加载第三方内容。
10.其他/杂项:
  • 使用服务器端包含文件更好,因为服务器将它们保存在缓存中以便以后更快地服务。
  • 在CSS中避免"表达式( )"。
  • 将大型开发人员注释/备注移动到具有 *.info 扩展名的同一 NAME的单独文件中。 比如: index.info
  • 尽可能缩短 url。 用户 <base href="http://www.domainname.com"> 如果需要绝对引用。
  • 重要: 将下列准则对齐: ! ( 所有的定量分析在不同的环境中可能不同)
    • 你的环境和网站结构。
    • 主页 vs 内部页面。
    • 第一次访问者 vs 重复访问者。
    • 高流量页 vs 低流量页。
    • 字节数:很少有准则会保存字节,而其他的则节省千字节。
  • 还有 finally,衡量你的进步。
摘要:
.HTML..........Simplify design.
. HEAD
. LINK......CSS file(s) required for page appearance.
. SCRIPT....JS functions required during page load.
. BODY
. . .........Small chunks (DIVs, TABLEs), minimize images.
. SCRIPT....JS functions required after page load, validation etc.
. PRELOAD...If required, Pre load any images here.

部分 C: 工具

脚注

一些专家声称,如果你的主页在 8秒内没有加载,那么你的网站访问者将会失败。 我希望这些指南和示例能够帮助你快速理解和应用你的web开发改进。

资源和进一步阅读:

历史记录

持续更新:星期一,2008年05月26日。


WEB  网站  speed  
相关文章