课程咨询 :186-8884-0703

深圳Web培训 > 达内新闻 > 如何让网站瞬间加载完毕?
  • 如何让网站瞬间加载完毕?

    发布:深圳Web培训      来源:达内新闻      时间:2016-02-25

  • 现在有越来越多的人抱怨移动网络的网速太慢。这是个永恒的话题,因为无论移动网络网速多快也满足不了日益增长的网速需求。在14.4K调制解调器下龟速上网的时代早已被人们遗忘,现在人们的要求是瞬间打开任何网页。

    然而奇怪的是,现在人们抱怨的并不是网速,而是抱怨网络本身。如果单说提高网速的话,可以通过提升网络速度、降低网络延迟、或者是直接提高浏览器的速度来解决。但是抱怨网络本身的话,恐怕只能把锅甩给开创万维网的人了吧。

    网页在数量上的扩张速度是非常惊人的。由HTTP Archive进行的调查研究结果显示,在2012年1月,平均打开一个页面所需加载的数据量为1239kB,共计86次请求;而到了2015年9月,数据量增长到了2,162kB,请求数增加到了103次。这些数字虽然并不直接与页面加载和渲染所需的时间相挂钩,但是却是网页所含信息量发生变化的一个重要指标。

    而另一方面,随着网络的发展,本地移动应用也在更为迅猛地发展着。得益于移动设备性能的增强,应用的响应速度也越来越快。因此随着时间的推移,应用程序的响应速度与移动网络的加载速度之间的差距越来越显著。至此,才引发了人们对于网速的抱怨。

    这也就是为什么Facebook要开发交互式媒体内容创建工具Instant Articles,为什么苹果开发新闻应用,为什么谷歌要开发Accelerated Mobile Pages(AMP)的原因所在。谷歌虽然慢了半拍,但是其开发AMP的目的与苹果、Facebook是一致的,都像是想要使用户浏览Web的体验得到提升,使用户感觉就像在使用本地应用程序一样。

    对于AMP而言,有两个影响用户体验的关键点,那就是JavaScript和基于JavaScript的广告。 AMP的优势在于Google的强大服务器,劣势则在于Google广告。虽然听起来比较可笑,但广告的确是AMP的劣势所在。因为谷歌拥有互联网上最大的网络广告服务器。如果广告是其中的问题根源,那Google为什么不直接从广告的加载速度上解决问题呢?如果你想了解AMP,那么首先你需要了解Google新服务本身。

    什么是AMP?

    要了解AMP,你还需要了解Facebook的Instant Articles。Instant Articles使用RSS和标准的HTML标签来优化精简所创建的项目。虽然Facebook会自动播放视频或音频片段来提供一些额外的内容,但Facebook声称Instant Articles的加载速度仍会比直接从开放网络打开快10倍以上。快出来的这部分速度一些来自于优化精简的内容,而另一些则可能得益于缓存。

    但问题的关键是,Instant Articles只能查看与Facebook签署过协议的网站内容。这意味着,从Facebook的Instant Articles上,只有在阅读如美国国家地理(National Geographic),英国广播公司(BBC),以及Buzzfeed等网站上的内容时才会比直接从网页上看来的更快。苹果的News的工作方式也大致相同,使用RSS标准,然后苹果再对其中的内容加以优化。

    如何让网站瞬间加载完毕?

    所有这些应用程序都会对网络中的内容加以削减优化。这就基本相当于变相改善了Web网页日益臃肿的问题。

    而AMP不同于Facebook的Instant Articles和苹果的News的地方就在于,它并没有用RSS或者HTML标准,而是使用了自己优化过的HTML标准。 AMP上的HTML看起来就跟原HTML一模一样 ,一点也不花俏。事实上,如果你不去看顶部的AMP项目公告的话,你根本就不知道这个网页已经被AMP优化过,看起来就跟Web上的对应的网页一模一样。

    在AMP上用于标记使用的tag标签非常有限,如表单标签、音频或视频标签、嵌入标签、脚本标签等全都没有。只有在AMP的顶端会出现一个很短的HTML tag列表。遭受同样命运的还有JavaScript,AMP中不会出现广告和跟踪脚本。但是,虽然禁了其他的跟踪脚本,Google其实还是会跟踪你的。

    AMP自己也定义了一些标签,像是amp-YouTube,amp-ad或是amp-pixel。这些tag标签将有可能成为Web标准的一部分(也可能变成“ActiveX”的第二部分)。

    AMP听起来是一个非常棒的项目——更快的网页加载,没有任何跟踪脚本,没有任何JavaScript。不过,AMP上同样也有一些设计上的缺陷。

    AMP通过使用自定义组件amp-img重新设计了滚动图并将原有的HTML内容替代,同理也用amp-audio替代了音乐内容,用amp-video替代了视频内容。AMP的开发者认为这可以让AMP只有在需要时才去调用这些加载项。然而,这却造成了对Web浏览器自身的限制,而不是HTML本身。 AMP也很清楚这样做所带来的后果。你失去的不仅仅只是一些HTML标签,还有基于CSS的动画和滚动条。

    不过好在AMP的开发者在听取意见上做得非常好。在初期,一个关于AMP的代码曾遭到了强烈反对——原因是这条代码禁用了阅读时的缩放功能。值得庆幸的是Google听取了意见,消除了影响缩放的tag标签。

    AMP的标记语言只是其中的一部分。毕竟,如果AMP真正想做的事是去掉所有的Web增强功能,只呈现页面的内容的话,它完全可以不必这么大费周章。提高加载速度对用户来说是一个不错的附带好处,但从AMP的角度来看Facebook的Instant Article的话,看起来Facebook就像是把用户锁到了一个特定的网站、形式或者说服务中。

    更多内容请点击【深圳WEB前端培训

上一篇:如何像后端一样写前端代码?

下一篇:【达内职场秀】职业,行业,公司

最新开班日期  |  更多

WEB前端工程师--全日制班

WEB前端工程师--全日制班

开班日期:2月15日

WEB培训前端工程师--周末班

WEB培训前端工程师--周末班

开班日期:2月15日

WEB培训免费训练营一期

WEB培训免费训练营一期

开班日期:2月15日

WEB培训免费训练营二期

WEB培训免费训练营二期

开班日期:2月15日

  • 地址:深圳市福田区八卦四路华晟达(原南方苑)大厦4楼东—深圳WEB开发培训中心
  • 课程培训电话:186-8884-0703     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56