在循环结束时一次性写入。

  减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

注：在IE中:hover会降低响应速度。

    JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

解决之道：在JSON中，有两种结构：对象和数组。

1. 一个对象以 “ { ”  开始，“ } ” 结束。每个“名称”后跟一个 “ : ” ；“名称/值 对”之间使用 “ ,  ”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用引号括起来

，数值型则不需要。如：

2. 数组是值（value）的有序集合。一个数组以 “ [ ” 开始， “ ] ” 结束。值之间使用 “ , ” （逗号）分隔。如：var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];

对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。

      HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。

    CSS指层叠样式表 (Cascading Style Sheets)，如果说把页面想象成一个人，HTML就是人的骨架，CSS就是人的衣装，一个人的品味从他的衣装就能一目了然。

    一名专业的前端开发也是一名优秀的重构，因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。

解决之道：HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

    CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：ID选择符 #box

   当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

      CDN的全称是Content Delivery Network，即内容分发网络。

    "其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" - 百度百科。

    上面几句话有多少能安安心心看完的，所以我还是通过说故事再来介绍一遍吧，顺便补一句，故事出处不明，^_^：

古代打仗大家一定都知道，由于古代的交通很不发达，所以当外族进攻的时候往往不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影，这个让古代的帝王很是郁闷。后来帝王们学聪明了，都将大量的兵员提前派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的作用。

      不足之处：实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温，这一缺陷将得到改进，使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器，或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。 

      注：这个是很基础且必须遵循的知识点，可是为了文章的完整性勉为其难加进来吧，嘿嘿。

    引入外部文件好处是显而易见的，而且是项目稍稍复杂一点的时候就有必要了这样做了。

易维护、易扩展，方便管理和重复利用。

      正确理解方式：

      JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript

代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论

是内嵌的还是外链的），

代码执行完成后，才继续渲染页面。这个也就是

      有一条非常重要的准则一直没有提到，就是CSS和JavaScript的压缩，直接减少下载的文件体积。我个人经常使用的方式是使用 YUI Compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。

    YUI Compressor是java程序，如果你对java很熟悉的话可快速的上手使用yuicompressor.jar；如果你对java很陌生也没关系，一样可以使用YUI Compressor，下面介绍其使用方式。

YUI Compressor的配置和使用：

      先配置使用环境：

    1.先确保电脑中是否安装了JDK

    2.再配置必要的环境变量(细节不能三两句说清，所以不知道如何设置还是搜索吧)

    3.在cmd界面，输入javac可测试是否安装成功

    使用方法可从cmd到进入yuicompressor.jar所在磁盘，我以自己的yuicompressor-2.4.2.jar为例：

1.压缩JS

    2.压缩CSS

9.  压缩图片和使用图片Sprite技术

注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。

    现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微

了解，一般图片压缩的方式有：

    1.缩小图片分辨率；

  2.改变图片格式；

  3.降低图片保存质量。

  关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite）。图片精灵就是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。

  至于图片精灵的操作细节就不多做介绍了，网上相关内容很多。

      有关Cookie的基础和高级知识可以去看本人写过的一篇文章《JavaScript 操作 Cookie》。

    因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，

使Coockie体积尽量小以减少对用户响应的影响；

  使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响

  Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。