3.请削减对DOM的操作

基来历根底理：

对DOM操作的代价是昂扬的，这在网页应用中的通常是一个性能瓶颈。

天生就慢。在《高性能JavaScript》中这么比方："把DOM当作一个岛屿，把JavaScript（ECMAScript）当作另外一个岛屿，二者之间以一座收费桥毗连"。所以每次拜候DOM城市教一个过桥费，而拜候的次数越多，交的费用也就越多。所以一般建议尽可能削减过桥次数。

解决体例：

修改和拜候DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请公道的使用JavaScript变量贮存内容，斟酌年夜量DOM元素中循环的性能开消，在循环结束时一次性写入。

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

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

4.使用JSON格局来进行数据互换

基来历根底理：

JSON是一种轻量级的数据互换格局，采取完全自力于语言的文本格局，是抱负的数据互换格局。同时，JSON是 JavaScript原生格局，这意味着在 JavaScript 中措置 JSON数据不需要任何特殊的 API 或东西包。

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

JS操作JSON：

在JSON中，有两种布局：对象和数组。

1. 一个对象以 " { " 起头，" } " 结束。每个"名称"后跟一个 " ： " ；"名称/值 对"之间使用 " ， "（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用引号括起来，数值型则不需要。如：

var obj={"name"："darren"，"age"：24，"location"："beijing"}

2. 数组是值（value）的有序调集。一个数组以 " ［ " 起头， " ］ " 结束。值之间使用 " ， " （逗号）分隔。如：

var  jsonlist=［{"name"："darren"，"age"：24，"location"："beijing"}，{"name"："weidong.nie"，"age"：24，"location"："hunan"}］;

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

5.高效使用HTML标签和CSS样式

基来历根底理：

HTML是一门用来描述网页的一种语言，它使用标识表记标帜标签来描述网页，作为一名合格的前端开辟，你有需要去知道其常常使用标签代表的含义（搜索引擎优化）和属性（表示形式）。

CSS指层叠样式表 （Cascading Style Sheets），如果说把页面想象成一小我，HTML就是人的骨架，CSS就是人的衣装，一小我的品味从他的衣装就可以一目了然。

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

或这样的CSS：

body .box .border ul li p strong span{color：#000}

以上都是对HTML和CSS很是糟糕的使用体例。

正确理解：

HTML是一门标识表记标帜语言，使用公道的HTML标签前你必须体会其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较根本的就是得知道块级元素和内联元素、盒模型、搜索引擎优化方面的知识。

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

ID选择符 #box 类选择符 .box  标签 div  伪类和伪元素 a:hover 

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

6.使用CDN加快（内容分发网络）

基来历根底理：

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

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