网站优化的14条准则

最新推荐文章于 2024-09-15 14:50:06 发布

weixin_33816611

最新推荐文章于 2024-09-15 14:50:06 发布

阅读量71

点赞数

文章标签：运维 javascript php ViewUI

原文链接：https://segmentfault.com/a/1190000002999664

版权

一、尽可能减少HTTP请求数

Http请求是指从客户端到服务器端的请求消息。包括：消息首行中，对资源的请求方法、资源的标识符及使用的协议。简单来说就是当我们打开网页的时候，网页中的文字、图片、多媒体等一切内容都是从服务器获取的，都是http请求。

我们可以通过合并js文件、CSS文件、使用CSS Spire技术来合并图片文件减少http请求减少服务器的压力。

二、使用CDN

CDN即Content Delivery Network，可以使得用户可以就近取得内容解决网络拥堵的情况，提高响应速度。常见的做法是在距离用户近的地方放置一台性能好、连接顺畅的副本服务器

三、添加`Expire/Cache-Control`头

如果服务器开启了Expire模块，服务器就会向浏览器响应Expire头。expire头的内容是一个时间值。这个值是资源在本地的过期时间。如果当前时间还没有超过资源的过期时间就不会重新发送http请求。
cache-control是http协议中常用的头部之一，它负责页面的缓存机制。如果该头部指示有缓存，缓存的内容也会放在本地。其操作流程和expire类似，但是cache-control拥有更多的选项。

四、启用gzip压缩

gzip压缩就是服务器将内容压缩之后发送给浏览器，浏览器对接收到的压缩文件进行解压（主流浏览器对gzip有很好的支持）。所有的文本内容都应该采用gzip压缩（例如html、css、javascript、txt、xml、php等）。使用Gzip压缩可以减少约40%的网络流量。

五、将CSS放在页面的最上面

CSS即层叠样式表，后定义的样式可以覆盖原来的样式，就会产生页面重绘的问题。在IE中将CSS放在页面底部就禁止了网页内容的顺序显示，以免重绘元素，在低网速的情况下就只会看到空白页。Firefox虽然不会组织页面的显示。但是页面下载后部分元素可能需要重画导致闪烁的问题。

六、将script放在页面最下面

一般来说我们是将js代码放在head标记内部，但是如果一个脚本执行的时间过长，就会导致浏览器崩溃。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom 加载顺序测试</title>
    <script>
        while(true){

        }
    </script>
</head>
<body>
    This is content!
</body>
</html>

推荐的做法是这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom 加载顺序测试</title>
</head>
<body>
    This is content!
    <script>
        while(true){

        }
    </script>
</body>
</html>

以上的2种方式虽然都会导致浏览器崩溃，但是第二种会展现出页面内容，提示了用户体验。

七、避免在CSS中使用Expressions

CSS表达式就是CSS属性的值等于javascript的结果。CSS表达式的计算频率很高：
图片描述
在页面中随便移动鼠标就可以轻松达到10000+的计算量。在IE6和IE7下执行以下的代码，可以看见计算量非常巨大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Expression测试</title>
    <script>
        var count = 0;
        function scare () {
            document.getElementById('count').value = count;
            return;
        }
    </script>
    <style>
        div{
            width: expression(this.offsetWidth > 750?scare():scare());
        }
    </style>
</head>
<body>
    移动鼠标时CSS Expression计算了<input type="text" id="count">次
    <div>鼠标在此区域移动</div>
</body>
</html>

八、将js和css放到外部文件中

其实这一条原则和第一条原则有些出入，甚至是对立的，但是从页面中分离出js和CSS可以减少页面的体积，并且增加了页面的维护性。但是对于一个不经常更新的页面或者脚本和样式很少的情况下就可以将脚本和样式文件写在页面内部。

九、减少DNS查询

减少DNS查询的一个常见做法是缓存DNS。现代浏览器自身拥有DNS缓存，IE默认的DNS缓存是30min，Firefox和Chrome默认的DNS缓存时间是60s。缓存时间长的浏览器可以减少DNS的重复查询，节省时间；缓存时间短的浏览器可以及时响应网站的变化，保证正确性。我们可以采用单域或者多域的方式部署站点。
图片描述

十、最小化js和css

去除不必要的空格、格式符、注释（代码格式化），例如JQuery库的压缩版的体积是94.1k，代码行数是5行，未压缩的JQuery的体积是276k，代码为10,338行。所以在项目上线的时候应该压缩js和css使线上的项目是最轻量级的，最大限度提高网站性能。

十一、避免重定向

重定向增加了http请求的数目。重定向常常伴随着2种http状态码：

301 Move Permanently：【永久重定向】用户请求的资源被永久转义到了别的位置（例如浏览器发送a.com的请求，服务器返回301让浏览器请求b.com）
302 Found：【临时重定向.0】浏览器发送的请求服务器找到了，但是不是在原始位置。

十二、移除重复的脚本

重复脚本可能导致页面的潜在问题，例如有以下的html文档和js文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="text" id="test" value="" />
    <script>
        var number = 0;
    </script>
    <script src="js.js"></script>
</body>
</html>

document.getElementById('test').value = ++number;

当我们仅仅在页面中引用一次脚本文件时就会得到我们期望得到的结果，而当我们重复引用的时候就无法得到我们期望的结果。

十三、配置实体标签ETag

ETag是实体标签，属于http协议，受web服务支持。使用特殊的字符串来标识某个请求资源的版本。用来唯一标识一个资源。当浏览器向服务器请求资源的时候如果服务器发现ETag一样，就会告诉浏览器使用本地缓存。
图片描述

十四、使用AJAX缓存

AJAX请求分为GET请求和POST请求。POST请求每次都需要服务器进行处理（200OK），所以POST请求的AJAX无法缓存；而对于GET请求，同一地址的AJAX请求不会重复执行（304 NOT MODIFY）

附：Yslow插件的使用

Yslow是雅虎开发的基于网页性能分析浏览器插件，可以对网站进行分析给出优化规则。该插件依赖于Firefox和Firebug插件，给Firefox添加组件Yslow后使用F12就可以看到Yslow选项，如图：
图片描述