`
tufei2006
  • 浏览: 8368 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

js小知识

阅读更多
event.x clientx 当前页面的坐标
screen 当前浏览器的坐标
offsetx 父坐标

 如果要减少由于DOM修改带来的回流操作,有两个基本的方法。第一个就是在对当前DOM进行操作之前,尽可能多的做一些准备工作。一个经典的例子就是向document对象中添加很多DOM节点:

/*
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
list.appendChild(item);
}
*/
  这段代码的效率是很低的,因为他在每次循环中都会修改当前DOM结构。为了提高性能,我们需要将这个次数降到最低,对于这个案例来说,最好的办法是建立一个文档碎片(document fragment),作为那些已创建元素元素的临时容器,最后一次将容器的内容直接添加到父节点中:

/*
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
fragment.appendChild(item);
}
list.appendChild(fragment);
*/
  经过调整的代码,只会修改一次当前DOM的结构,就在最后一行,而在这之前,我们用文档碎片来保存那些中间结果。因为文档碎片没有任何可见内容,所以这类修改不会触发回流操作。实际上,文档碎片也不能被添加到DOM中,我们需要将它作为参数传给appendChild函数,而实际上添加的不是文档碎片本身,而是它下面的所有子元素。

转自:http://www.freeage.cn/article.asp?id=217
0
0
分享到:
评论

相关推荐

    JavaScript 小游戏代码汇总

    以下是 JavaScript 小游戏代码汇总的知识点: 1. HTML 基础:代码开头使用的 `&lt;!DOCTYPE html&gt;` 声明了文档类型为 HTML,並引入了 XHTML 1.0 Transitional 文档类型定义。`&lt;html&gt;` 元素是 HTML 文档的根元素,`...

    知识图谱可视化javascript库,基于d3.js,面向网页前端知识图谱展示.zip

    知识图谱是一种结构化的知识表达形式,它以图形的方式组织和存储了大量实体(如人、地点、事件等)及其相互关系。在知识图谱中,实体作为节点,实体之间的各种语义关联则通过边进行连接,形成了一个庞大的数据网络。...

    基于d3.js,知识图谱可视化javascript库,面向网页前端知识图谱展示

    【作品名称】:基于d3.js,知识图谱可视化javascript库,面向网页前端知识图谱展示 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 ...

    threejs微信小程序应用.zip

    下面,我们将深入探讨Three.js与微信小程序结合的相关知识点。 一、Three.js简介 Three.js是基于WebGL的3D库,它允许开发者在浏览器中创建复杂的3D场景,包括模型加载、光照、材质、动画等。WebGL是一种JavaScript ...

    javascript100个小例子

    通过"javascript100个小例子"中的实例,你可以逐个实践这些知识点,每个例子都代表一个具体的应用场景,这将帮助你更好地理解和记忆JavaScript的核心概念。同时,这些例子也可以直接应用于实际项目中,节省开发时间...

    js基础知识点思维导图

    本思维导图将深入探讨JS的基础知识点,帮助初学者构建全面的JavaScript知识体系。 1. 变量与数据类型: JavaScript有六种基本数据类型:Undefined、Null、Boolean、Number、String和Symbol(ES6新增),以及一种...

    原生js小球碰撞动画代码

    总的来说,"原生js小球碰撞动画代码"是一个综合性的项目,涵盖了JavaScript编程基础、DOM操作、CSS样式控制以及基本的物理知识。通过这个项目,开发者不仅可以提升JavaScript的实战能力,还能深入理解网页动态效果的...

    js_game.rar_game JavaScript _js小游戏

    在这个名为"js_game.rar_game JavaScript _js小游戏"的压缩包中,包含了一个基于JavaScript开发的小游戏。游戏的设计目标是阻止红色方块逃出指定区域,玩家需要通过某种方式来圈住红色方块,确保其不会到达表格的...

    js的14个小程序

    在这个“js的14个小程序”中,我们可以通过一系列实践项目来深入理解和掌握JavaScript的核心概念和应用。 1. **三级联动**:在网页中,三级联动通常用于实现地区选择功能,如省份-城市-区县的递归选择。通过JS,...

    基于js,javaScript的运动小程序

    在给定的“基于js,javaScript的运动小程序”项目中,我们可以深入探讨以下几个重要的知识点: 1. **JavaScript 基础**:JS 是一种解释型的、动态类型的、弱类型的脚本语言,它主要用于增强用户交互,如表单验证、...

    500套JavaScript小案例

    这些JavaScript小案例旨在通过实践帮助学习者巩固基础知识,理解函数、变量、条件语句、循环、数组、对象等核心概念,并进一步探索高级特性,如闭包、原型链、Promise、async/await等。每个案例都是一个独立的学习...

    js.rar_js 小游戏_js小游戏_js游戏_unity游戏源码js

    【标题】"js.rar" 涵盖了与JavaScript编程相关的知识点,特别是关于JavaScript在创建小游戏方面的应用。JavaScript,简称JS,是一种广泛用于网页和网络应用的轻量级编程语言,具有动态类型、原型化继承、基于原型链...

    JS 的小demo

    在本"JS的小demo"中,我们将探讨JS的基础知识和常见交互功能。 1. **变量与数据类型** 在JS中,变量无需预先声明,直接使用`var`, `let`或`const`定义。例如: ```javascript let num = 123; // 数字 const str...

    知识地图,swfobject.js

    《SWFObject.js在知识地图中的应用与实现》 SWFObject.js,作为一个小巧而强大的JavaScript库,主要用于处理Adobe Flash内容的嵌入,使得网页开发者能够优雅地处理Flash与HTML的交互,尤其在HTML5逐渐普及的今天,...

    JS小游戏-极速快跑

    【JS小游戏-极速快跑】是一款利用JavaScript编程语言开发的休闲娱乐小游戏,旨在提供一个轻松的平台,让玩家通过简单的鼠标点击操作,控制角色进行快速奔跑。这款游戏充分展示了JavaScript在网页交互中的强大功能,...

    js小游戏实现简单打飞机

    总的来说,这个“js小游戏实现简单打飞机”项目涵盖了JavaScript编程基础,事件处理,对象导向编程,定时器,以及DOM操作等关键知识点。它为初学者提供了一个实践和提升技能的平台,同时也提醒我们在开发时要考虑...

    JS互动小游戏

    了解这些基础知识是开发JS小游戏的前提。例如,游戏中可能需要定义变量来存储玩家分数、游戏状态等信息,使用函数封装游戏逻辑,通过数据结构(如数组或对象)来组织游戏元素。 二、DOM操作 在JS小游戏开发中,DOM...

    javascript知识点汇总

    javascript知识点汇总

    js小游戏

    JavaScript(简称JS)小游戏是一种利用JavaScript编程语言开发的互动娱乐应用。这些小游戏通常基于网页环境,利用HTML5的Canvas或WebGL等技术实现图形渲染,为用户提供简单的交互体验。JavaScript作为浏览器内置的...

    JavaScript基础知识总结.xmind

    通过思维导图的方式,快速了解掌握JavaScript的基本内容

Global site tag (gtag.js) - Google Analytics