微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

javascript 异步的innerHTML使用分析_javascript技巧

php中文网

发布： 2016-05-16 18:38:21

原创

2080人浏览过

当然，这个分时加载技术只是一个辅助技术，本身没有添加节点的能力。如今，另一种更奇特的技术Asynchronous innerHTML又被开发出来了，不能不赞一下外国人在这方面研究是非常超前的。

复制代码代码如下:

 
function asyncInnerHTML(HTML, callback) { 
var temp = document.createElement('div'), 
frag = document.createDocumentFragment(); 
temp.innerHTML = HTML;//要加入的内容先放到这里。 
(function(){ 
if(temp.firstChild) { 
frag.appendChild(temp.firstChild);//然后一点点挪到文档碎片 
setTimeout(arguments.callee, 0);//利用异步调用自身拼凑文档碎片，直到div的节点被搬空 
} else { 
callback(frag);//这里才是真正执行插入节点的操作 
} 
})(); 
} 

此技术的优点:
1. 利用闭包解决 IE6 的内存溢出问题
2. 利用setTimeout(fn,0) 这个hack将操作从队列中拖出，防止浏览器假死
3. 利用Document Fragment减少对页面的渲染次数
4. 回调的节点可以使用 DOM 标准的手法（appendChild）插入(如IE的table,tbody,tr,td等标签的innerHTML是只读的)
使用方法：

复制代码代码如下:

var htmlStr = '

...

php中级教程之ajax技术

php中级教程之ajax技术

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速

php中级教程之ajax技术

2114

php中级教程之ajax技术

...

...

';
asyncInnerHTML(htmlStr, function(fragment){
// You can treat 'fragment' as a regular node.
document.body.appendChild(fragment);
});

不过，这个方法在table中添加节点时并不是个个浏览器都行得通，不得不说是一大败笔。经测试IE8，IE6，FF3.5渲染出现差错，chrome,safari4,opera10等能完好地把表格渲染出来。估计是IE8等在把节点转移到文档碎片时发生节点丢失现象。

<style> 
.filament_table { 
border-collapse:collapse !important; 
border-top:1px solid #A9EA00; 
border-left:1px solid #C1DAD7; 
table-layout:fixed; 
width:400px; 
} 
.filament_table thead th { 
background:#A9EA00; 
color:#FCDE6A; 
border-bottom:1px solid #C1DAD7; 
border-right:1px solid #C1DAD7; 
padding:2px 5px; 
} 
.filament_table tbody td,.filament_table tbody th { 
border-bottom:1px solid #C1DAD7; 
border-right:1px solid #C1DAD7; 
padding:2px 5px; 
color:#76C2C3; 
} 
.filament_table tfoot td { 
border-bottom:1px solid #C1DAD7; 
border-right:1px solid #C1DAD7; 
background:#A9EA00; 
color:#FCDE6A; 
font-size:12px; 
padding:0; 
} 
.filament_table tbody td a{ 
text-decoration:none; 
color:#76C2C3; 
} 
.filament_table tbody tr:nth-child(even) { 
background:#F7FBFF; 
} 
</style>
<script type="text/javascript"> 
var getData = function(){ 
var builder = []; 
for(var i=0;i<10;i++){ 
builder.push("<tr><td>目录"); 
builder.push(i); 
builder.push("<td>商品"); 
builder.push(i); 
builder.push("<td>商品"); 
builder.push(i); 
builder.push(""); 
} 
return builder.join(''); 
}

function asyncInnerHTML(HTML, callback) { 
var temp = document.createElement('div'), 
frag = document.createDocumentFragment(); 
temp.innerHTML = HTML;//要加入的内容先放到这里。 
(function(){ 
if(temp.firstChild) { 
frag.appendChild(temp.firstChild);//然后一点点挪到文档碎片 
setTimeout(arguments.callee, 0);//然后把插入内容的操作作为异步调用放到一个独立的堆栈中 
} else { 
callback(frag);//这里才是真正执行插入节点的操作 
} 
})(); 
} 
addData = function(){ 
asyncInnerHTML(getData(),function(flag){ 
var tbody = document.getElementById("test"); 
tbody.appendChild(flag); 
}) 
} 
</script><table class="filament_table">
<thead><tr><th colspan="3">异步的innerHTML</th></tr></thead>
<tbody id="test"></tbody>
</table>
<p><button type="button" onclick="addData()">开始</button></p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

在FF3.5的firebug显示下，table新添加的节点，标签都丢失了。

flagment

在IE8的开发人员工具中，我们发现table新添加节点出错严重，见于IE一惯的表现，这是很正常的事！

flagment

相关演示可见无忧的贴子，发现这种方法不是最佳的插入动态内容的方法。

<style> 
#myTable{height:300px;overflow:auto;border:1px solid #39F;width:600px; } 
table,td,th{font-size:12px;border-collapse:collapse;height:100%;border:1px solid #39F; } 
tr.odd{background:#B1E4F3; } 
td.index{background:#B1E4F3;color:#000066;text-align:center; } 
</style>
<div id="myTable"> 
<table cellspacing="0" cellpadding="2" id="tb"><tr class="odd">
<td style="width: 51px" class="index">1</td> 
<td style="width: 121px">姓名1</td> 
<td style="width: 51px"><span style="color: #00f">男</span></td> 
<td style="width: 51px">20</td> 
<td style="width: 121px">1987-12-7</td> 
<td style="width: 201px">这个人很懒，什么都没有留下</td> 
</tr></table>
</div> 
<script> 
freeFor=function(i,to,fn){ 
    (function(){ 
        fn(i); 
        i++<to?setTimeout(arguments.callee,30):0; 
    })(); 
}; 
var T=document.getElementById("tb") 
    ,R=T.rows[0] 
    ,B=T.getElementsByTagName("tbody")[0]; 
freeFor(1,40,function(z){ 
     var F = document.createDocumentFragment(); 
    for (var i=1;i<50;++i ){ 
        var Y=R.cloneNode(true); 
        var I=Y.getElementsByTagName("TD")[0]; 
        I.innerHTML=(i*z+1); 
        I.className='index'; 
        Y.className=i%2?'':'odd'; 
        F.appendChild(Y); 
    }; 
    B.appendChild(F); 
    F=null; 
}); 
</script>

相关标签：

javascript

大家都在看：

JavaScript框架比较_React与Vue设计哲学差异 JavaScript实现Indeed API分页数据高效获取教程 JavaScript安全实践_XSS与CSRF防护 JavaScript反射机制_元属性访问控制 JavaScript移动开发_React Native桥接机制

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：javascript 键盘事件总结推荐_javascript技巧下一篇：JavaScript中出现乱码的处理心得_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

JavaScript_地理位置服务与地图集成首先通过JavaScript的GeolocationAPI获取用户授权后的经纬度，再结合高德地图等SDK在页面中初始化地图并标记位置；需处理权限拒绝、定位超时等异常，建议通过按钮触发定位请求，并在HTTPS环境下部署以保障安全性和兼容性。

2025-11-19 14:27:27

914

事件委托_JS事件处理优化事件委托通过事件冒泡将监听器绑定到父元素，统一处理子元素事件。例如为ul绑定click事件，通过判断e.target.nodeName===‘LI’来捕获li点击，减少重复绑定，节省内存，提升性能，支持动态添加元素，适用于列表、表格等大量子元素场景，但需注意非冒泡事件如focus需用focusin替代，并谨慎使用stopPropagation。

2025-11-19 14:23:02

567

JavaScript响应式编程_Observable数据流处理响应式编程通过Observable实现对异步数据流的优雅处理，Observable作为可观察的数据流，支持多值推送、惰性执行与链式操作符，借助RxJS可在JavaScript中实现如防抖搜索、事件合并等复杂逻辑，广泛应用于Angular等框架中。

2025-11-19 13:59:02

357

JavaScriptCanvas编程_2D图形与动画性能优化答案：通过减少重绘区域、使用分层Canvas和缓存图形，结合requestAnimationFrame统一动画循环并控制帧率，批量绘制同类图形、避免昂贵特效、使用整数坐标，并通过对象池管理内存，可显著提升Canvas动画性能。

2025-11-19 13:47:02

548

JavaScript框架比较_React与Vue设计哲学差异 React强调灵活架构与JSX的显式控制，适合定制化开发；Vue提供渐进式框架与模板语法，内置路由和状态管理，更易上手。

2025-11-19 13:46:02

228

静态类型：Flow与TypeScript生态对比 TypeScript凭借其成熟的生态、广泛的工具支持和活跃的社区，已成为静态类型化JavaScript的事实标准，相比之下Flow生态局限、工具链支持弱，仅在特定场景适用。

2025-11-19 13:38:38

377

js函数定义的三种方式函数定义有三种方式：1.函数声明具有提升特性，可在声明前调用；2.函数表达式赋值给变量，常用于回调，不具完全提升；3.箭头函数语法简洁，无自身this，适合回调但不可作为构造函数。

2025-11-19 13:12:06

584

React组件条件类型Props：深度解析与实践本文深入探讨了如何在React组件中定义基于条件依赖的Props类型，即一个Prop的类型根据另一个Prop的值动态变化。文章首先阐述了如何利用TypeScript的const断言和satisfies操作符精确地定义常量主题对象，避免类型拓宽。随后，详细介绍了两种核心策略：通过泛型和索引访问类型实现条件Props，以及通过映射类型构建联合类型来表达所有可能的Props组合，并提供了详细的代码示例和选择建议。

2025-11-19 13:09:07

968

JavaScript实现Indeed API分页数据高效获取教程本教程详细阐述了如何使用JavaScript高效地从Indeed搜索API等分页接口获取所有可用数据。文章将介绍理解分页机制、利用async/await实现循环请求的核心逻辑，并提供一个健壮的代码示例，以迭代更新查询参数（如start和limit），聚合数据，直至所有结果被成功检索。同时，教程还将涵盖实际应用中的注意事项，如API响应解析、速率限制和错误处理。

2025-11-19 13:04:02

475

函数式编程_JS高阶函数应用高阶函数是能接收或返回函数的函数，如map、filter、reduce，用于数据转换、筛选和累积计算，提升代码复用性与可读性。

2025-11-19 12:34:02

999

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

React 教程

18703次学习
收藏
TypeScript 教程

11203次学习
收藏
Bootstrap 5教程

19921次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部