起航学习网

速度是留住客户的有效手段，一个网站如果能够提高网页打开的速度，那么就能赢得用户的青睐，那么如何才能快速打开网页呢，如何使用web前端技术提升网页的加载速度呢？

优化了加载速度的网站不仅可以提高其搜索引擎的排名，同时也可以降低网站的跳出率，提高其转换率，还能提供更好的终端用户体验，这是当今基于Web环境取得成功的关键。今天为大家讲解web前端初级教程：如何提高网页加载速度

减少页面请求

从WEB运行原理上讲，IIS请求是无状态的，在服务器端一直是连接和关闭的不断进行着，如果能减少服务器请求，总的时间将会减少。

之前我下载163邮箱的登陆页面的图片时发现，它们的只用到了一个图片来完成整个页面的所有图片，当时我就纳闷了，这跟平时做的网站不一样呀。然来这样做减少浏览器的请求次数，用httpwatch你会发现请求的总时间大大减少了。同样的想法，在做css样式，javascript代码的时候也要做到尽可能的放在一个文件下来减少WEB请求。

样式、行为、结构分离

当第一次访问页面的时候，用户就可以把CSS,JS代码下载下来，这样做虽然第一次使网页加载的速度变慢了，但后面的页面将快很多。当用户访问这个网站的其它的页面时，由于其它页面也引用了这个CSS样式和JS代码。浏览器发现它已经下载好了，下一次就可以不用下载了。这样就做到了一次下载，后续速度的效果。

页面压缩技术，给我们JS，HTML代码进行瘦身

Jquery作为JS最轻量级的类库，它的原类库是242KB，压缩后的它竟只有91.6KB。常见的压缩工具有Google Closure Compiler、YUI Compressor、JsPacker、gzip。我常用的是gzip，因为它的压缩率是最高的。用jdk压缩后它会把一些空格去掉，把我们很长的变量名换成换成很短的字母来代替。

一些细节

把CSS样式放在头部，如果JS很多的话，把js代码放在尾部。这样做可以尽可能的先加载页面的DOM结构，然后才可以级用户体验。如果JS很多的大的话，页面都没加载完，何来用户体验之说呢。

使用存储过程

在运行存储过程前，数据库已对其进行了语法和句法分析，并给出了优化执行方案。这种已经编译好的过程可极大地改善SQL语句的性能。由于执行SQL语句的大部分工作已经完成，所以存储过程能以极快的速度执行。这种预编译的sql语句就可以直接执行而节省了很大一部分查询的时间。

适当的使用AJAX

现在的Ajax好像有点被神话了，好像网页只要Ajax了，那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高，反而会降低你的网页效率。Ajax的确是个好东西，但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。尽量少使用VS为我们提供的服务器控件的页面样式，自己动手把样式写在样式文件里。尽量写得通用些。

页面缓存

在大型的门户网站都用到了缓存技术，它是以空间换时间的技术。缓存主要是为了提高数据的读取速度。因为服务器和应用客户端之间存在着流量的瓶颈，所以读取大容量数据时，使用缓存来直接为客户端服务，可以减少客户端与服务器端的数据交互，从而大大提高二次页面的访问速度的程序的效率。

文章出自：http://qh.itpxw.cn/peixun/web/201737304.html

文章标题：如何使用web前端新技术提升网页加载速度

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉