JavaScript小知识

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表达式, 如果从性 能方面考虑也是正确的

原文地址:https://www.cnblogs.com/huahua-1022/p/5887617.html