25种提高网页加载速度的方法和技巧

  您现正在可能从 Tools 菜单拜候 Firebug。可能正在新窗口或现有窗口中掀开 Firebug(参见图 1)。

  幸 运的是,这些可怜的人们现正在一经也许获取少少帮帮。您可能通过缩短加载页面的韶华来革新他们的体验。不过,拨号相连并不是消浸加载和反应速率的惟一出处。 很多 Web 计划职员过失地以为高速 Internet 相连的到来会使网站功能优化变得没有需要。这种见地是过错的。比如,过去行使桌面软件践诺的很多职业现正在可能正在线践诺。正在 Web 利用轨范中获取像桌面软件那样的高速反应体验极度麻烦,是以功能优化极度首要。运气的是,少罕用具和最佳践诺可用于缩短反应和加载韶华,供给特别畅达的体 验。

  是以,要是念要获取杰出的代码,可能思虑行使代码剖判用具。有很多区其它用具可供行使,不过最适合 JavaScript 讲话的用具非 JavaScript Lint 莫属,它也叫做 JSLint(参见参考原料)。也可能行使 Firebug,不过 JSLint 特别正式,它蕴涵正在 YSlow 中。

  要是不行实行简短的 Ajax 挪用,或者要是这些挪用不行供给期待的结果,可能思虑一种代替方式:实行一次大的 Ajax 挪用来获取所需的齐备实质,然后让客户机正在当地经管数据。通过这种式样,客户机只需等候一次(获取传入的数据),不过正在此之后(当浏览器与任职器之间没有 需要通讯时),经管速率将更疾。当然,尚有大方 Ajax 优化工夫,本教程无法逐一列出。要是念要体会合于 Ajax 的更多消息,请查看参考原料。

  这段代码将对 heavy() 方式的挪用延迟了 5 秒。您可能将这段代码与下面的技能维系行使来延迟全部 JavaScript 文献的加载。

  当全体元素都通过验证而且 Gears 已装置之后,您可能测试 Gears 的极其有效的数据库功用,行使 清单 6 中的 JavaScript 代码。

  行使 Google Gears(参见参考原料) 是避免用户频频下载统一实质的另一种好方式。Gears 愿意用户离线拜候 Web 利用轨范,不过也愿意将页面元素经久化到用户的揣度机上。是以,一再加载但未实行更新的实质可能存储正在 Gears 数据库中,该数据库是一个 SQLite3 相干数据库解决体例。对统一实质的全体next仰求都可能从数据库(而不是任职器)直接加载。

  CDN 的另一个上风是它们是独立的域。由于您的浏览器将并发相连的数目局限到一个简单的域,是以无论何时加载一个页面,都很容易占满全体线程。是以,到其他资产 的相连被延迟了。然而,您的浏览器也许掀开新线程或到其他域的相连,如许,从另一个域加载的任何资产都可能与其他全体资产同时加载。

  另一种代替方式是缩幼文献。这种方式删除代码中全体不需要的字符,比方造表符(tab)、新行和空格。它删除代码中的解释和空缺,进一步缩幼文献巨细。表部和内部样式表都可能缩幼。两种最风行的缩幼用具是 JSMin 和 YUI Compressor(参见参考原料)。

  装置 Gears 之后,获取 gears_init.js 文献,以便轻松拜候Gears 工场和利用轨范编程接口(API),将其保全为gears_init.js,通过以下式样正在您的代码中援用它:

  正在很多场景中,自我反省是一个不错的倡导。运气的是,正在斥地历程中,咱们可能行使用具来帮帮反省,并尽可以客观地实行践诺。像 JSLint(参见参考资源)如许的用具的价格是无法权衡的,纵然其站点饱吹它 “可以令您备受窒碍”,由于它向您供给了全体的潜正在代码缺陷,这些缺陷不光使调试特别麻烦,并且可以导致更长的响适韶华。

  从 Stats 视图的名称可能臆测到,它(如 图 6 所示)显示与目今页面相合的统计数据。这些数据网罗空的和苛重的缓存和 cookie。

  与表格单位格、行和列一律,当您未鲜明扶植图像巨细时,浏览器需求践诺揣度来显示图像,这会消浸经管速率。其余,正在某些景遇下,图像巨细的揣度结果可以不确切,是以图像会产生变形。

  要是过程妥贴优化和庇护,CSS 文献不愿定很大。比如,拥有许多独立类的 CSS 文献会影响下载速率。与 JavaScript 文献一律,您需求优化 CSS 文献,使其蕴涵所需的全体实质,同时保留合理的巨细。别的,行使表部文献取代内联界说来合适浏览器的缓存机造。

  将 大方页面优化技能汇集到一块很容易,我生机本文的资源拥有肯定的价格。不过,要是您以为速率优化技能只要这里列出的这些,那么您将惊异地浮现远远不止这 些。不过,尽管您仅服从这 20 多个技能,您的页面的加载速率也会更疾,您的用户也会更惬意 无论他们通过拨号依旧专用的宽带上彀

  YSlow 是一个较幼的、有效的扩展,可能正在降低页面加载速率方面为您供给很多帮帮。要是您以前未行使过它,那么现正在该当行使了。

  也可能验证一个函数是否被加载,要是没有,加载 JavaScript 文献。为此,行使 清单 4 中的代码。

  正在 理念情状下,您该当装置了 Mozilla Firefox。您还该当大要体会 Web 斥地。本文涉及的焦点并不庞杂,不过要是您体会超文本标志讲话(Hypertext Markup Language,HTML)、层叠样式表(Cascading Style Sheet,CSS)以及 编程讲话等焦点,那么正在研习本文时将特别驾轻就熟。不需求行使集成斥地情况(IDE),只需行使您嗜好的编纂器。

  实质漫衍汇集(Content-distribution network,CDN)是另一种缩短下载韶华的好方式。当您将静态图像放正在 Internet 上的很多任职器上时,用户也许从离他们近来的任职器下载这些图像。其余,大无数 CDN 都正在迅疾任职器上运转,是以无论任职器的加载速率若何,其反应速率都比幼型的超载任职器疾。

  阅读完本文之后,您将也许较好地体会网页加载韶华优化的根基常识。您还也许行使用具和常识更好地识别和决断加载迟缓的页面片面和瓶颈。

  正在 Inspect 视图中,如 图 5 所示,您可能一一剖判元从来分析页面。Inspect 视图的一个最有效的功用是,当您正在页面上搬动鼠标指针时,它会自愿更始,是以您无需通过滚动代码实质来查找需求查抄的行。

  这段代码正在您的揣度机或任职器上创修一个当地数据库 db。要是表 Test 不存正在,则创修一个,然后插入测试数据(Monkey! 和韶华)。代码从数据库获取数据,并正在浏览器中以正告的款式映现出来。

  可以这是全体技能中最显而易见的一个,不过它也是最容易忘掉的一个技能。我已经提到过 “少即是多”:这不只是为了真正吸引更通俗的用户,还意味着需求下载和经管的东西更少。要是您真正需求正在网页上睡觉很多实质,思虑将网页分为 2 个、3 个或更多的独立页面。

  可能行使很多方式来优化您的网页,网罗压缩 JavaScript 文献,行使超文本传输同意(Hypertext Transfer Protocol,HTTP)压缩,以及扶植图像巨细。

  很多人通过某种款式的宽带相连拜候 Internet,这些款式可以是 DSL、网线、光纤或其他方式。不过,无法行使这类工夫的用户不得不成使拨号相连。您肯定一经忘掉拨号上彀是什么感想了,但您可能试着回念一下网页逐行加载时的景遇。

  别的,思虑一下您念要压缩的实质。图像、音笑和视频正在创修时一经实行了压缩,是以您可能将压缩对象局限为 HTML、CSS 和 JavaScript 文献。

  可 以行使 HTTP 压缩来淘汰任职器与浏览器之间的通讯量。可能正在 Apache 中装备 HTTP 压缩(.htaccess 文献),或者可能将其蕴涵到页面中(关于 PHP,可能行使一个 HTTP_ACCEPT_ENCODING 选项)。不过请留意:不是全体浏览器都帮帮压缩。尽管是帮帮压缩的浏览器,压缩妥协压缩城市加重经管器的负载。要正在 Apache 中启用地毯式(blanket)压缩(即压缩全体文本和 HTML),行使以下下令:

  如 果您增加一项新功用,可能开始正在沙箱里(全体摆脱了利用轨范的其余片面)实行测试,查看它动作单个函数的举止。通过这种式样,您可能频频查抄,并剖判功能 和响适韶华,无需思虑 Web 利用轨范的其余片面。然后,当新功用的举止适当预期时,可能将其引入到利用轨范的其余片面中,运转其他测试,保障功用自身的举止适当预期。

  图 4 显示了 Performance 视图,可能正在个中看到 YSlow 若何评估您的网页的功能,还也许看到该扩展检测到的题目。单击列表中的一个链接将掀开一个页面,个中阐明了相应的过失。要是存正在可能矫正的页面组件,YSlow 会给出矫正倡导。

  行使图像暗示文本的最常见示例便是正在导航栏中。华丽的按钮特别拥有吸引力,不过它们的加载速率很慢。其余,图像依旧不行由查找引擎直接索引,是以, 行使图像实行导航倒霉于查找引擎优化(search engine optimization,SEO)。当无需图像就可能通过大方 CSS 技能创修美丽的按钮时,毫不成使图像来暗示文本。

  令人惊诧的是容易的计划准则一样会被疏忽,最终发作未经优化的、下载迟缓的网页。记得以下准则,页面的加载速率将会更疾。

  行使 Firebug 扩展跟踪加载迟缓的文献,我敢赌博您的 JavaScript 文献是下载最慢的文献。压缩 JavaScript 文献会有所帮帮,不过仅仅如许可以还不足。您可能行使以下代码片断延迟 JavaScript 的加载:

  其余,扶植一个较早的 expire 日期或者底子不扶植 expire 日期,会缩短响适韶华。要正在 PHP 讲话中扶植 cookie 的 expire 日期,行使以下代码:

  我正在前面提到过,移除全体不需求的 JavaScript 代码也许加疾加载和经管速率。不过要是代码一经极度精简而且务必正在页面中蕴涵 JavaScript 代码的话,该奈何办?

  尚有一个每每被遗忘的常用技能。纵然清楚的 Web 斥地职员一样会正在启动利用轨范之前对其实行测试,不过有光阴测试会使他们不那么注重庇护职业,或者新功用增加得太疾,而且未过程充沛思虑或测试。结果,余下的剧本减缓了利用轨范的速率。

  要是您确实不得不成使 XHTML,试着尽可以对它实行优化。比如,删除空格并采用庄重的 XHTML 编码践诺,降低下载妥协析速率。要庄重践诺 XHTML Strict 准则,向文档中增加以下 doctype 语句:

  可扩展 HTML (XHTML) 拥有很多上风,不过其谬误也很显然。XHTML 可以使您的页面特别适当法式,不过它大方行使标志(强造性的 start和 end 标志),这意味着浏览器要下载更多代码。是以,事件都有两面性,实验正在您的网页中行使较少的 XHTML 代码,以减幼页面巨细。

  优化网页的加载速率并不庞杂。实质上,您一样可能易如反掌地完成速率优化。要是服从本文中先容的技能以及 Web 斥地最佳践诺,那么无需采用其他法子就可能降低页面的加载速率。

  Components 视图(如 图 7 所示)列出了目今页面上的组件。显示的与每个组件相合的数据网罗文献类型和道途、页面过时韶华以及 HTTP 反应报头。单击一个组件可能将其掀开,以供查看。单击一个列题目可能按升序或降序对表实行排序。

  当统称为 Asynchronous JavaScript + XML (Ajax) 的工夫正在两年前映现时,这些工夫为经管页面请乞降反应供给了一种革命性方式。然而,拨号用户可以原来没机遇体验其真正的上风,由于正在很多景遇下,Ajax 需求正在浏览器与任职器之间大方通讯。是以,要是您也许保留 Ajax 挪用简短和切确,可能避免用户花费无止尽的韶华来等候元素更始或反应。

  表格被用作网页的苛重构修块,不过动作页面结构元素,行使表格现正在被以为是倒霉的做 法。有光阴,您务必行使表格(而且它们被以为是显示表格数据的增光践诺)。要是是如许,鲜明地指定表格单位格、行和列的宽度和高度,不然,浏览器务必践诺 很多操作来揣度若何显示它们,这会消浸页面加载速率:

  不是全体人都也许行使高速 Internet 相连。尽管每一面都也许行使高速汇集,也会由于各式各样的出处使您的 Web 利用轨范看起来运转迟缓。正在这个宽带速率一直降低的时间,您应该体贴一下页面加载韶华。将珍奇的页面加载韶华缩短几秒,将特别珍奇的请乞降响适韶华缩短几 毫秒。您将为拜候者创造一种更好的体验。

  缩短 JavaScript 下载韶华的另一种式样是行使表部文献,而不是蕴涵剧本内联。这种方式也实用于 CSS,由于浏览器会缓存表部化的文本,而(正在 HTML 页面本身中)以内联式样编码的 CSS 或 JavaScript 每次城市随 HTML 一块加载。要通过正在 HTML 中援用 CSS 和 JavaScript 代码来表部化它们,可能使器拥有以下款式的代码:

  YSlow(参见参考原料)剖判网页,并依据 Yahoo! 草拟的高功能网站准则(参见参考),告诉您网页加载迟缓的出处。YSlow 是一个与 Firebug 集成的 Firefox 插件,是以您需求开始装置 Firebug,然后才干装置和行使 YSlow。

  2.装置插件,然后重启 Firefox。留意:与很多其他 Firefox 扩展区别,YSlow 不会自愿启动。务必开始激活它。

  cookie 可以是很幼的文献,不过浏览器依旧需求下载它们。较大的 cookie 所需的下载韶华更长,进而添补了浏览器加载网页的韶华。正由于如斯,尽可以缩幼 cookie 来最幼化对浏览器响适韶华的影响极度首要。

  与 cookie 仿佛,JavaScript 文献的下载也需求韶华,这不成避免地会消浸全部页面的加载速率。是以,明智地行使 JavaScript(仅正在真正需要时才行使)并优化剧本的巨细和速率。

  正在这种景遇下,一种擢升页面下载速率的潜正在式样是将剧本放正在页面的底部,使页面加载更疾速。一样,浏览器只可(从统一个域)下载不抢先两个并行对 象,要是一个对象是一段 JavaScript 代码,那么正在该剧本下载完之前,其他页面组件的下载将会暂停。要是将 JavaScript 代码放正在页面底部,(正在大无数情状下)它将正在终末下载,这时全体其他组件都已下载完。

  咱们很少会驾御字体正在区别浏览器中的显示式样,与字体区其它是,图像老是切确地遵从其计划式样来显示。但这不行看成行使图像来暗示文本的捏词。

  行使图像照射取代多个图像,这是另一种缩短加载韶华的式样,由于同时下载图像的各个独立片面也许加疾全部页面的下载进度。或者,您可能行使某种名为CSS sprites的用具(参见参考原料)。CSS sprites 可帮帮淘汰 HTTP 仰求的数目。一个图像可能蕴涵粉饰或安放页面所需的全体图像元素。您行使 CSS 来选拔(通过挪用某些名望和维度)用于特定元素的照射。

  JavaScript 文献可以极度大,这意味着正在某些景遇中,它们的下载韶华可以比全体其他组件下载韶华之和还长。处置此题方针一种方式是压缩 JavaScript 文献。您可能行使 GNU zip (gzip) 来实行此职业,由于很多浏览器都帮帮这种压缩算法。

  关于全体与优化联系的职业,您务必行使用具来诊断瓶颈和识别题目。现正在正在 Web 斥地中行使最通俗的两个用具是 Firebug 和 YSlow,它们都是开源、免费的 Firefox 插件。

  正在博客(和新的站点)风行起来之前,让页面水准滚动以至笔直滚动被以为是倒霉的践诺。页面越幼,越难以(但并不是不成以)完善地填充屏幕。现正在,对 于博客和实质驱动的网站,常常可能看到几百 Kb 巨细的长页面。是的,您需求填充更多空间,不过这并不虞味着您务必行使大的靠山图像、大方表格或者很多实质来填充。周旋简约规定:少即是多。页面中充溢着 各品种型的图像、视频、告白等,这大大违背适用性规定,是以,正在添补页面的实质时请三思。

  查抄独立的文献和丧失的图像是一种明智之举。大片面 Web 斥地职员城市查抄过失的文献援用,不过这里依旧需求表明一下。丧失的文献容易惹起各式题目,由于它们会导致 “The image/page cannot be displayed” 之类的过失动静。不过正在网页速率优化方面,它们拥有更大的缺陷:当浏览器寻找丧失的或独立的文献时,它会打发资源,这不成避免地会导致页面经管速率变慢。 是以,请查抄独立或丧失的文献,网罗拼写过失的文献名。

  Firebug(参见参考原料)是最风行的 Firefox 扩展之一,该利用轨范也许使 Web 斥地职员的职业特别轻松。它蕴涵很多极度有效的功用,比方:

  另一种淘汰压缩职业的技能是行使幼写款式的 div 元素和类名。因为巨细写敏锐性,而且行使的是无损压缩,header 与 Header 区别,它们被压缩为两个区其它标志。鄙人面的例子中,关于压缩轨范来说,Important 类与 important 类是区其它,这意味着关于压缩轨范,它们暗示区其它对象,是以被划分压缩为两段区其它文本。

  YSlow Firebug 扩展使主观的网页剖判日渐被镌汰。YSlow 行使 Yahoo! 草拟的面向高功能网站的威望准则,剖判网页并告诉您它们变慢的出处。

  您不需求像圆满主义者那样探求圆满完整的 JavaScript 代码。不过,很多斥地职员没有郑重对付代码剖判,一样正在斥地历程中跳过了这个措施。不幸的是,过失和倒霉的编码践诺不只不太专业,并且可以减缓利用轨范的 速率。当浏览器忙于应付过失和倒霉的编码践诺时,加载不只需求更多韶华,还会导致难以调试的过失。

  YSlow 是一个相对较幼但极度有效的 Firefox 扩展。当启动 YSlow 时,该扩展正在浏览器的下半片面中掀开,如 图 4 所示。▪️•★★-●△▪️▲□△▽★◇▽▼•◆●△▼●●■□★▽…◇△▪️▲□△△•☆■▲★△◁◁▽▼◇•■★▼○▲口▲=○▼▲●☆△◆▲■

极速PK10彩票注册网

时间

2019-04-29 10:06


栏目

产品动态


作者

admin


分享