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

时间: 2024-10-13 10:15:46

JavaScript小知识的相关文章

javascript小知识1

函数的应用: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <script> 9 function f(){ 10 alert(this.x); 11 } 12 var x

学习javascript总结下来的性能优化的小知识(二)

上面一篇文章大致介绍了一些javascript当中使用的一些小技巧,当下这篇文章继续介绍一下内存管理.松散耦合.性能方面的一些小知识.为避免错误应该注意的点 内存管理 1.循环引用 如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露.内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放. 简单的循环引用: var el = document.getElementById('MyElement'); var func = function () { //

前端知识:12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func

PHP链接Mysql数据库的小知识

1:在PHP写隔行变色有三种写法(但是最好的是用js+css) (1)CSS: tr:nth-child(even){             background: #cad9ea;         } even:代表偶数: ood:代表奇数:   (2)PHP: <?php                 if($n %2 == 0){            ?>            <tr style="background: #cad9ea"> <

JSP+Ajax网站开发小知识

一.JSP基础 1.<select  name="love"  size="3">其中的size属性指定了列表框显示选项的条数,如果所有选项多于这个数,将会出现滚动条. 2.addCookie(Cookie  cookie)方法将其放入客户端,获取Cookie对象可调用request对象的Cookie[]  getcookies()方法. Cookie   myCookie  =  new  Cookie("name",  "

京东案例小知识1

小知识 1.定位的盒子比浮动的盒子层级高 2.浮动的盒子遮挡不住标准流的文字 3.块级元素的宽 可以继承 4.A标签的文字属性不能继承 5.谷歌不支持12号以下的字体 6.div:hover a{}:鼠标放在div区域后,对于里面的a链接文字变色. 7.建议所以浮动的盒子都给宽高 (防止页面缩小的时候掉下里,在谷歌尝试) 最好给盒子之间有一定的间距 8.让盒子在父盒子水平居中,先定位,left50%:然后margin-left:子盒子宽度的一半 9.模拟鼠标小手(curp+tab) 10."co

【小知识】转义字符

最常用的字符实体 Character Entities 显示 说明 实体名称 实体编号   半方大的空白       全方大的空白       不断行的空白格     < 小于 < < > 大于 > > & &符号 & & " 双引号 " " ? 版权 © © ? 已注册商标 ® ® ? 商标(美国) ? ™ × 乘号 × × ÷ 除号 ÷ ÷ JavaScript转义符 转义序列 字符 \b 退格 \f 走

javascript常用知识汇总

javascript这个语言庞大而复杂,我用了三年多了,还是皮毛都不会.从刚开始的jquery,到后来的es6,每天都在学习,每天都在忘记. 1.禁止手机虚拟键盘弹出 在开发适配手机的页面时,出现了这么一个现象,我用了input标签,点击弹出一个选择框,就是那种picker组件,在手机上点击就会出现虚拟键盘,这个必须去掉.第一种是为input加入readonly属性,第二种用js代码的document.activeElement.blur() 123 $("#datePicker").

[转帖]AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解

AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解 https://segmentfault.com/a/1190000016231512 太长没看完.. javascriptvue-clicommonjswebpackast 阅读约 27 分钟 抽象语法树(AST),是一个非常基础而重要的知识点,但国内的文档却几乎一片空白. 本文将带大家从底层了解AST,并且通过发布一个小型前端工具,来带大家了解AST的强大功能 Javascript就像一台精妙运作的机器,我们可以