WEB前端开发最佳实践（4）

加快JS文件加载速度

• 最有效的减少初始加载的文件体积和加载次数
• 延迟加载：避免代码加载和执行过程阻止页面的解析
• 尽量把js放在body的底部
• 使用成熟的加载框架HeadJS，RequireJS，LABjs
• 最佳实践提高性能：
  
  • 少用for-in循环
  • 谨慎使用eval
  • 正确使用数组
  • 尽量不使用全局变量
  • 确保解除已经不需要的事件监听，如要那些要移除的DOM对象上绑定的事件
  • 不要在闭包中返回外部不需要的对象
  • 减少变量访问时在作用域链上查找的层级，最好定义为局部变量

高效的DOM操作

• 在浏览器中DOM和ES的实现是分离的
• 在IE中ES在jscript.dll中，而DOM在mshtml.dll中
• 在chrome中，使用webkit中的webcore处理DOM和渲染，在V8中处理ES
• 减少DOM操作的最佳实践：
  
  • 合并多次的DOM操作为单次的DOM操作
  • 把DOM元素离线或隐藏后修改
    
    • 使用文档片段
      var fragment = document.createDocumentFragment();
      document.getElementById(‘myElement’).appendChild(fragment);
    • 通过设置DOM元素的display样式来设置none来隐藏元素
      var myElement = document.getElementById(‘Myelement’);
      myElement.style.display = ‘none’;
      …..DOM操作
      myElement.style.display = ‘display’;
    • 克隆DOM元素到内存中
      var myElement = document.getElementById(‘Myelement’);
      var clone = myElement.cloneNode(true);
      …..DOM操作
      myElement.parentNode.replaceChild(clone,myElement);
  • 谨慎取得DOM元素的布局信息
    
    • 把布局信息提取出来，在连续对DOM进行操作，这样会优化连续的DOM操作，这样只会重排一次
• 使用事件托管方式绑定事件
  
  • 绑定事件会占用事件
  • 浏览器保存事件绑定会占用内存
  • 采用冒泡机制，只在父元素上绑定事件，用于处理所有的子元素
    document.getElementById(‘list’).addEventListener(“click”,function(e){
    if(e.target && e.target.nodeName.toUpperCase == “LI”){
    //针对子元素进行处理
    …..}})
• 高性能网页，达到理想要求60帧/秒,30帧/秒
• Timeline：黄色占有很大的部分，则性能瓶颈在JS上，如果内存有异常，则要仔细检查内存溢出
• 使用测试工具：在线jsPerf，JSLitmus

高性能的JS

• xss:跨站点脚本攻击
• CSRF:跨站请求伪造，诱导用户发出请求
• 界面操作劫持：点击劫持和拖放劫持
• DDos攻击：借助于客户/服务器技术，将多个计算机联合起来作为攻击平台，对一个或多个目标发动DDoS攻击，从而成倍地提高拒绝服务攻击的威力
• 使用html5中的CORS，或者使用白名单或者CookieToken来进行限制
• 安全使用cookie，js不安全，保存数据最好使用localStorage
• 如果cookie含有敏感信息，使用Cookie的Secure设置
• Cookie中的Domain（域）和path（路径），设置这两个属性把范围缩小，避免不相关的路径或者域中访问到cookie
• 防止网页被其他网站内嵌为iframe
• 从浏览器兼容性上来说，脚本的方式是目前用来阻止网页被内嵌的最佳方式
• X-Frame-Options:DENY,SAMEORIGIN,ALLOWFROM uri分别表示禁止，允许相同及特定域页面
• 仅仅禁止被内嵌，设置X-Frame-Options是最简单有效的方案