编程以来遇到的常见的前端优化（持续更新）

常见的一些优化，在做题和实际开发中遇到优化的点和解决办法.

1.字符串的连接效率

字符串的连接机制

var str ;
str = 'this is a string';
str = str + ',another string.';

对于这个连接操作JS的处理机制是：

(1)新建一个临时字符串，
(2)将新字符串赋值为 str + ',another string.' ,然后返回这个新字符串
(3)并同时销毁原始字符串
因此字符串的连接效率较低。

提高效率的办法是用数组的join函数,使用join代替字符串拼接这个技巧对于IE6、7有显著性能提升，同时对现代浏览器，没有太过明显的性能损耗。则可以将需要连接的字符串push进一个数组，用join('')将其转化为字符串。

实例：阿里巴巴2011年前端笔试题：

// 请把以下用于连接字符串的JavaScript代码修改为更高效的方式
<pre name="code" class="javascript">var htmlString = '< div class=''container'' > ' + ' < ul id=”news-list” > ';
for (var i = 0; i < NEWS.length; i++) {
　　htmlString += '< li > < a href=" +NEWS[i].LINK + '" > +NEWS[i].TITLE + '< /a > < /li > ';
}
htmlString += '< /ul > < /div > ';

优化后为：

var htmlString  =  "<div class=<span style="line-height: 25.2px; font-family: verdana, Arial, Helvetica, sans-serif;">”</span><span style="line-height: 25.2px; font-family: verdana, Arial, Helvetica, sans-serif;">container”>"   +   "<ul id=”news-list”>";</span>
for  (var i  =  0;  i  <  NEWS.length;  i++) 
{
    var newsItem = NEWS[i];
    htmlString  +=  "<li><a href=""  + newsItem.LINK  + ">"  
        + newsItem.TITLE  + "</a></li>";
}
htmlString  +=  "</ul></div>";

2.大规模的循环体是主要的优化对象

在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为它需要查询散列键，只要可以，就应该尽量少用。for(;;)和while循环，while循环的效率要优于for(;;)，因为for(;;)结构的问题，需要经常跳转回去。常用的循环优化都会将循环倒过来,最常用的for循环和while循环都是前测试循环，而如do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快。

3.性能优化

从hexo博客进阶－性能优化中学习到的。

先来说说我们在面试中经常遇到的一个问题，

在浏览器输入url到页面打开，都做了些什么？

• 1浏览器里输入网址
• 2浏览器查找域名对应的IP地址：这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
• 3浏览器向web服务器发送一个HTTP请求
• 4服务器的永久重定向响应（从http://example.com 到 http://www.example.com）
  • 关于为什么要重定向。其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像http://example.com/和http://www.example.com/，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。所以要把带www的和不带www的地址归到同一个网站排名下。还有一个原因是用不同的地址会造成缓存友好性变差。
• 5浏览器跟踪重定向地址，发起GET请求
• 6服务器”处理”请求，向浏览器发回一个HTML响应
• 7浏览器解析显示HTML
• 8浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
• 9浏览器发送异步请求（ajax请求等）
• 分析

从上面的过程可以看出，其实大部分过程我们是控制不了的，我们只能从浏览器端入手来找一些可以做的事情。那么，我们可以做些什么呢？

• 少发送请求

把要加载的js文件（css文件同理）合并成一个（尽量少）文件，则可以向服务器少发送请求，从而减少等待时间。

• 压缩文件

使用压缩之后的js、css、img文件，同样可以减少请求时间。

• Css Sprite

这是css的一项技术，将图片尽可能多的合并成一个图片文件，第一次使用的时候加载这张图片，然后浏览器会缓存下来，其他地方再使用的时候就不需要重新请求了。

• js／css位置

css引用建议放在head标签里面；js脚本建议放到body内容的最后，原因：等待js加载或者脚本有错误的时候不会影响html页面的展示。