加快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是最简单有效的方案