设为首页 | 新版网站 | RSS订阅

>>欢迎来到济南吉峰网络!7×24小时服务热线: 0531-8299 3939    0531-5859 5456
公司简介
当前位置:主页 > 建站知识 > CSSDIV >

济南网站建设吉峰网络分享25种提高网页加载速度的方法和技巧

作者:济南网站建设   发布时间:2016-08-09 08:24  点击:

济南网站建设有时听到客户咨询,关于网站打开的速度,做好后网站打开的速度快吗?速度现在在当今的服务器基本都没有问题,当然垃圾服务器除外,除了好的服务器外,还有的好的代码来配合,今天小便来说说了解怎么经过缩短加载时刻来改进拨号上网用户的阅读体会,在某些景象下,加载时刻最多可缩短 80%。下面介绍二十五中网速办法和窍门。

一、运用良好的结构
可扩展 HTML (XHTML) 具有很多优势,可是其缺点也很明显。XHTML 也许使您的页面愈加契合标准,可是它很多运用符号(强制性的和符号),这意味着阅读器要下载更多代码。所以,作业都有两面性,测验在您的页面中运用较少的 XHTML 代码,以减小页面巨细。假如您的确不得不运用 XHTML,试着尽也许对它进行优化。

二、不要使规划超载
坚持精约准则:少便是多。页面中充满着各种类型的图画、视频、广告等,这大大违反实用性准则。

三、不要运用图画来表明文本
运用图画表明文本的最常见示例就是在导航栏中。美丽的按钮愈加具有吸引力,可是它们的加载速度很慢。此外,图画依然不能由搜索引擎直接索引,因而,运用图画进行导航不利于搜索引擎优化(search engine optimization,SEO)。当无需图画就能够经过很多 CSS 窍门创立美丽的按钮时,绝不运用图画来表明文本。

四、查看cookie运用情况
设置一个较早的 expire 日期或许根本不设置 expire 日期,会缩短呼应时刻。要在 PHP 语言中设置 cookie 的 expire 日期,运用以下代码:

 $expire = 2592000 + time(); 
 // Add 30 day’s to the current time 
 setcookie(userid, “123rrw3”, $expire);
?>

这段代码设置 cookie userid,并将 expire 日期设置为自当前日期以后 30 天。

五、不要包含不必要的 JavaScript 代码,尽也许将其外部化
应当明智地运用 JavaScript(仅在真实必要时才运用)并优化脚本的巨细和速度。缩短 JavaScript 下载时刻的另一种办法是运用外部文件,而不是包含脚本内联。这种办法也适用于 CSS,由于阅读器会缓存外部化的文本,而(在 HTML 页面自身中)以内联办法编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。

六、尽也许防止运用表格
表格被用作页面的首要构建块,可是作为页面规划元素,运用表格现在被认为是差劲的做法。有时分,您有必要运用表格(并且它们被认为是显现表格数据的超卓实习)。假如是这么,清晰地指定表格单元格、行和列的宽度和高度,不然,阅读器有必要履行很多操作来核算怎么显现它们,这会下降页面加载速度。

七、删去任何不必要的元素
也许这是全部窍门中最清楚明了的一个,可是它也是最简单忘掉的一个窍门。假如您真实需求在页面上放置很多内容,思考将页面分为 2 个、3 个或更多的独立页面。

八、一些优化页面的窍门
能够运用很多办法来优化您的页面,包含紧缩 JavaScript 文件,运用超文本传输协议(Hypertext Transfer Protocol,HTTP)紧缩,以及设置图画巨细。

九、紧缩和减小 JavaScript 文件
您能够运用 GNU zip (gzip) 来完结此使命,由于很多阅读器都支撑这种紧缩算法。另一种代替办法是减小文件。这种办法删去代码中全部不必要的字符,比方制表符(tab)、新行和空格。它删去代码中的注释和空白,进一步减小文件巨细。外部和内部样式表都能够减小。两种最盛行的减小东西是 JSMin 和 YUI Compressor。

十、运用 HTTP 紧缩,并一直运用小写的 div 和类名
能够运用 HTTP 紧缩来削减服务器与阅读器之间的通讯量。能够在 Apache 中配置 HTTP 紧缩(.htaccess 文件),或许能够将其包含到页面中(关于 PHP,能够运用一个 HTTP_ACCEPT_ENCODING 选项)。可是请留意:不是全部阅读器都支撑紧缩。即使是支撑紧缩的阅读器,紧缩和解紧缩都会加重处理器的负载。要在 Apache 中启用地毯式(blanket)紧缩(即紧缩全部文本和 HTML),运用以下指令:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

别的,思考一下您想要紧缩的内容。图画、音乐和视频在创立时现已进行了紧缩,因而您能够将紧缩目标约束为 HTML、CSS 和 JavaScript 文件。另一种削减紧缩作业的窍门是运用小写办法的

元素和类名。由于巨细写敏感性,并且运用的是无损紧缩,与不相同,它们被紧缩为两个不相同的符号。

 

十一、设置图画巨细
与表格单元格、行和列相同,当您未清晰设置图画巨细时,阅读器需求履行核算来显现图画,这会下降处理速度。

十二、将 CSS 图画映射用于装修功用
运用图画映射代替多个图画,这是另一种缩短加载时刻的办法,由于一起下载图画的各个独立部分能够加速全部页面的下载进展。或许,您能够运用某种名为 CSS sprites 的东西。CSS sprites 可协助削减 HTTP 恳求的数量。一个图画能够包含装修或安置页面所需的全部图画元素。您运用 CSS 来挑选(经过调用某些方位和维度)用于特定元素的映射。

十三、尽也许推迟脚本加载
一种提升页面下载速度的潜在办法是将脚本放在页面的底部,使页面加载更敏捷。一般,阅读器只能(从同一个域)下载不超越两个并行目标,假如一个目标是一段 JavaScript 代码,那么在该脚本下载完之前,别的页面组件的下载将会暂停。假如将 JavaScript 代码放在页面底部,(在大多数情况下)它将在最终下载,这时全部别的组件都已下载完。

十四、按需加载 JavaScript 文件
要按需加载 JavaScript,运用 import() 函数。
import() 函数:    
function $import(src){
  var scriptElem = document.createElement('script');
  scriptElem.setAttribute('src',src);
  scriptElem.setAttribute('type','text/javascript');
  document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

// import with a random query parameter to avoid caching
function $importNoCache(src){
  var ms = new Date().getTime().toString();
  var seed = "?" + ms; 
  $import(src + seed);
}

十五、验证函数加载
也能够验证一个函数是不是被加载,假如没有,加载 JavaScript 文件。 
验证函数是不是被加载:    
if (myfunction){
  // The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
  $import('http://www.yourfastsite.com/myfile.js');
}

留意:能够运用 defer 属性,但不是全部阅读器(包含 Firefox)都支撑它。


十六、优化 CSS 文件
假如经过恰当优化和保护,CSS 文件不一定很大。例如,具有很多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件相同,您需求优化 CSS 文件,使其包含所需的全部内容,一起坚持合理的巨细。别的,运用外部文件代替内联界说来习惯阅读器的缓存机制。

十七、运用内容散布网络
内容散布网络(Content-distribution network,CDN)是另一种缩短下载时刻的好办法。当您将静态图画放在 Internet 上的很多服务器上时,用户能够从离他们近来的服务器下载这些图画。此外,大多数 CDN 都在迅速服务器上运转,因而不管服务器的加载速度怎么,其呼应速度都比小型的超载服务器快。

十八、对财物运用多个域来增加衔接
CDN 的另一个优势是它们是独立的域。由于您的阅读器将并发衔接的数量约束到一个单一的域,因而不管何时加载一个页面,都很简单占满全部线程。因而,到别的财物的衔接被推迟了。可是,您的阅读器能够翻开新线程或到别的域的衔接,这么,从另一个域加载的任何财物都能够与别的全部财物一起加载。

十九、在合适的时分运用 Google Gears
运用 Google Gears(参见 参考资料)是防止用户重复下载同一内容的另一种好办法。Gears 答应用户离线拜访 Web 应用程序,可是也答应将页面元素持久化到用户的核算机上。因而,频频加载但未进行更新的内容能够存储在 Gears 数据库中,该数据库是一个 SQLite3 关系数据库办理体系。对同一内容的全部 next 恳求都能够从数据库(而不是服务器)直接加载。

二十、运用 PNG 格局的图画

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图画格局都已过期了:Portable Network Graphic (PNG) 是将来盛行的格局。当然,您能够说 GIF 和 JPEG 现已消亡,或许 PNG 没有任何缺点,可是全部事物都有各自的优缺点,PNG 以最好的文件巨细供给了超卓的质量。因而,假如进行挑选的话,应当尽也许运用 PNG 图画。

二十一、坚持 Ajax 调用简略、精确
当统称为 Asynchronous JavaScript + XML (Ajax) 的技能在两年前出现时,这些技能为处理页面恳求和呼应供给了一种革命性办法。可是,拨号用户也许从来没时机体会其真实的优势,由于在很多景象下,Ajax 需求在阅读器与服务器之间很多通讯。因而,假如您能够坚持 Ajax 调用简略和精确,能够防止用户花费无止尽的时刻来等候元素改写或呼应。

二十二、进行一次较大的 Ajax 调用并在本地处理客户机数据

假如不能进行简略的 Ajax 调用,或许假如这些调用不能供给希望的成果,能够思考一种代替办法:进行一次大的 Ajax 调用来获取所需的全部内容,然后让客户机在本地处理数据。经过这种办法,客户机只需等候一次(获取传入的数据),可是在此以后(当阅读器与服务器之间没有必要通讯时),处理速度将更快。当然,还有很多 Ajax 优化技能,本教程无法逐个列出。

二十三、在沙箱中测验代码

还有一个经常被忘记的常用窍门。虽然清醒的 Web 开发人员一般会在发动应用程序之前对其进行测验,可是有时分测验会使他们不那么注重保护使命,或许新功用增加得太快,并且未经过充分思考或测验。成果,余下的脚本减缓了应用程序的速度。假如您增加一项新功用,能够首先在沙箱里(彻底脱离了应用程序的其余部分)进行测验,查看它作为单个函数的做法。经过这种办法,您能够重复查看,并剖析功用和呼应时刻,无需思考 Web 应用程序的其余部分。然后,当新功用的做法契合预期时,能够将其引入到应用程序的其余部分中,运转别的测验,确保功用自身的做法契合预期。

二十四、剖析站点代码
在很多场景中,自我检讨是一个不错的主张。走运的是,在开发过程中,咱们能够运用东西来协助检讨,并尽也许客观地进行实习。像 JSLint(参见 参考资本)这么的东西的价值是无法衡量的,虽然其站点声称它 “也许令您备受波折”,由于它向您供给了全部的潜在代码缺点,这些缺点不光使调试愈加困难,并且也许致使更长的呼应时刻。

二十五、查看孤立的文件和丢掉的图画
查看孤立的文件和丢掉的图画是一种明智之举。大部分 Web 开发人员都会查看过错的文件引证,可是这儿依然需求阐明一下。丢掉的文件简单导致各种疑问,由于它们会致使 “The image/page cannot be displayed” 之类的过错音讯。可是在页面速度优化方面,它们具有更大的缺点:当阅读器寻觅丢掉的或孤立的文件时,它会耗费资本,这不可防止地会致使页面处理速度变慢。因而,请查看孤立或丢掉的文件,包含拼写过错的文件名。


热门标签:

分享到:

------分隔线----------------------------
相关新闻   Related News
Copyright © 2002-2022 YH0531.CMS. 吉峰网络 版权所有
联系电话:0531-8299 3939 法律顾问:王幸福
24小时QQ:158699959 鲁ICP备11000417号-1
地址:山东省济南市市中区和信广场6号楼12层
关于我们 | 优秀团队 | 案例中心 | 业务范围 | 新闻中心 | 诚聘英才 | 联系我们 | 友情链接
本站关键词:济南网站建设|济南网站制作|济南建网站|济南网站建设公司|济南做网站|济南建站|济南做网站公司|济南建网站公司|济南专业网站制作
Copyright 2010-2021 www.sdyhkj.com Rights Reserved.| 网站地图 | RSS | BAIDUXML | GOOGLEXML