javascript杂谈 半整合半原创篇

笔者只是一名 菜鸟工程师，秉着热情好学，整合了几个web大神的博客，里面添加了一些 自己的东西与理解，希望对各位新手有所帮助

话不多说 开正题

HTML5特性

01、语义特性（Class：Semantic）


02、本地存储特性（Class: OFFLINE & STORAGE）


03、设备兼容特性 (Class: DEVICE ACCESS)


04、连接特性（Class: CONNECTIVITY）




05、网页多媒体特性(Class: MULTIMEDIA)




06、三维、图形、特效特性（Class: 3D, Graphics & Effects）


07、性能、集成特性（Class: Performance & Integration）


08、CSS3特性(Class: CSS3)




优化
减少HTTP请求
因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个
a) 合并CSS、JavaScript
b) 合并小图片，使用雪碧图


· 缓存
使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）
a) 缓存一切可缓存的资源
b) 使用长Cache（使用时间戳更新Cache）
c) 使用外联式引用CSS、JavaScript


· 压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip
a) 压缩（例如，多余的空格、换行符和缩进）
b) 启用GZip


js代码优化
一、 让代码简洁：一些简略的表达方式也会产生很好的优化
eg：x=x+1;在不影响功能的情况下可以简写为x++;
 
二、 变量名方法名尽量在不影响语意的情况下简单。（可以选择首字母命名）
eg：定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength。
 
三、 关于JS的循环，循环是一种常用的流程控制。
JS提供了三种循环：for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for(;;)、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。
 
四、 如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。
因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。
 
五、 尽量选用局部变量而不是全局变量。
局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。
 
六、 尽量少使用eval。
每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。
 
七、 减少对象查找
因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。
 
八、 字符串连接。
如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要连接多个字符串，应该少使用+=，如s+=a;s+=b;s+=c;应该写成s+=a + b + c；
而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下
var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");
 
九、 类型转换
1. 把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：("" +) > String() > .toString() > new String() 
尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。
String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。
2. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。
3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高
 
十、 尽量作用JSON格式来创建对象，而不是var obj=new Object()方法。
因为前者是直接复制，而后者需要调用构造器，因而前者的性能更好。
 
十一、 当需要使用数组时，也尽量使用JSON格式的语法，
使用JSON格式的语法即直接使用如下语法定义数组：[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。
 
十二、 对字符串进行循环操作，例如替换、查找，就使用正则表达式。
因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。
 
十三、 插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。
 
十四、 对象查询
使用[“”]查询要比.items()更快
 
十五、 定时器
如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。
 
十六、 尽量减少DOM调用
在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流 （reflow）操作。我们应该尽可能的减少DOM操作。 
回流操作主要会发生在几种情况下： 
* 改变窗体大小 
* 更改字体 
* 添加移除stylesheet块 
* 内容改变哪怕是输入框输入文字 
* CSS虚类被触发如 :hover 
* 更改元素的className 
* 当对DOM节点执行新增或者删除操作或内容更改时。 
* 动态设置一个style样式时（比如element.style.width="10px"）。 
* 当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值
解决问题的关键，就是限制通过DOM操作所引发回流的次数: 
1.在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入。 
2.在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除： 
   2.1. 通过removeChild()或者replaceChild()实现真正意义上的删除。 
   2.2. 设置该元素的display样式为“none”。 
3.CSS部分 
另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改，如element.style.backgroundColor = "blue"; 
每次修改元素的style属性，都肯定会触发回流操作，要解决这个问题可以： 
   3.1.使用更改className的方式替换style.xxx=xxx的方式。 
   3.2.使用style.cssText = '';一次写入样式。 
   3.3. 避免设置过多的行内样式 
   3.4. 添加的结构外元素尽量设置它们的位置为fixed或absolute 
   3.5. 避免使用表格来布局 
   3.6. 避免在CSS中使用JavaScript expressions(IE only) 
4.将获取的DOM数据缓存起来。这种方法，对获取那些会触发回流操作的属性（比如offsetWidth等）尤为重要。 
5.当对HTMLCollection对象进行操作时，应该将访问的次数尽可能的降至最低，最简单的，你可以将length属性缓存在一个本地变量中，这样就能大幅度的提高循环的效率。
 
十七、 重构<script>和<style> 调用方式或合并js文件来优化请求次数，并尽量使用外部链接方式引用
我们常常在一个HTML文件头中看到这样标记代码:
<script src="/scripts/a.js"></script>
<script src="/scripts/b.js"></script>
<script src="/scripts/c.js"></script>
大多是情况下，上述代码可以被简化成：
<script src="/ scripts /d.js"></script>
其中d.js中引用了a.js/b.js/c.js。通过document.write方法写入。
 
十八、 对于大的JS对象，因为创建时时间和空间的开销都比较大，因此应该尽量考虑采用缓存。
 
十九、 将脚本放到底部。
脚本一般是用来于用户交互的，建议可以等页面加载完成之后再加载js文件。所以，脚本和CSS正好相反，脚本应该放在页面的底部。
 
二十、 除去JavaScript中的空白区域
可以用相关工具去除空白注释等,将所有的名称都重新用一个或两个字母来命名将带来显著的改善。（但需要留有一个未验收的备份文件，方便以后维护）




兼容性问题


* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.


* 浏览器默认的margin和padding不同。解决方案是加一个全局的 *{margin:0;padding:0;}来统一。


* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。


  *浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}


 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)


 * 渐进识别的方式，从总体中逐渐排除局部。


  首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
  接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。


  css
      .bb{
       background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/
      }


*  IE下,可以使用获取常规属性的方法来获取自定义属性,
   也可以使用getAttribute()获取自定义属性;
   Firefox下,只能使用getAttribute()获取自定义属性.
   解决方法:统一通过getAttribute()获取自定义属性.


* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
  Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.


* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。


* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
  可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.


*超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了。解决方法是改变CSS属性的排列顺序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}


html新增属性
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。


* 绘画 canvas
  用于媒介回放的 video 和 audio 元素
  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  sessionStorage 的数据在浏览器关闭后自动删除


  语意化更好的内容元素，比如 article、footer、header、nav、section
  表单控件，calendar、date、time、email、url、search
  新的技术webworker, websockt, Geolocation






React认为一个组件应该具有如下特征：


（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。
如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，
一个复杂的UI可以拆分成多个简单的UI组件；


（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；


（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；




text/jsx,这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/jsx" 。
 其次，React 提供两个库： react.js 和 JSXTransformer.js ，它们必须首先加载。
其中，JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。
这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
react并不依赖jQuery，当然我们可以使用jQuery，但是render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。