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
分享到:
相关推荐
以下是 JavaScript 小游戏代码汇总的知识点: 1. HTML 基础:代码开头使用的 `<!DOCTYPE html>` 声明了文档类型为 HTML,並引入了 XHTML 1.0 Transitional 文档类型定义。`<html>` 元素是 HTML 文档的根元素,`...
知识图谱是一种结构化的知识表达形式,它以图形的方式组织和存储了大量实体(如人、地点、事件等)及其相互关系。在知识图谱中,实体作为节点,实体之间的各种语义关联则通过边进行连接,形成了一个庞大的数据网络。...
【作品名称】:基于d3.js,知识图谱可视化javascript库,面向网页前端知识图谱展示 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 ...
下面,我们将深入探讨Three.js与微信小程序结合的相关知识点。 一、Three.js简介 Three.js是基于WebGL的3D库,它允许开发者在浏览器中创建复杂的3D场景,包括模型加载、光照、材质、动画等。WebGL是一种JavaScript ...
通过"javascript100个小例子"中的实例,你可以逐个实践这些知识点,每个例子都代表一个具体的应用场景,这将帮助你更好地理解和记忆JavaScript的核心概念。同时,这些例子也可以直接应用于实际项目中,节省开发时间...
本思维导图将深入探讨JS的基础知识点,帮助初学者构建全面的JavaScript知识体系。 1. 变量与数据类型: JavaScript有六种基本数据类型:Undefined、Null、Boolean、Number、String和Symbol(ES6新增),以及一种...
总的来说,"原生js小球碰撞动画代码"是一个综合性的项目,涵盖了JavaScript编程基础、DOM操作、CSS样式控制以及基本的物理知识。通过这个项目,开发者不仅可以提升JavaScript的实战能力,还能深入理解网页动态效果的...
在这个名为"js_game.rar_game JavaScript _js小游戏"的压缩包中,包含了一个基于JavaScript开发的小游戏。游戏的设计目标是阻止红色方块逃出指定区域,玩家需要通过某种方式来圈住红色方块,确保其不会到达表格的...
在这个“js的14个小程序”中,我们可以通过一系列实践项目来深入理解和掌握JavaScript的核心概念和应用。 1. **三级联动**:在网页中,三级联动通常用于实现地区选择功能,如省份-城市-区县的递归选择。通过JS,...
在给定的“基于js,javaScript的运动小程序”项目中,我们可以深入探讨以下几个重要的知识点: 1. **JavaScript 基础**:JS 是一种解释型的、动态类型的、弱类型的脚本语言,它主要用于增强用户交互,如表单验证、...
这些JavaScript小案例旨在通过实践帮助学习者巩固基础知识,理解函数、变量、条件语句、循环、数组、对象等核心概念,并进一步探索高级特性,如闭包、原型链、Promise、async/await等。每个案例都是一个独立的学习...
【标题】"js.rar" 涵盖了与JavaScript编程相关的知识点,特别是关于JavaScript在创建小游戏方面的应用。JavaScript,简称JS,是一种广泛用于网页和网络应用的轻量级编程语言,具有动态类型、原型化继承、基于原型链...
在本"JS的小demo"中,我们将探讨JS的基础知识和常见交互功能。 1. **变量与数据类型** 在JS中,变量无需预先声明,直接使用`var`, `let`或`const`定义。例如: ```javascript let num = 123; // 数字 const str...
《SWFObject.js在知识地图中的应用与实现》 SWFObject.js,作为一个小巧而强大的JavaScript库,主要用于处理Adobe Flash内容的嵌入,使得网页开发者能够优雅地处理Flash与HTML的交互,尤其在HTML5逐渐普及的今天,...
【JS小游戏-极速快跑】是一款利用JavaScript编程语言开发的休闲娱乐小游戏,旨在提供一个轻松的平台,让玩家通过简单的鼠标点击操作,控制角色进行快速奔跑。这款游戏充分展示了JavaScript在网页交互中的强大功能,...
总的来说,这个“js小游戏实现简单打飞机”项目涵盖了JavaScript编程基础,事件处理,对象导向编程,定时器,以及DOM操作等关键知识点。它为初学者提供了一个实践和提升技能的平台,同时也提醒我们在开发时要考虑...
了解这些基础知识是开发JS小游戏的前提。例如,游戏中可能需要定义变量来存储玩家分数、游戏状态等信息,使用函数封装游戏逻辑,通过数据结构(如数组或对象)来组织游戏元素。 二、DOM操作 在JS小游戏开发中,DOM...
javascript知识点汇总
JavaScript(简称JS)小游戏是一种利用JavaScript编程语言开发的互动娱乐应用。这些小游戏通常基于网页环境,利用HTML5的Canvas或WebGL等技术实现图形渲染,为用户提供简单的交互体验。JavaScript作为浏览器内置的...
通过思维导图的方式,快速了解掌握JavaScript的基本内容