推荐：如何加速网页的打开速度
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
推荐：如何加速网页的打开速度
对于加载精简来说，最大的好处莫过于对页面的加速。加速有两点：第一是由于资源加载量减少，对于页面首屏加载速度的提升；第二是某些加载精简的方法，会在一定程度上加快页面的渲染速度。同时，由于加载量的减少，剩下了一些带宽，从而减少了带宽费用。
当然，事情都有两面的地方。加载精简会在一定程度上影响页面的；部分方法也会造成一些额外的脚本开销。
寻找合适你的方法很重要，毕竟每个网站性质、用处、节点都可能不同。比如项目初期，可能宣传和扩散知名度方面重要些，这时候建议不要大量使用动态生成内容的方式，影响。
第1章 存储资源
1.1 离线存储
1.1.1 为了移动
由于浏览器支持情况不同，离线存储在PC端没有大量的使用，反而在移动端的支持情况越来越好，如今Android、iOS都能使用离线存储，所以离线存储广泛的使用于离线APP应用。
对于离线存储，最重要的便是manifest文件。我们将需要缓存的文件列入cache段，将不需要缓存的内容列入network段即可。
图2-1 manifest文件示例
当浏览器加载页面时，发现manifest文件后，会检查它的内容是不是有修改，如果是，重新下载cache段的文件并缓存；如果不是，则跳过。
图2-2 更新离线缓存
需要注意的是，当我们使用离线存储时，浏览器会强行只读离线缓存的文件。我们需要将页面使用到的所有的资源都列入manifest文件中，不论是在cache段，还是network段。否则浏览器将报错，说找不到文件。
图2-3 未将所有文件列入的加载报错情况
1.1.2 更新
对离线存储的资源更新，需要修改manifest文件的内容。当然，我们一般不会随意修改文件名已达到修改manifest文件内容的目的。一般的做法是，在文件内新增一行注释，注释中写明目前的版本号，以后每次需要更新的时候，修改版本号就行了。
图2-4 第二行即为注释的版本信息
另外，我们可能需要功能更加强大的离线存储缓存更新的机制。试想一个新闻类的APP，我们需要在手机离线时读取本地存储的数据，当APP发现用户联网后，将读取在线的内容，更新本地的数据和页面信息。
对于图2-5，我们使用HTML5新提供的online时间在页面加载的时候判断手机是否在线。监听window的online和offline时间，可以判断手机是不是已经联网。一旦检测到手机联网，我们就可以调用applicationCache对象的update方法，去检测manifest文件是否有更新，如果有，下载新的版本。当updateready时，使用swapCache方法刷新缓存。
当然swapCache不能刷新页面的内容，只是把离线存储的文件更新成我们下载的新内容，我们还需要再使用JS替换页面的内容。
图2-5 离线存储进阶应用
1.1.3 残缺美
在使用离线存储的时候，总有些感到不是很爽的地方，列出来吐吐槽。
首先是两个更新的问题。我们知道，修改manifest文件后，浏览器会重新下载文件，而且是全部重新下载。这其实很蛋疼，有时候我们只需要更新其中一个文件，有点儿殃及池鱼的感觉。另外，在更新manifest文件后，我们需要刷新两次页面才能将最终的新内容呈现在页面上。
然后，如果我有很多文件要存储，需要把文件一个一个列入cache段里，就算使用程序生成，出来的manifest文件也有一定的体积。对于一个需要缓存300个文件的页面，使用相对路径，生成的manifest文件也有4K。在碰上更新的话，下载量有点儿大。
图2-6 APP有200多个小图标需要缓存
最后，对于同一个页面的带参URL路径，离线存储会当成不同的新文件进行缓存。如果您有100个不同的参数需要穿，而用户竟然访问过这100个文件，那就……
图2-7 如果您有100个不同的传参
1.2 本地存储
1.2.1 本地存储的方法
userData是IE提供的一个本地存储方法，他将需要存储的内容放置在本地的一个XML文件中，并在页面的一个元素中设置一个调用的锚点。具体使用方法为：使用getElementById获取页面内的一个元素，使用addBehavior(“#default#userData”)对其添加本地存储的行为；使用setAttribute将需要存储的内容对其进行赋值，并用save(“XXX”)方法将内容存储在名为XXX的XML文件中；使用load(“XXX”)方法加载本地的XXX.xml文件，并用getAttribute获取已经存储的内容。
图2-8 IE的本地存储数据
关于HTML5本地存储localStorage的详细方法，请参见我的翻译文章《网络应用程序本地存储的前世今生》。
图2-9 Chrome的本地存储数据
对于IE浏览器，使用IE提供的userData方法；对于支持HTML5的浏览器(Firefox、Chrome、Safari、Opera等)，使用localStorage提供的方法；对于其他浏览器使用常规方法加载内容。
图2-10 判断流程
1.2.2 资源处理
对于本地存储，我们可以使用来存储数据，或者能转为数据形式的文件。例如一些SEO要求不高的文字，链接等等。
图2-11 数据存储
对于图片、CSS、JS等文件，我们也可以转为文本来存储在本地。这种方式大量应用于移动端。例如《掌上英雄联盟》APP的图片大部分都转化为base64编码存储在本地（不用离线存储的原因前面提及了）。Google和Bing的移动版，也将CSS和JS拆分后本地存储了。
图2-12 脚本的本地存储
图2-13 图片转base64编码后的本地存储
另外，对于本地存储更新，我的做法是：先判断本地是否存在已存储的内容，如果没有数据或者版本已过期（所谓版本是我设置的一个变量，当修改这个变量时即为版本过期），加载相应的JS数据，通过一个函数将数据处理为需要的格式，然后存储在本地；如果有且版本没过期，直接从本地获取数据。接着将数据通过函数进行进一步的处理，插入相对应的结构中。
图2-14 本地数据版本判断
第2章 按需加载
2.1 滚动加载
2.1.1 滚动加载的方法
其实这是很多大型网站都使用了的方法，比如淘宝、拍拍等等。对于不同显示器分辨率不同，所以第一屏高度不一样，节省的加载量所浮动。
首先，记录所有需要滚动加载对象的纵坐标值到一个数组。然后使用JS的监听方法（IE是attachEvent，其他浏览器是addEventListener），监听页面的scroll事件。一旦页面滚动，就会执行一个编写的函数，来判断对象是否处于浏览器的当前一屏内，如果是，将加载对象，如果不是，继续监听。当页面内的所有对象都被加载后，取消监听。
图3-1 执行流程
对于图片，滚动页面后，我们可以看到如图3-2的效果。
图3-2 图片滚动加载过程
2.1.2 板块滚动加载
其实把每个板块按照上面说的那种方式，像图片一样，滚动加载就可以实现这种效果，类似于bigPipe+Lazyload。
我们将页面拆分为框架、板块、板块内容，甚至可以细分到板块样式、板块脚本。当页面滚动完成时，判断处于当前屏的板块，动态并行加载板块内容。这种方式可以大大减少页面的加载量，但会影响SEO。
图3-3 板块滚动加载方式
2.2 点击加载
2.2.1 形式
点击后动态加载有很多形式，这是我们平时使用最多的方式。诸如页卡、翻页、展开、下拉、切屏等等都会使用到。以往的我们可能直接在页面写入内容，或者使用include载入，并将看不到的内容隐藏掉。但如果用户并没有点击切换，那么直接加载这些内容就产生多余的加载量。
图3-4 触发加载页卡内容
图3-5 翻页触发动态加载
2.2.2 触发加载
一般来说，动态填充数据的前期判断有两种形式。
一种是使用条件语句，判断内容区域是否有内容，如果没有，填充内容。这种方式最容易想到，但每次触发的时候都会判断一次。
另外一种是监听的方式。我们监听触发的对象是否被点击，如果点击，就像目标对象填充内容，然后取消这个监听。
图3-6 判断的两种方式
很显然，第二种方式只需执行一次，测试结果也表明这种方式是最快的。
2.2.3 数据插入方式
我们的新闻系统在生成新闻列表的时候，会根据我们的模板同时生成html页面、xml文件（我们很少使用）、json文件，在选择将列表插入页面的时候，我们有两种方式。
一种是动态加载json文件，用JS生成内容，插入页面；另一种是使用XHR加载html文件，使用responseText获取内容，插入页面。
图3-7 html文件
图3-8 json文件
其实，使用第二种方法有明显的好处。第一是，html文件体积比json文件小，加载量减少；第二是直接使用html文件，减少了JS动态生成结构的开销。
2.3 延时加载
对于一组有加载时间间隔的资源，我们其实可以对其做加载延时，按照其前后出现的顺序，在时间间隔后即时加载下一个资源。例如轮播广告就很适合这么做。
图3-9 轮播广告
2.3.1 轮播广告
以往轮播广告的加载模式是一次性全部加载，虽然采用延迟加载，但用户可能不会浏览到所有的轮播广告。当用户在首页只停留5秒时（例如轮播广告设置的是5秒切换一次），第二张广告图片以后的图片加载就没有必要了。
图3-10 轮播广告加载的请求瀑布图
其实我们可以这样，第一次加载第一张广告图片，当5秒后，判断第二张图片是否加载过，如果没有，加载第二张图片，以此类推。判断的方式很简单，我们只要在初期生成轮播广告结构的时候，不设置img标签的src属性，然后加载时判断这张图片是否有src属性，如果没有，加载图片并设置这个属性。
图3-11 判断方式
这样，如果用户在首页停留时长只有14秒，那么就节省了第4、5张广告图片的下载量，大约有100K左右。
图3-12 优化后的请求瀑布图
第3章 其他方式
3.1 文件压缩
3.1.1 代码
老生常谈的方法。我们可以将代码里多余的空格，回车，无用标签删除，替换名字较长的变量名等等方式减少脚本文件大小。
图4-1 脚本压缩对比
3.1.2 多媒体
对于图片，不同格式，不同压缩率都会造成图片大小的千差万别。选择一个合适并且图片质量可以接受的压缩方式，可以节省很大一笔加载量。
图4-2 图片压缩对比
对于视频、音频、Flash来说，也都一样，码率、格式等等方面都会对大小造成影响。
图4-3 视频压缩对比
CSS 3是一个不算太新，但由于我朝浏览器限制而得不到大范围应用的技术。其实我们可以在一些效果表现不是很重要的页面使用CSS 3来针对浏览器做一些差异化效果，已达到减少加载量的目的。
3.2.1 替换图片
对于移动端，或者一些PC页面，我们可以用CSS 3来替换一些图片效果，比如渐变、阴影、圆角等等。
图4-4 绿色按钮
例如图4-4中的绿色按钮，使用CSS 3渐变和图片所造成的加载量差距很大，在能使用CSS 3的时候，尽量不要使用图片。
图4-5 CSS 3和图片的大小对比
3.2.2 替换JS动画
一些对象移动、宽高变换等效果，其实可以使用CSS 3动画来实现。例如使用CSS 3和JS，来实现一个对象左右切换的效果，需要的代码量如图4-6所示。我们可以看到，CSS 3的代码量极少，而且执行过程中没有JS那些复杂的运算。
图4-6 CSS 3和JS的代码量对比
3.3 服务器
3.3.1 GZIP
雅虎13条里的内容。其压缩比例很大，大部分网站都使用了。
图4-7 gzip效果
3.3.2 缓存
设置Expires、Cache-Control以减少页面加载量，使浏览器从本地读取缓存。
Expires和Cache-Control
max-age均用于检测文件是否过期，如果没有，浏览器读取本地缓存。Expires是HTTP1.0的内容，需要返回一个304 Not Modified，并且过期时间是GMT时间，一旦客户端日期不准确，可能导致失效。Cache-Control是HTTP1.1的内容，使用文件自身的age值来做和请求时间对比，相对稳定。
图4-8 304 Not Modified
3.3.3 优图
优图是公司开发的，用于图片无损压缩的系统。目前互娱已经接入，在图片上传到服务器时，自动进行无损压缩，加载量减少的效果非常明显。
图4-9 优图
第4章 三个话题
在以前一次分享文档中，有同学提问为啥要抛开浏览器与服务器的缓存机制，自己实现一套本地存储机制，有没有什么特别的优势。其实相对与传统缓存来说，本地存储的好处有4点。
一是，对于存储需要处理的数据来说，本地存储可以在第一次加载的时候就将处理的数据存在本地，而传统缓存策略需要每次加载的时候都处理一次数据。
二是，本地存储相对稳定，有独立的存储空间，一般不会向服务器发送请求，而传统缓存时常会丢失。
三是，相对于传统缓存策略，本地存储的读取速度要更快些。当然，也有例外，Chrome的本地存储读取速度要慢于缓存文件的加载。
四是，对于iOS设备，Safari在重启后（包含本身的重启，或者设备的重启），缓存会被清空，而本地存储和离线存储不会。
4.2.1 Landing Page
对于互娱这边的游戏，客户端会有一个Landing Page，上面包含了最新的新闻，活动等等信息，玩家每次启动客户端都会看到这个页面。
根据监控，Landing Page平均每天给官网带来250w左右的PV，而官网平均每日PV大约1000多万。这个量应该完全填补了SEO的损失。而且游戏官网的用处一般仅限于给玩家提供游戏的功能服务、新闻、活动信息等等，玩家查询游戏攻略、资料一般会去媒体站，而不是游戏官网。
图5-1 《英雄联盟》的Landing Page
4.2.2 内页链接
在某些内容需要动态加载的时候，我们可以写一个到内页的链接，让搜索引擎爬虫顺着这个链接到内页去记录信息。
图5-2 到内页的链接
例如页卡中的新闻列表需要动态填充，如果不做处理，爬虫可能无法获取这些列表中的新闻链接。我们可以像图5-2的那两种方式，写一个到列表页的链接，这样爬虫就可以顺着这个链接到列表页去抓取信息。
4.3.1 健康度
健康度是我们以前接的加载时间检测系统，最近我们换用了OZ系统。使用了以上方法的网站，在3秒健康度上，有了很大的提升。
图5-3 3秒健康度
4.3.2 请求减少
采用以上方式减少加载量，虽然会造成整个网页的全部请求量有少许增加，但因为是按需加载，所以可以大大减少首屏请求量。
图5-4 首屏请求量
图5-5 整页请求量
4.3.3 带宽消耗
在我们接入优图后，图片服务器的带宽消耗大大减少。在图片压缩一半后，我们的带宽消耗减少了4G。
图5-6 图片压缩一半后服务器带宽消耗趋势图
由于公司系统只能针对服务器做带宽消耗监控，所以我们看不到做文件存储和按需加载后的带宽减少情况，但我们可以大概算算。如果一个游戏官网全部页面平均每天有PV1500w，用户平均每次加载页面节省10KB，假设第1天正常加载，后29天全部读缓存，每月可以节省带宽488MB。对于有几十款游戏产品的我们来说，这是一个很可观的量。
正如开篇所说的那样，介绍的这些方法，有部分会伤害SEO，增加脚本开销。所以大家在使用的时候需要进行一个合理的选择。
例如对于一个新产品，SEO相对更加重要些，这个时候可以适当选用一些减少加载量的方法；当产品成熟，有大量用户的时候，可以考虑进行更加深入的加载量优化。
希望此文档能帮助到今后做网站加载量优化的同学。
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注调整代码JS代码来提高网站速度_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
调整代码JS代码来提高网站速度
阅读已结束，如果下载本文需要使用
想免费下载本文？
你可能喜欢来一个网址！速度！给好评_百度知道
来一个网址！速度！给好评
我有更好的答案
我自己也看哈哈没有
我自己也看哈哈没有
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何提高网站的访问速度 - A5站长网
当前位置：
如何提高网站的访问速度
09:13&&来源：网站建设&
　　决定网站访问速度的因素有很多，包括网站代码、插件、主机质量等。提高网站的访问速度无论对于改善用户体验还是提高网站的搜索引擎排名都有着重大的意义。所以，对于站长来说，知道一些能够提高网站访问速度的方法很重要，在这里，小编就给大家分享一些提高网站访问速度的几个技巧。
　　1、挑选优质的虚拟主机
　　虚拟主机对于网站的访问速度来说是非常重要的，它为网站的运行打下了坚实的基础。优质的虚拟主机拥有足够的主机空间、极大的数据库容量与网站流量。同等情况下，国外的虚拟主机访问速度比较慢，国内虚拟主机速度很快，但是需要备案。所以，小编推荐大家使用香港主机，香港主机的访问速度很快，而且还不用备案。这里给大家推荐一家口碑较好的香港虚拟主机提供商&&主机91，该网站由于其优越的服务质量获得了许多用户的好评，并且最近对服务器机房进行了升级，提供了比以前更好的服务。
　　优质虚拟主机购买地址：/
　　2、优化网站代码与网站内容
　　太多冗余的网站代码会拖慢网站的访问速度，同时也会降低搜索引擎的好感，从而降低网站在搜索引擎上面的排名。因此，小编建议优化网站的代码，删除无用的冗余代码，并且采用外部调用JS代码的方式简化代码的数量。除了需要优化代码以外，网站内容也需要做到足够精简。首先，网站不能使用太多的图片，太多的图片会拖慢网页的加载速度;其次图片的大小应该适当，如果图片太大，可以先使用软件压缩到适当大小再进行上传。
　　3、删除冗余插件
　　对于那些搭建个人博客的站长，使用各种各样的插件来丰富自己网站功能的例子数不胜数。但是，不是网站插件的数量越多越好，太多的插件会导致网站的访问速度以及数据库的读取速度变得相当缓慢，从而降低搜索引擎的排名。一般插件的数量控制在4个以内，能不用插件的尽量不用插件。
　　4、使用独立IP
　　独立IP的使用有很多好处，首先，独立IP提高了网站的安全性。如果是几个网站共用一个IP的话，那么当其中的一个网站遭遇黑客攻击的时候，同一IP下面的其他网站也很难幸免于难，使用独立IP就可以有效解决这个问题。其次，独立IP的使用更加有利于网站的SEO优化，这是因为独立IP的使用能够避免其他不良网站的干扰，从而获得搜索引擎的好感，提高排名。最后，独立IP的使用意味着不用与他人共享资源，所以网站加载与访问速度都有着可靠的保障。
　　5、使用CDN加速
　　CDN(Content Delivery Network，内容分发网络)也被称为网站加速器。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"，使用户可以就近取得所需的内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。目前，很多的国内访问量较高的大型网站如新浪、网易等，均使用CDN网络加速技术，虽然网站的访问巨大，但无论在什么地方访问都会感觉速度很快。需要说明的是，CDN一般都是要收费的，免费的一般都不太可靠。
责任编辑：佩佩
延伸阅读：关键词：
站长杂谈 草根站长信息中心
兄弟网站：||||||
徐州八方网络科技有限公司 增值电信业务经营许可证： | 编辑热线：5 |
A5站长网 版权所有.当前访客身份：游客 [
当前位置：
12 个最好的免费网站速度和性能测试工具
如果你是位个人站长，就能理解网站速度的重要性。自从 Google 算法开始使用网页加载时间作为搜索排序参数之后，网站速度对 SEO 的影响非常大。而且，很慢的加载速度会对网站访问者产生消极的影响。如果你的网站加载速度很慢，需要等待一段时间才能加载，那么用户很有可能不会再次访问 这个网站。
所以，为了解决以上说到的问题，我们收集整理了一个最好的免费网站速度测试和分析工具列表。接下来介绍的工具都是免费，而且会提供非常详细的数据报告给用户，帮助用户做些必要的补救措施。希望大家都能在下面的列表中找到对自己有帮助的，使自己的网站访问速度越来越快！
1. Google PageSpeed Insights
允许用户分析网站页面的内容，并且会提供加快网站访问速度的建议。
2. GT Matrix
可以帮助用户开发一个快速，高效，能全面改善用户体验的网站。它会为网站性能打分，然后提供可行性的建议来改善已发现的问题。
3. Neustar Free Load Testing & Performance Test
这个工具是个简单快速生成网站性能分析数据的工具。它能忽略掉大小和地理位置来检测和负载测试网站，非常容易得出网站的性能分析，帮助用户加快网站加载速度。
4. Web Page Analyzer
是个非常强大的速度测试工具，提供详细的网站分析数据并且会提供提高网站性能的建议。它提供大量的 web 页面速度报告，global report，外部文件计算，加载时间，网站分析数据和改善建议。
5. Pingdom
是个非常杰出的工具，帮助用户生成大量网站的报告（页面大小，浏览器缓存，性能等级等），确定网站的加载时间，而且允许用户跟踪性能的历史记录，能在不同位置进行网站测试。
6. Load Impact
允许用户做些 web 应用的负载和性能测试。它不断增加网站流量来测量网站性能。Load Impact 会选择一个全球负载区，测试模拟客户，带宽，接收数据和每秒请求等。越来越多客户变活跃，这个工具会用个漂亮的图表来展示测量的加载时间。
7. WebPage Test
用户可以使用
来进行简单的测试，又或者是进行高级的测试，比如多步事物处理，视频采集，内容屏蔽等。测试结果会提供丰富的诊断信息，包括资源加载瀑布图表，页面速度优化检测和改善建议等。
8. Octa Gate Site Timer
工具允许用户检测每个用户加载一个或多个页面的时间。当页面加载的时候，SiteTimer 存储每个项目加载的数据和用户接收的数据，这些数据会用一个网格来显示。
9. Which Loads Faster
是用来测试 web 性能问题的工具，可以在每个用户的浏览器测试。whichloadsfaster 是开源的，使用 HTML 和 JavaScript 编写的测试工具，完全在客户端运行。
能分析 web 页面，基于一系列 web 页面高性能规则提供改进网页性能的建议。
11. Show Slow
是个开源测试工具，帮助检测各种网站性能指标。它会把页面速度的检测结果排序，有 dynaTrace AJAX 版，WebPageTest 和 YSlow。它会用图形化显示排序结果，帮助用户理解哪些因素会影响网站的性能。
12. Free Speed Test
是个在线网站速度测试工具，可以通过全球多个数据中心来检测加载时间和网站速度。这可以让用户了解全球各个角落网站的实际加载速度。
想通过手机客户端（支持 Android、iPhone 和 Windows Phone）访问开源中国：
旧一篇： 1年前
新一篇： 1年前
你也许会喜欢
2楼：阿力悉本
工具替代不了人，认为分析审阅所得信息还是很必要。作为工具可以实施组合拳。
像这样的网站，是如何生成网站的缩略图的呢？
这种文章永远存在于你的收藏夹，却也永不见天日；
6楼：Kevin19701
不错不错，收藏了。
7楼：lfjfrankie
mark 后面再用
都国外的，适合吗？
9楼：qinggan
没有中国的啊~
10楼：愤怒的大菠萝
11楼：维克多-如果
12楼：oneryx
引用来自“發哥”的评论/
像这样的网站，是如何生成网站的缩略图的呢？selenium可以
13楼：游客
14楼：风中静草
如何测试的速度和性能？
15楼：zhailibao
先收藏，会用到的
16楼：atuxe
google那个部分链接被墙了，不开proxy根本用不了
与内容无关的评论将被删除，严重者禁用帐号
本周热点资讯
本站最新资讯}