定兴建站公司谈提高你的DHTML性能

温馨提示：专业网站建设、小程序制作、APP开发，尽在新城建站，详询 15544599750（手机、微信、QQ同号）

文前导读：

定兴小程序开发谈文章标题对网站优化有用吗？

定兴网站建设公司谈网站建设费用为何不同的建站公司报价不一样？

定兴网站推广谈如何让我的网站在搜索引擎上排名靠前？

定兴网站建设公司分享如何科学的准备网站建设资料？

[英文原文] msdn.microsoft.com/library/en-us/dnwebgen/html/dhtmlperf.asp?frame=true[中文译文]www.microsoft.com/china/msdn/msdnonline/features/articles/dhtmlperf.asp1.尽量使用同一个脚本函数来改变HTML内容。如果有多个事件触发，尽量只改变同一个地方。2.尽量把内容集中起来一次更新。如果不是特别需要有HTML的内容，尽量使用innerText代替innerHTMLSlow:divUpdate.innerHTML = "";for ( var i=0; i<100; i++ ){ divUpdate.innerHTML += "This is a slower method! ";}Fast:var str="";for ( var i=0; i<100; i++ ){ str += "This is faster because it uses a string! ";}divUpdate.innerHTML = str;3.更新文本内容时尽量使用innerText而不是DOM的createTextNodeSlow:var node;for (var i=0; i<100; i++){ node = document.createElement( "SPAN" ); node.appendChild( document.createTextNode( " Using createTextNode() " ) ); divUpdate.appendChild( node );}Fast: var node;for (var i=0; i<100; i++){ node = document.createElement( "SPAN" ); node.innerText = " Using innerText property "; divUpdate.appendChild( node );}4.尽量使用createElement 和 insertAdjacentElement 方法，而不是 insertAdjacentHTML Slow:for (var i=0; i<100; i++){ divUpdate.insertAdjacentHTML( "beforeEnd", " Uses insertAdjacentHTML() " );}Fast: var node;for (var i=0; i<100; i++){ node = document.createElement( "SPAN" ); node.innerText = " Uses insertAdjacentElement() "; divUpdate.insertAdjacentElement( "beforeEnd", node );}5.在数目巨大的情况下，尽量使用innerHTML 来添加项Slow:var opt;divUpdate.innerHTML = "";for (var i=0; i<1000; i++){ opt = document.createElement( "OPTION" ); selUpdate.options.add( opt ); opt.innerText = "Item " + i;}Fast:var str="";for (var i=0; i<1000; i++){ str += "Item " + i + "";}str += "";divUpdate.innerHTML = str;Faster:var arr = new Array(1000);for (var i=0; i<1000; i++){ arr[i] = "Item " + i + "";}divUpdate.innerHTML = "" + arr.join() + "";6.使用DOM来创建表格比TOM(insertRow,insertCell)好的多Slow:var row;var cell;for (var i=0; i<100; i++){ row = tblUpdate.insertRow(); for (var j=0; j<10; j++) { cell = row.insertCell(); cell.innerText = "Row " + i + ", Cell " + j; }}Fast:var row;var cell;var tbody = tblUpdate.childNodes[0];tblUpdate.appendChild( tbody );for (var i=0; i<100; i++){ row = document.createElement( "TR" ); tbody.appendChild( row ); for (var j=0; j<10; j++) { cell = document.createElement( "TD" ); row.appendChild( cell ); cell.innerText = "Row " + i + ", Cell " + j; }}7.通用的操作，尽量放在一个单独的外部脚本文件里8.约束你的动态属性（指setExpression的用法）9.使用数据绑定来显示你的资料，你可以使用排序、过滤等操作来提供不同视图，但只需要访问一次服务器(减少频繁访问服务器的问题)10.不要把自定义的属性加到document对象上，这会使得每次读取该属性时进行额外的重算。推荐加在window对象上Slow:for (var i=0; i<1000; i++){ var tmp; window.document.myProperty = "Item "+i; tmp = window.document.myProperty;}Fast:for (var i=0; i<1000; i++){ var tmp; window.myProperty = "Item "+i; tmp = window.myProperty;}11.尽量直接使用style对象来改变HTML对象外观，而不是className或者跟clas关联的styleSheet对象12.在访问textrange对象的父对象(指parentElement方法的返回值)时，先collapse合并range，尤其是复杂的range13.先插入对象，然后添加它的内容Slow(1).create (2).create (3)create TextNode (4)insert TextNode into 如前所述，这里用innerText会更快(5)insert into (6)insert into TBODY Fast(1)create (2)create (3)create TextNode 如前所述，这里用innerText会更快(4)insert into TBODY (5)insert into (6)insert TextNode into 如前所述，这里用innerText会更快14.用posLeft,posTop,posWidth,posHeight来代替left,top等，减少字符串->数值的转换15.尽可能少的使用定时器(指setTimeout,setInterval这些)，而在同一个定时器里对所有要变化的对象进行操作

拓展阅读：

定兴小程序开发谈文章标题对网站优化有用吗？

定兴网站建设公司谈网站建设费用为何不同的建站公司报价不一样？

定兴网站推广谈如何让我的网站在搜索引擎上排名靠前？

定兴网站建设公司分享如何科学的准备网站建设资料？

定兴小程序开发分享提升网站建设用户体验的方法

定兴建站公司谈个人网站建设的基本流程

定兴建站分享做网站优化前如何做准备？

定兴建站公司分享备案信息不提交给你们可以吗？

本文由新城建站整理发布，喜欢请收藏，转载请保留链接 定兴建站公司谈提高你的DHTML性能https://www.nccpu.net/dingxing/32488.html