[js优化.docxVIP

官网JS优化————————————————————————时间版本号变更记录2015/5/26V1.0创建文档v1.0研发一部2015年5月26日1 jquery源文件升级目前官网jquery版本大多数为1.7.1和1.6.2，升级到1.11.1版本。涉及改版和新项目开始使用1.11.1。2 $(document).ready(function(){…})和window.onload$(document).ready(function(){…})会在页面的dom树结构加载完成之后执行。window.onload页面元素完全加载完之后执行img src=”.......jpg“ width=”100” height=”100”/前者只需要页面渲染出img标签，后者则需要页面将图片请求返回成功之后。3 页面渲染 1.用户输入网址，浏览器向服务器发出请求，服务器返回html文件.2.浏览器开始载入html代码，发现head标签内有一个link标签引用外部css文件。3.浏览器又发出css文件的请求，服务器返回这个css文件。4.浏览器发现了一行js代码的script的代码，浏览器发出js文件的请求。当浏览器在执行js代码时，不会做其他的事情，即script的每次出现都会让页面等待脚本的解析和执行，js代码执行后，才会继续渲染页面。（优化点：把js放到页面的底部是好的解决方法。需要在头部引入的js，非必须执行代码的放在$(document).ready(function(){…})。）5.浏览器继续载入body里面的代码，根据css开始渲染界面。6.浏览器在代码中发现了一个img标签引用了一张图片，向服务器发出请求后继续渲染后面的代码。7.服务器返回图片文件，由于图片占据了一定面积，影响了页面的布局，因此浏览器需要回头重新渲染这部分代码。（优化点：图片的尺寸造成了浏览器的重新渲染，在img标签内给图片加上width，height属性就可以避免页面重新渲染。）8.js脚本执行了某条语句，向document中插入了一个div，浏览器重新渲染这部分代码。9.页面到/html标签基本结束。 10.如果通过 js让页面更换了css文件，浏览器向服务器请求新的CSS文件，重新渲染页面。4.事件绑定4.1用delegate来代替live方法$(a).live(click,function(){alert(That tickles!)})；$(#container).delegate(a,click,function(){alert(That tickles!)})；jquery把alert函数绑定到document元素上，并使用click和a作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与a这一CSS选择器是否匹配，如果都是的话，则执行函数。4.2bind方法一个元素如果有多个事件，可以使用bind方法。5 减少不必要的dom访问5.1 减少dom访问层级$(.a1).parent().parent().parent(.a2);$(.a1). parents(.a2);直接使用id选择器效率更高。5.2使用变量来存储dom对象var $obj =$(“.a1”); 5.3减少添加dom次数添加多个dom元素时，创建一个文档碎片，把要插入的新节点先附加在它上面，然后再一次性添加到document中。 6 异步请求尽可能使用异步请求来实现页面局部刷新。返回值data，尽可能返回json。用$.parseJSON来转化字符串，避免使用eval()方法来转化json字符串。Json.parse（ie6-8不支持，需要json2）。7 减少全局变量局部变量尽量定义在函数内部，函数结束之后，变量会释放。尽可能的减少全局变量。8字符串操作8.1拼接var a = “abc”+”def”尽量避免字符串的直接拼接，这种方法很低效。较多字符串的拼接可以使用数组的join方法来实现。8.2尽量使用正则表达式对字符串进行循环操作，譬如替换、查找，使用正则表达式。9循环Var length = a.length;for（i=0,ilength,i++）{…}将数组长度定义成变量。10 比较容易犯的一些错误10.1 关于异步请求，返回值data。所有需要data数据的操作都必须放在succes后去执行。10.2 关于jquery选择器$(“.class”)、$(“#id”)所有选择document元素的操作必须在$(document).function(){…})里面执行。10.3 url重定向window.location.href=”http:///http:///”所有的操作都必须在重定向之前执行