让页面呈现速度提高20%

让页面展现速度提高20%

每次在项目开发或维护中，总会听到抱怨，页面打开的速度真慢，系统要优化了，代码应该要重构了。就我个人而言，对于页面打开速度的缓慢我们可以质疑和调查，但轻易的说对系统进行优化，代码进行重构这个就有点太随意了。

对于成型的系统而言，尤其是多人合作的系统，对于重构和优化一定要慎重，就如同你将带领你的部队进入原始森林一般。

不过，这些是题外话，这里要讲的是在不进行大动作的情况下让页面的展现速度提高20%，就一般系统而言，这很容易做到。呵呵，至少我现在看到的系统都是这种情况。

这里讲到的技术不涉及到后台，不涉及到架构，仅仅是对页面前端的一些优化改良就能达到这种效果。是不是很难以置信？以前我也是不相信的。这里涉及到了页面开发和功能开发人员的技术和意识的问题。最重要的那一头在页面设计，哦不，准确的来说是页面设计和切割人员，他们在设计页面时如果没有考虑到页面展示效率的问题，然后到功能开发人员整合页面时他们一般是不会考虑效率问题的，而是直接套用页面。并且功能性开发人员一般对于页面优化的知识了解甚少，在增加页面效果功能时加入的代码更是没有效率可言的。如果页面和开发人员都能意识到页面效率的问题，那么对于系统的页面展示将是有很大的效率提升。

好了，废话不多说，对于页面中效率的提升不难，只要记住几个要点就能达到效果，至于更深层的页面优化就不多说，那是专业人士的工作。

你的javascript代码位置放的对吗？
对于js处理方式的不同将会明显摆影响到页面展现的速度。
我看到过的写法八成以上都是写在页面的最上方，头部中。可大家有没有想过，把js放到最下方的底部，那样会是什么效果？结果是，页面的功能不变，但展现速度变快的。这是为什么？原因是，js的加载是阻塞线程的，如果你的js加载过慢，比如要加载一用户需要花10秒才能加载完成的js，而你的js又是放在页面头部的，那么只有等到你的js加载完成才能加载余下的页面代码，也就是要让用户等下10几秒的空白页面才能看到别的内容。但是，如果你的js入在了底部，这样，用户在打开页面时会先出现内容，在用户浏览内容的同时，js在用户感觉不到的情况下继续下载。

你的js和css代码有处理过吗？
这个是很典型的问题。js和css代码中有大量的空格，进行精简压缩和体积和之前的体积将会有20～50%的差距。而文件体积又是实实在在的影响着页面下载和打开的效率。
这个没什么好说的，大家可以打开自己正在开发或已经开发完成的项目，里面的js和css代码有多少是经过了精简和压缩的。

以上两个简单的注意点，如果能做到了基本上就能使页面展现速度提升不少，应该能达到20%的效果。当然，以上是最简单也最容易记和处理的两种。要想在页面上提升更多的效率，那就要考虑到更多的环境。下面就不详细说，只是简单的提一下。
页面中的内容对于更新程度的不同，可以设置不同的过期头信息。这种情况适合高峰期大访问量的门户型网站。过期头信息其实是很重要的一个效率优化措施，在此基础上，还可进一步考虑页面访问量和更新情况的平衡。
图标是否是在一个图片中合成的？一个页面中有越多的图标，那些打开页面所向服务器中发送的请求就越多，一个图标一个请求。如果在页面中有很多图标，可考虑将其合并成一个图片，再利用css的背景区域定位的技术在页面展示。这里就有了一个大数据的请求和多个小数据请求的对比问题，一般来说，一个图片的效果会更好，因为在页面中有可能使用了缓存时间，并且可能会是多个模块进行共用。那些用户在打开页面时只会下载一次，下次再打开同一页面时就会从缓存中加载。
是否使用了静态资源服务器？如果一个网站同时使用了一个静态资源服务器，那些它将会分流那些静态资源。如LOGO，固定图片等等，不仅仅会减少主服务器的处理压力，也会区分对待不同资源，那么静态资源基本就会在用户电脑中有个长时间的缓存。另一点，现在还流行商业的分发服务。就是将你的静态资源提交到商业收费的服务器，它们是云系统，在多个地区都有服务器，将会使静态资源加载提升。
内容压缩技术。现在已经看到不少的容器已经支持内容压缩了。就是大家经常听到的gzip技术。如果服务器和浏览器都支持，将会大大减少网络传输流量，一般都能减少30%以上。
当然，还有更多的别的细节点，如etag的支持，组件的分发，js的合并等等。这些就不细说了。现在这个时间没心思再写下去了。
最后，还是提醒一点，对于开发技术人员来说，能时刻记住最前两条就能使页面显示更快，效率更高。

?

查看更多 下一篇