首页
网站首页
公司简介
资讯中心
推荐内容
返回顶部
JavaScript性能优化,文档碎片_javascript技巧_脚本之家
发布时间:2019-12-25 16:27
浏览次数:

代码如下: 复制代码 代码如下: var $alertPanel = $( document.createElement; $alertPanel.css.css.text; $('body',parent.document).append; 顺着他的意思,我也写了个Demo,发现确实是这样。 翻了翻资料,也没看到类似的问题。 然后使用原生的DOM方法写了一次,发现也不行,一样。 复制代码 代码如下: var div = document.createElement; div.style.width = "120px"; div.style.height = "50px"; div.style.border = "solid 1px #000000"; div.innerHTML = "Hello CssRain!"; parent.document.body.appendChild; 于是想到既然appendChild要parent.document,那么创建的时候是否也要parent.document.createElement呢? 于是把代码改成: 复制代码 代码如下: var div = parent.document.createElement; div.style.width = "120px"; div.style.height = "50px"; div.style.border = "solid 1px #000000"; div.innerHTML = "Hello CssRain!"; parent.document.body.appendChild; 这样就成功了, IE6和IE7能用。 看例子: 演示地址:http://demo.jb51.net/js/IE-createElement/page1.htm总结: 如果你想在IE6,IE7中创建一个父页面元素,那么你必须使创建元素属于父页面。 复制代码 代码如下: var dummy = parent.document.createElement; var t = parent.document.createElement; 在Firefox,IE8中,它允许在一个文档中创建要追加到另一个文档的元素。 所以在Firefox,IE8中,可以使用parent.document也可以使用document。 另外google浏览器非常怪异,很乱。如果要兼容google浏览器,那么建议换种思路吧,比如直接用 parent.函数名() 调父页面的方法。

Constructs a cookie with a specified name and value. The name must conform to RFC 2109. That means it can contain only ASCII alphanumeric characters and cannot contain commas, semicolons, or white space or begin with a $ character. The cookie's name cannot be changed after creation. The value can be anything the server chooses to send. Its value is probably of interest only to the server. The cookie's value can be changed after creation with the setValue method. By default, cookies are created according to the Netscape cookie specification. The version can be changed with the setVersion method. 以上是java API文档中对Cookie类构造函数的说明,重点对name和value可以使用的字符进行了介绍。 参数name需要遵循规范RFC2109,也就是说name参数只能包含字母或者数字,不能包含逗号、分号、空格及美元符号。cookie的name属性设置之后不能被修改。 参数value可以是服务端设置的任意值,该值可以通过setValue方法进行重新设置。 然后实际情况并非如此!! value值中不能包含逗号,如果value中包含逗号则程序无法编译。 如果value中包含逗号,如下: Cookie pwdCookie = new Cookie("option", "block1,block2"); 则异常如下: java.lang.IllegalArgumentException: block1,block2 在另外一篇关于JavaScript操作cookie的文章中提到: 在cookie 的名或值中不能使用分号以及空格。 总之,尽量不要在cookie中使用特殊字符。

后来是一技术群问到以下一段代码: 复制代码 代码如下: function html2node { var d = document.createElement; d.innerHTML = s; if (d.childNodes.length == 1) return d.childNodes[0]; var df = document.createDocumentFragment(); while df.appendChild; return df; } 大概的原理都明白,比较困惑的是为什么要用 document.createDocumentFragment 呢? 后来在网上搜索了一下相关资源才知道,document.createDocumentFragment 是用来创建文档碎片的。 当我们需要大量 appendChild 页面元素时,可以先将这些元素 appendChild 进document.createDocumentFragment。 然后只需 appendChild 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。

在浏览器中,我们一旦把节点添加到document.body中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法。代码如下: 复制代码 代码如下: for{ var op = document.createElement; var oText = document.createTextNode; op.appendChild; document.body.appendChild; } 但是,如果当我们要向document中添加大量数据时,如果像上面的代码一样,逐条添加节点,这个过程就可能会十分缓慢。 为了解决这个问题,我们可以引入createDocumentFragment()方法,它的作用是创建一个文档碎片,把要插入的新节点先附加在它上面,然后再一次性添加到document中。代码如下: 复制代码 代码如下: var oFragmeng = document.createDocumentFragment(); //先创建文档碎片 for{ var op = document.createElement; var oText = document.createTextNode; op.appendChild; oFragmeng.appendChild; //先附加在文档碎片中 } document.body.appendChild;//最后一次性添加到document中 经过测试,在ie,firefox下性能明显得以提高。大家可以自己测试下。 前端性能优化都是从一些细节地方做起的,如果不加以注意,后果很严重。 PS:这个优化跟循环添加html代码有点类似。

友情链接: 网站地图
Copyright © 2015-2019 http://www.nflfreepicks.net. 新葡萄京娱乐场网址有限公司 版权所有