如何有效优化网页代码
2015-09-08
835
0
1、 封装页面内的JS代码
越来越多的网站为了实现一些特定的交互效果不得不在页面中加入一些JS代码来实现想要的效果，但JS的加载会明显的拖慢网页加载速度，而且页面中加大量JS代码，还会增加页面中的噪声。所以优化代码第一步就是整理JS代码。判断页面中是不是直接写了js代码的方式就是，看有没有某个区域的代码开头与结尾分别是：
<script type="text/javascript">和 </script>；优化方式如下：
（1） 将网站各页面中使用到的JS代码尽量整合到同一个JS文件中，采用外部调用的方式，这样有利于提升页面的信噪比，便于蜘蛛爬行。
（2） 将JS文件的调用放在网页代码最后，</body>之前，有利于网页加载速度，在网页基础样式已经加载完后再加载JS，也是比较符合用户体验的。
2、 将网页中的CSS代码改为外链样式
有些网页代码在书写过程中，为了省事，直接将css代码直接写到了网页中，这同样增加了页面中无用代码的占比。辨别方式是看是否有开头与结尾分别是<style>和</style>的代码。优化方式同JS代码优化，但有一点不同的是CSS样式表调用的代码要写在<head></head>中，因为代码是自上而下加载的。如果写在页面结尾，可能会造成初始情况，展现在用户眼前的是错位网页。
3、 图片调用代码优化
为了美化网页，页面中通常会使用各种小图标，而众多小图标多次调用会增加网页的请求次数，从而降低网页加载速度。解决办法是：采用Css Sprite，将众多小图标做在一张图片上，而采用定位的方式在页面中分别展现出来。这样可以将多次请求变为一次请求，提升网页加载速度。
4、 避免图片重新渲染
页面要想美观，必定是图文结合。而为了提升网页加载速度，不可忽视的一点就是避免图片重新渲染。即图片展示时要在样式中指定图片展示的大小，如果让浏览器根据“区域代码”自动识别图片，会造成浏览器再解析图片后再次渲染图片的重复工作，从而降低网页加载速度。
以上每一项对于网页加载速度影响都不是特别大，但是量变引起质变，当所有问题堆到一起时，破坏力就体现出来了。而且将代码优化清洗之后，可以更加干净整洁的将网页内容展现给搜索引擎，有利于提升蜘蛛爬行效率，增加搜索引擎友好度。