JavaScript小知识

Posted 2020-08-09

1.<script>标签的出现使整个页面因脚本解析、运行而出现等待；

2.合并脚本，每个 HTTP请求都会产生额外的性能负担，下载一 个 100KB 的文件比下载四个 25KB的文件要快； 3.js加载放在最后； 4.一个带有 defer属性的<script>标签可以放置在文档的任何位置。对应的 javascript 文件将在<script>被解析时启动下载， 但代码不会被执行，直到 DOM 加载完成（在 onload 事件句柄被调用之前）。当一个 defer的 JavaScript文件被下载时，它不 会阻塞浏览器的其他处理过程，所以这些文件可以与页面的其他资源一起并行下载。

<script type="text/javascript" src="file1.js" defer></script> 5. 直接量     仅仅代表自己，而不存储于特定位置。 JavaScript 的直接量包括：字符串，数字，布尔值，对象， 数组，函数，正则表达式，具有特殊意义的空值，以及未定义。

变量     开发人员使用 var关键字创建用于存储数据值。 

 数组项 具有数字索引，存储一个 JavaScript数组对象。

对象成员 具有字符串索引，存储一个 JavaScript 对象。 四种类型存取效率依次降低，最好尽可能使用局部变量。一个好的经验法则是：如果它们在函数中的使用多于一次， 用局部变量存储本地范围之外的变量值，

6.简单说来，两个独立的部分以功能接口连接就会带来性能损耗。一个很形象的比喻是把 DOM 看成一个岛屿，把 JavaScript（ECMAScript） 看成另一个岛屿，两者之间以一座收费桥连接。每次 ECMAScript 需要访问 DOM 时，你需要过桥，交一次“过桥费”。你操作 DOM 次数越多， 费用就越高。一般的建议是尽量减少过桥次数，努力停留在 ECMAScript 岛上。 7. 当浏览器下载完所有页面 html标记，JavaScript，CSS，图片之后，它解析文件并创建两个内部数据结构： 一棵 DOM 树       表示页面结构 一棵渲染树       表示 DOM 节点如何显示 8.重绘与重排： 当 DOM 改变影响到元素的几何属性（宽和高）- 重排 重排版完成时，浏览器在一个重绘进程中重新绘制屏幕上受影响的部分 – 重绘 9.重排何时发生： 添加或删除可见的 DOM 元素 元素位置改变 元素尺寸改变（因为边距，填充，边框宽度，宽度，高度等属性改变） 内容改变，例如，文本改变或图片被另一个不同尺寸的所替代 最初的页面渲染 浏览器窗口改变尺寸 10.重排版和重绘代价昂贵，所以，提高程序响应速度一个好策略是减少此类操作发生的机会。为减少发生次数，你应该将多个 DOM 和风格改变合并到一个批次中一次性执行。  改变样式 批量修改DOM 11.批量修改dom：  从文档流中摘除该元素 对其应用多重改变  将元素带回文档中 12.for-in 循环每次迭代都要付出更多开销，所以比其他类型循环慢一些。在同样的循环迭代操作中，for-in循环比其他类型的循环慢 7 倍之多。 因此推荐的做法如下：除非你需要对数目不详的对象属性进行操作，否则避免使用 for-in 循环。 13.事实证明，大多数情况下 switch 表达式比 if-else 更快，但只有当条件体数量很大时才明显更快。两者间的主要性能区别在于：当条件体增加时， if-else性能负担增加的程度比 switch 更多。因此，我们的自然倾向认为条件体较少时应使用if-else而条件体较多时应使用switch表达式， 如果从性 能方面考虑也是正确的