前端优化,提高网页加载速度的思路与技巧汇总

网页的加载速度直接影响到用户的体验,尤其是对于新用户,这种影响非常明显。但是网页的加载速度受到网络,服务器和浏览器等多方面的影响,所以网页优化不仅仅涉及后端开发,前端同样“大有可为”,所以本文在前端的角度来探讨网页优化思路和技巧。

网页加载慢的后果

1 严重影响直接用户体验

这个每个人都有很直观的体会,如果一个网页半天打不开,绝大部分人都会选择直接关闭。也许数字更具说服力:有统计表明,如果页面超过3秒没有加载出来,那么至少会白白丢失40%以上的用户,所以给出的建议让用户能够等待的时间不要超过2秒。

2 影响在SEO上的表现

搜索引擎爬虫总是尽量模仿人的行为从而提高其自身的服务水平,如果一个网页加载很慢,就会影响到网页在SEO上的排名,这回简洁影响你网页的曝光量。

网页加载的过程

一个完整的页面加载过程,包括客户端(浏览器)发送请求、网络传输、服务器接收请求处理并返回数据、数据经过网络传输、客户端接收数据并渲染呈现。所以网页的加载速度受到网络,服务器性能,客户端性能等多方面的影响,所以网页加载速度的提升,不仅仅是后端服务器的事情,前端仍然大有可为。

前端能做什么

在提高网页加载方面,前端主要要从以下几个方面入手:减少代码大小、优化代码结构、优化网络请求、页面异步延迟加载。

减少代码大小

包括html、css、js代码文件的大小,又包括两个方面:

第一是精简代码,提升性能。在确保功能和性能等软性要求的前提下,采用更简洁的代码实现方式,也就是说能用一行代码搞定的就不用两行,包括不必要的html标签嵌套,css代码、js代码,这对前端编程的要求较高,另外js局部变量的查找速度比全局变量快的多,所以js中尽量使用局部变量而非全局变量。第二个是优化代码。在编码过程中,为提高易读性,必然带有许多空格,注释,或者其他冗余的代码,使用代码压缩工具,快速删掉逗号、注释甚至不需要的空格,可以显著压缩 JavaScript 代码大小,这类的工具有Google Closure Compiler 等。不仅仅是js代码可以用工具压缩,css和html代码同样可以压缩,工具也有很多。除了本身代码的优化,在使用第三方库的时候,要记得删除一些不必要的组件。第三是优化图片资源图片本身比文字(代码)占有更大体积,但是一图胜千文,图片的使用可以极大的美化页面,所以图片还是要用的,但是在保证美观的前提下,我们可以对图片进行优化,寻求美观与速度之间的平衡。

第一就是图片压缩,减小图片本身的大小。压缩分为有损压缩和无损压缩,各有利弊,这里不再细说了。具体方法可以下载专门的工具,也可以在线压缩。

第二是如果可以用CSS样式来替代图片,那就尽量用CSS替代图片。现在随着CSS3的成熟,一些特殊的形状和效果都可以实现了,但这各很考验CSS的功底哈。

第三是使用图片的时候的小细节,能用background使用图片就尽量不用img标签来加载图片,另外如无必要,能使用png8就不使用gif格式。

第四就是图片预加载和延迟加载技术,比如使用缩略图,默认占位符替代图片,但不影响后续页面内容的呈现。

第五是有些情况下,可以将图片转base64,将图片变成字符串,这样可以减少http请求,但是这个仅适用一些体积较小的图片,比如图标,不然转换后的字符串会比较大,得不偿失。

优化代码结构

页面是按照从上到下的顺序加载页面内容的,首先 部分中的所有内容都会在在你看到页面内容(body标签里的内容)之前加载完成。js的加载会中断所有其他元素的加载,正常情况下,只有在js加载完成之后,才会继续加载后续css和DOM元素,所以在 部分中使用 JavaScript 会导致延迟页面内容的呈现。

对此有两个方法。1 将样式表放在头部,如非必要,则将脚本放在底部。2 如果必须放在head标签里,可以采用async 标记,这样在加载js的过程中,不会中断后续CSS和DOM的加载,以及其他JS的运行。

优化网络方面请求

1 减少网络请求次数

每次加载页面的时候,除了嵌入页面本身的css,js代码,其他独立的每个css、js文件、图片文件都会产生一个网络请求。可以通过对多个CSS文件,js文件的合并来减少文件的个数。对于图片则可以使用雪碧图的形式,将

2 减少域名DNS查找

DNS查找是网络请求的第一步,浏览器只有根据域名找到对应的IP地址才能找到目标服务器,这个查找IP的过程如果耗时比较久,就会影响到网页的请求速度,所以需要适当降低DNS的时间设置。

3 Cookie的管理,使用缓存,设置期限

在Cookie的管理上, 减小Cookie大小,设置合理的过期时间能可以有效的提高网页内容加载速度。

4 使用CDN服务也是选项之一。

快到飞起

曲线救国——延迟加载

通常情况下,需要等网页的所有内容加载出来才会呈现,但是如果页面的内容确实较多,比如一些综合性的门户网站,那用户等候的时间肯定就得非常长了。而实际上,用户最先看多的只有一个屏幕那么多的内容,所以只需要在最短的时间内,将第一屏或者前几屏的内容呈现出来就可以了,其他的内容可以在用户浏览第一屏内容的时候继续加载,类似上面提高的图片延迟加载的方法,页面异步延迟加载,可以让别人“感觉起来”加载速度很快,从而提高用户体验。

以上是一些提高网页加载速度方面思路和技巧的总结,水平有限,如果有遗漏或者更好更新的方法,欢迎指正与交流!

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20190324A081L500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券