zoukankan      html  css  js  c++  java
  • 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表达式, 如果从性 能方面考虑也是正确的

  • 相关阅读:
    性能测试的bug【杭州多测师】【杭州多测师_王sir】
    Typescript: 当出现错误时,不编译文件成js文件
    git基础命令
    获取页面宽度
    详解linux下的串口通讯开发
    货源清单的配置
    物料在工厂中未被维护
    quota配额配置
    采购组织不对工厂负责
    拓端tecdat:Python金融时间序列模型ARIMA 和GARCH 在股票市场预测应用
  • 原文地址:https://www.cnblogs.com/huahua-1022/p/5887617.html
Copyright © 2011-2022 走看看