关于jQuery常见优化写法阅读笔记

推荐一篇非常好的文章

1. ready事件的触发条件是？

dom树加载完毕，即document加载完毕，dom和dom元素不一样

2. ready事件的handler适合执行什么操作?

在用户还没看到页面和进行交互前，应该执行的操作。如插件初始化，事件绑定

3. ready事件可以用于任何一个元素节点吗？

查看了一些别人的博客，有的是错的。只可以作用于DOM树，即document，DOM节点不行。

衍生问题：load可以用于任意元素节点吗？

不能，只能用在能引入URL的元素节点，如：img frameset；

4. 它和window对象的load事件有什么区别？

  • 触发时机不同：ready是在DOM树加载完毕后执行操作，load是在页面加载完毕再执行，包括DOM树和各个资源。

  • 来源不同：ready时jQuery的自定义事件，而window的load事件是W3C定义的标准事件

  • 适合执行的操作不一样：

衍生问题：load和onload的区别？

$(window).load()和body.onload()都是完全加载页面时触发。不推荐用body.onload(),它不能做到JS和HTML完全分离。

<body onload="fn1(),fn2()"></body>
<!--看起来极其丑陋,如果用$ (window).load()我们可以这样加载多个函数-->

 $(window).load(function() {
            alert("hello,我是jQuery!");
  });
 $(window).load(function() {
        alert("hello,我也是jQuery");
 });

衍生问题：为什么onload()可以用body?

一般来说，在window上面发生的任何事件都可以在body元素中通过相应的特性来指定，因为在HTML中无法访问window元素。

这样是为了保证向后兼容的权宜之计，但所有浏览器都能很好地支持这种方式。

结论：为了对应上window.onload，body标签才有onload。

5. DOM加载完毕和window加载完毕，二者具体不同在哪里？

DOM加载完毕是指加载完DOM树，而window加载完毕指的是页面加载完全（包括资源和DOM树）

6.使用事件委托机制（减少事件监听器的重复绑定）

实现原理：基于浏览器的时间传播机制的两个特性：

1.具有嵌套关系的元素，内层元素的可传播事件被触发时，其外层元素的同类型事件也会被触发；

2.由相同的用户行为触发的可传播事件，内外层的handler的event.target始终一致。

具体步骤：假设为ul和li，及span

1.从event.target（span）元素开始（包括其自身），向外搜寻，看有没有和给定子元素选择器匹配的元素（li），有则继续，无则退。

2.判断匹配的元素（li）是否包含于被委托了事件监听的外层元素（ul），有则继续，无则退。

3.到达这里说明委托外层元素进行事件处理的子元素（li）的事件确实触发了，此时就可以执行子元素委托给外层元素的handler，并把相应的事件信息，封装到一个事件对象中，一同传给这个handler。

7.提高jQuery选择器的查询效率（指代更准确）

1.子元素选择器和上下文选择器的使用次数最好不要超过三个。

2.结构类的选择器，第一个选择器最好是id选择器，其次是class选择器。

8.值和对象的复用

使用变量记住$()对象的值，防止重复查询。

9.尽量减少调用DOM元素的操作次数

  • 回流：当执行元素的增删改，字号调整时，会导致页面结构发生变化，此时浏览器会重新调整页面布局，这个过程被称为回流。

  • 重绘：当重新设置修改元素的样式时（页面的结构布局没发生变化），会重新设置元素的显示样式，这个过程称为重绘。

  • 双方关系和开销：回流一定引起重绘，而重绘不会引起回流，其中回流开销最大。而一个DOM元素操作如果引起页面结构变化，就会引起页面回流，当操作频繁时，会引发整体性能的下降。

1.常见的由于DOM结构变化引发的回流优化方案。

添加节点时，先拼接HTML字符串，再去用append，html()和prepend等方法插入；

2.常见的由于DOM元素样式变化引发的会流的优化方案。

通过修改class，统一调整样式。jQuery常用的有addClass(),removeClass()和toggleClass();

10.使用jQuery的data机制给DOM元素怎加自定义属性

  1. 在特定业务场景，自定义的数据属性，其命名难免会和元素的内置属性名称冲突；

  2. 驼峰命名法广泛采用于变量命名，但是html代码不区分大小写，如果在html代码中使用驼峰命名法给自定义属性命名，那么自定义属性中出现的大写字母，也终将被解析为小写字母。

为了解决这两个问题，jQuery提供了data机制：

  • 在html代码中，规定自定义数据属性需添加data-前缀，以和元素的内置属性区分，进而避免命名冲突；

  • 同时，规定自定义属性使用中横线命名法，以应对html代码不区分大小写的问题；

  • 在js代码中，使用data(key)来读取自定义数据属性值，其中自定义属性名key采用驼峰命名法。

<ul>
	<li class="tab-item" data-tab-name="basic">基础配置</li>
</ul>

$(function(){
	$('.tab-item').on('click', function(){
		var name = $(this).data('tabName');  //key采用驼峰命名法
		alert(name);
	});
});
Written on June 7, 2018