网站优化的14条准则

时间 2019-11-07

原文原文链接

1、尽量减小HTTP请求数

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

咱们能够经过合并js文件、CSS文件、使用CSS Spire技术来合并图片文件减小http请求减小服务器的压力。php

2、使用CDN

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

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

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

4、启用gzip压缩

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

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

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

6、将script放在页面最下面

通常来讲咱们是将js代码放在head标记内部，可是若是一个脚本执行的时间过长，就会致使浏览器崩溃。例如：express

<!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种方式虽然都会致使浏览器崩溃，可是第二种会展示出页面内容，提示了用户体验。缓存

7、避免在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>

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

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

9、减小DNS查询

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

10、最小化js和css

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

11、避免重定向

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

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

12、移除重复的脚本

重复脚本可能致使页面的潜在问题，例若有如下的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;

当咱们仅仅在页面中引用一次脚本文件时就会获得咱们指望获得的结果，而当咱们重复引用的时候就没法获得咱们指望的结果。

十3、配置实体标签ETag

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

十4、使用AJAX缓存

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

附：Yslow插件的使用

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