[web] 性能优化

1.减少请求

压缩、合并 JS、CSS、图片。

Sprites图。

2.CDN 内容分发网络

3.缓存组件(后端配置)

Expires 头。

HTTP 1.1 以上 Cache-Control max-age 头。

4 .压缩组件

服务器设置gzip压缩组件。

客户端->Accept-Encoding:gzip

服务器->Content-Encoding:gzip

5.常规

样式表放head间并不是更快，而是逐步加载，用户体验更好，防止白屏、无样式内容闪烁。

脚本放在末尾。

尽量不要使用document.write()会阻塞并行下载。

CSS expressions only work in Internet Explorer.避免css中使用expression()。

6.使用CNAME(DNS)可以实现并行下载，两个主机名为最佳。

http1.1建议为2个，http1.0建议为4个，多用http1.1

7.使用外部文件

纯粹来说内联比外部引用更快，但是外部文件可以缓存。

可以通过设置cookie或session之类的标记，后端动态生成内联页面，然后加载外部文件，下次再访问时生成引用外部文件的页面。

也可以通过加载完后加载外部文件，但是有可能会和内联的冲突，要双重定义。

function doOnload() {
    // Do the downloading awhile AFTER the onload.
    setTimeout("downloadComponents()", 1000);
}

window.onload = doOnload;

// Download external components dynamically using JavaScript.
function downloadComponents() {
    // Set a cookie if there is no cookie. Make it session-based.
    document.cookie = "CA=1";
    downloadCSS("xx.css");
    downloadJS("xx.js");
}

// Download a stylesheet dynamically.
function downloadCSS(url) {
    var elem = document.createElement("link");
    elem.rel = "stylesheet";
    elem.type = "text/css";
    elem.href = url;
    document.body.appendChild(elem);
}

// Download a script dynamically.
function downloadJS(url) {
    var elem = document.createElement("script");
    elem.src = url;
    document.body.appendChild(elem);
}

8.减少DNS查找

设置DNS缓存：Time-to-live 或 Keep-Alive。

服务器->Connection: keep-alive

减少主机名(域名)，为配合并行下载，也不能太少。

9.精简代码

精简(压缩)：移除注释和空白，有的工具会改写参数名。

或是混淆：除了移除注释和空白还会改写函数和变量名，提高性能，抵制反向工程，但有可能会出错。

两者性能会场接近，混淆可能会稍高一毛毛，但是为了防止出错，除了为了反向工程，一般用精简足矣。

注意内联的也是可以(应该)精简的。

10.避免重定向

300 Multiple Choices (based on Content-Type)
301 Moved Permanently
302 Moved Temporarily (a.k.a. Found)
303 See Other (clarification of 302)(http1.1)
304 Not Modified
305 Use Proxy
306 (no longer used)
307 Temporary Redirect (clarification of 302)(http1.1)

301、302大多被滥用。

①url缺少结尾的斜线(/)，因为会自动索引，会产生一个301，是许多服务器的默认行为。

可以通过配置服务器解决，使用 Alias、mod_rewrite、DirectorySlash等技术，如果不是为了美化url，

最好还是写路径的时候注意填写完整路径防止无谓的重定向。

②如需重定向网址时(域名变迁)，可以使用 Alias、mod_rewrite、DirectorySlash等技术，

将后端代码合并到一个服务器上，或使用CHAME将两个主机名指向相同的服务器。

③追踪内部流量：使用 Referer。

追踪出站流量：使用信标(beacon)，它通常是一个1px*1px的透明图片或者使用204响应(XMLHttpRequest)。

11.确保脚本只被引用一次

团队较大时需要较好的规范，

头部调用模块，或者其他方式明确脚本不会被重复包含

12.配置或移除ETag(Entity Tag)

比对客户端组件是否与服务器配对时：

①比较最新时间服务器，如服务器的Last-Modified响应头与客户端的If-Modified-Since比较->是否返回304响应，返回200响应且有Content-Length说明重新下载了。

②比较实体标签，如客户端的If-None-Match与服务器的ETag比较->是否返回304响应。

通常除非只使用一台服务器，在集群服务器与代理服务器环境下，需要配置或完全移除ETag。

13.尽量缓存ajax内容

设置HTTP头，设置不为 Cache-Control : no-store ,Expires不为过期时间

具体设置还要根据请求个性化配置，比如说参数最好是比较稳定不是易变的；将修改时间加入参数中；

posted @ 2016-04-23 00:05 晴明桑阅读(165) 评论(0) 编辑收藏举报

刷新页面返回顶部

[web] 性能优化

公告