摘要：操作的代价非常昂贵，对元素节点的访问和修改样式布局的改变以及事件的绑定都影响着网页的性能。所以，尽量减少对布局信息的查询次数，并用局部变量参与计算。当动画结束时，重新定位，从而只一次下移文档其他元素的位置。这样可以最小化事件句柄数量。
批量修改DOMDOM操作的代价非常昂贵，对元素节点的访问和修改、样式、布局的改变以及DOM事件的绑定都影响着网页的性能。
如果要对元素节点进行多次读写，那么最好的方式是：把多次操作在DOM节点树外统一处理好，然后再一次性更新DOM节点树，具体的方法大致包含下面几种。
先隐藏要操作的元素节点，然后对这些节点进行操作，最后再显示出来。
先克隆要操作的元素节点，然后对克隆出来的节点进行操作，最后覆盖原来的元素节点。
在文档外创建并更新一个文档片段（createDocumentFragment()），然后在附加在原始节点上。
缓存信息布局浏览器通过队列化修改和批量运行的方法，尽量减少重排版的次数。当你查询布局信息（如偏移量、滚动条位置、风格属性）的时候，浏览器将会刷新队列并执行所有修改操作，以返回最新的数值。所以，尽量减少对布局信息的查询次数，并用局部变量参与计算。
将元素提出动画流重排版有时只影响渲染树的一小部分，但有时候也会是一大部分，下面这些步骤可以避免对大部分页面进行重排版：
对动画元素使用绝对定位，使他脱离页面布局流。
启动元素动画。当它扩大时会覆盖部分页面。
当动画结束时，重新定位，从而只一次下移文档其他元素的位置。
事件托管当一个页面存在大量的元素，并且很多元素都有一个或多个事件绑定的时候，会影响页面的性能，这个时候才用事件托管机制可以提升页面的运行性能：你只需要监听事件，看看他们是不是你感兴趣的元素发出的。这样可以最小化事件句柄数量。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85249.html
摘要：此过程中，页面的解析与用户的交互都是阻塞的。非阻塞脚本延时脚本可以给标签添加一个属性，这个属性表明元素中的脚本不打算修改，因此代码可以稍后执行。此技术的重点在于无论在何处启动下载，脚本的下载和运行都不会阻塞页面的处理过程。 当浏览器遇到标签时，页面的加载、介些都会停下来，运行此javascript代码，然后再继续加载。这种事情同样会发生在那些以src属性调用的外部脚本，浏览器首先下载外...
摘要：内部属性包含一个函数被创建的作用域中的对象的集合，此集合被称为函数的作用域链。当作用域链销毁时，激活对象一同被销毁。下图展示了函数运行期上下文的作用域和闭包由于闭包的属性包含与运行期上下文作用域链相同的对象引用，会产生副作用。 javascript按照数据存储位置的不同可分为以下四类： 直接量（字符串、数字、布尔型、Object、Array、Function、正则表达式、NULL以...
摘要：无主题，内容为感触较深的一些答疑探讨等，摘自多篇文章，侵删为什么是单线程的单线程，与它的用途有关。作为浏览器脚本语言，的主要用途是与用户互动，以及操作。这决定了它只能是单线程，否则会带来很复杂的同步问题。摘自运行机制详解再谈作者阮一峰 无主题，内容为感触较深的一些答疑、探讨等，摘自多篇文章，侵删 1、为什么JavaScript是单线程 JavaScript的单线程，与它的用途有关。作...
摘要：刚学了一些的基础语法，试着用一下。相关文档基本语法配合基本使用相同点和都是的基本数据类型扩展的种基本数据类型和都是值扩展的种值空字符串不同点可见代表变量有值，值为空且该值是通过变量赋值获得的代表声明了变量，但没有为其赋值。 刚学了一些 Markdown 的基础语法，试着用一下。 相关文档：Markdown基本语法配合基本使用 相同点： null 和 undefined 都是js...
阅读 2937·2023-04-25 17:46
阅读 3561·2021-11-25 09:43
阅读 1045·2021-11-18 10:02
阅读 3026·2021-10-14 09:43
阅读 2731·2021-10-13 09:40
阅读 1508·2021-09-28 09:35
阅读 2143·2019-08-30 15:52
阅读 3120·2019-08-30 14:06
