前端开发攻略（前端调优23大规则）

一、Avoid CSS Expressions避免使用CSS表达式

CSS表达式(css expression)又称作为动态属性(Dynamic properties)是早期微软DHTML的产物，用来把CSS属性和JavaScript脚本关联起来。

微软提供了4个css expression方法：getExpression、recalc、removeExpression、setExpression。有兴趣可以参考MSDN。一般最常用的是直接在css中使用expression。

CSS表达使用带来的问题如何：

● 1)不符合WEB标准

CSS表达式这种在表现中插入行为的JavaScript代码，有悖于Web标准的结构、表现、行为相分离的理念。

● 2)效率低

一个CSS表达式会反复执行，因为需要不停的去计算CSS的属性值，甚至执行成百上千次，这会大大消耗计算机硬件资源，极端情况下可能会导致浏览器崩溃。

● 3)安全隐患

CSS表达式暴露了一个脚本执行的上下文，可能带来脚本注入的隐患。

二、Make JavaScript and CSS external尽量将JS和CSS放在外部

JavaScript内联和外联两种方式：

内联的语法如下：

[head] [script type="text/javascript"] function IsEven() { var number = document.getElementById("TextBox1").value; if (number % 2 == 0) { alert(number " is even number"); } else { alert(number " is odd number"); } } [/script] [/head]

外联的语法如下：

[head] [script type="text/javascript" src="ExternalJavaScript.js"][/script] [/head]

内联JavaScript和CSS的优点如下：

1)有效减少 HTTP 请求次数，提升前端页面性能，缓解服务器压力。

2)浏览器加载完CSS才能渲染页面，因此可以防止CSS文件无法读取而造成页面裸奔的现象。

内联JavaScript和CSS的缺点如下：

1)可维护性差，每天如果有需要修改内容，必须对很多页面进行修改。

2)内联JavaScript和CSS在每次页面加载的都必须重新加载。

3)协同开发的能力差，不方便多名开者同步工作。

外联JavaScript和CSS的优点如下：

1)如果JavaScript和CSS被多个页面调用时，这样修改更方便，只要修改一个文件就可以。

2)分离HTML、CSS和Javascript可以更容易操纵它们，方便协同工作。

3)外置Javascript文件可以被浏览器缓存。

外联JavaScript和CSS的缺点如下：

1) 外置的方式增加了HTTP的请求数。

2)浏览器要加载完CSS才能渲染页面，因此影响页面的性能。

三、Reduce DNS lookups减少DNS解释的次数

DNS(Domain Name System，域名系统)，万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，不用记住能够被机器直接读取的IP数串。通过域名，得到该域名对应IP地址的过程叫做域名解析(或主机名解析)。

减少DNS解析的目的很简单就是减少DNS解析所消耗的响应时间。

不同的浏览器对于DNS缓存有所不同，Internet Explorer的DNS缓存在[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings]键下由三个设置控制：

"DnsCacheTimeout"=30分钟 "KeepAliveTimeout"=1分钟 "ServerInfoTimeOut"=2分钟

这表示如果DNS服务器TTL值小于30分钟的话，对浏览器进行DNS查找的频率产生的影响很小。

对于FireFox浏览器在about:confifig中设置就可以：

network.dnsCacheEntries=400 network.dnsCacheExpiration=60 network.http.keep-alive.timeout=115

四、Minify JavaScript and CSS精简JS和CSS

精简JS和CSS的目的很简单就是让外联的JS和CSS文件大小变的更小，这样可以节省下载文件的带宽。

1.精简

将JS文件中的一些空格、空行、注释等一些不必要的字符删除

2.混淆

使用混淆的方法对函数、表达式、变量等进行处理。

源代码：

var a = document.getElementById('a'); a.innerHTML = 'hello world';

混淆后代码：

(function(a, b, c, d, e, f){ a[d] = a[b][c](d); a[d][e]=f; })(this, 'document', 'getElementById', 'a', 'innerHTML', 'hello world');

3.工具精简

工具精简就是对源代码进行压缩，可以使用的压缩工具也很多种，选择一种压缩工具进行压缩。一般的压缩可以压缩了20%左右。

源代码：

function getSelectedAttributes(formBuy) { var spec_arr = new Array(); var j = 0; for (i = 0; i < formBuy.elements.length; i ) { var prefix = formBuy.elements[i].name.substr(0, 5); if (prefix == 'spec_' && ( ((formBuy.elements[i].type == 'radio' || formBuy.elements[i].type == 'checkbox') && formBuy.elements[i].checked) || formBuy.elements[i].tagName == 'SELECT')) { spec_arr[j] = formBuy.elements[i].value; j ; } } return spec_arr; }

使用JSMIN压缩后的结果

function getSelectedAttributes(formBuy){var spec_arr=new Array();var j=0;for(i=0;i prefix=formBuy.elements[i].name.substr(0,5);if(prefix=='spec_'&& (((formBuy.elements[i].type=='radio'||formBuy.elements[i].type=='checkbox')&&for mBuy.elements[i].checked)||formBuy.elements[i].tagName=='SELECT')) {spec_arr[j]=formBuy.elements[i].value;j ;}}return spec_arr;}

4.使用gzip压缩

5.精简CSS

使用工具对CSS文件进行精简

五、Avoid URL redirects避免重定向

URL 重定向(Redirects)，也称为 URL 转发，是一种当实际资源，如单个页面、表单或者整个 Web 应用被迁移到新的 URL 下的时候，保持(原有)链接可用的技术。HTTP 协议提供了一种特殊形式的响应—— HTTP 重定向(HTTP redirects)来执行此类操作，该操作可以应用于多种多样的目标：网站维护期间的临时跳转，网站架构改变后为了保持外部链接继续可用的永久重定向，上传文件时的表示进度的页面等等。

重定向原理

之所以我们要尽量避免重定向，是因为我们在访问资源时原来的资源不存在，资源更换了位置，这样就必须重新发送一个新的HTTP请求来访问我们要的资源，也就是相当于我们发了两次HTTP请求来实现这个功能。

尽量减少重定向方法如下：

1.删除并非绝续需要的重定向

2.目录后面带上斜扛

http：//example.com/foo/表示目录。

http：//example.com/foo表示文件

3.重定向不仅仅是对HTML文件

在发现重定向时不仅仅是HTML文件会发现重定向，对JS、CSS等其它的组件也可能发现重定向

4.检查旧的重定向

有时一些旧的重定向还存在着，没有被删除，这种情况也会影响性能 5.删除不需要的重定向

6.清理重定向链

一些重定向写原来可能写成test.com，但可能HTTP发生更改时，重定向会出错，所以一般我们都写类似这样的URL地址http://www.test.com。

,