vue jquery性能_六项提高性能的jQuery最佳实践

jQuery是当今最流行JavaScript库之一。 它的API非常易于使用，导致学习曲线并不那么陡峭。 许多项目使用jQuery代码，而不是直接使用原始JavaScript来引入动态功能。

但是jQuery也有缺点。 如果不慎使用它所基于的语言，可能会导致一些性能问题 。 这篇文章将列出使用jQuery的一些最佳实践，这将帮助我们避免任何性能问题。

1.必要时延迟加载脚本

浏览器在创建DOM树和在屏幕上绘制像素之前运行JavaScript，因为脚本可以向页面添加新元素或更改某些DOM节点的布局或样式。 因此，通过为浏览器减少在页面加载期间执行的脚本 ，我们可以减少最终DOM树创建和绘画所花费的时间 ，在此之后，用户将能够看到页面 。

在jQuery中执行此操作的一种方法是使用$.getScript在需要时而不是在页面加载期间加载任何脚本文件。

$.getScript( "scripts/gallery.js", callback);

这是一个ajax函数，可以在需要时获取单个脚本文件，但请注意，未缓存获取的文件。 要为getScript启用缓存，您必须为所有ajax请求启用相同的功能。 您可以使用以下代码进行操作：

$.ajaxSetup({
 cache: true
});

2.如果脚本不需要页面的任何子资源，请避免使用

$( document ).ready()等效于DOMContentLoaded （其中DOMContentLoaded可用），而$( window ).load()等效于Load 。 第一个是在加载页面自己的DOM时触发的，但不加载图像和样式表之类的外部资源时。 加载页面的所有内容（包括其自身的内容及其子资源）时，将触发第二个页面。

因此，如果您要编写依赖于页面子资源的脚本，例如更改由外部样式表设置样式的div的背景色，则最好使用$( window ).load() 。

但是，如果不是这种情况，则最好坚持使用$( document ).ready()因为无论您是否使用$( document ).ready() ，jQuery都会调用其ready事件处理程序，因此请$( document ).ready()使用它。

3.使用

“重排”是指网页布局更改的术语，指的是浏览器重新排列页面的元素以容纳新元素，适应元素的结构变化，填补被删除元素留下的空白或执行其他操作时需要在页面中更改布局。 回流是一个昂贵的浏览器过程 。

我们可以减少编号。 通过取出来的页面流，并把它回来时，它完成 后执行上的变化造成的结构性变化的元素回流。 如果您要在一个表中一一添加多行，将导致大量重排。 因此，最好将表从DOM树中取出，在其中添加行，然后将其放回DOM中 ； 这将减少回流。

jQuery的detach() 允许我们从页面中删除元素 ，这与remove()不同，因为它会保存与该元素关联的数据，以备以后需要添加到页面时使用。 修改后，可以将分离的元素放回页面中。

4.使用

如果您要在jQuery中设置元素的高度或宽度，建议您使用css()函数，因为使用height()和width()设置这些值会导致额外的重排，这是因为要访问jQuery中的某些布局属性jQuery中的function computeStyleTests （在最新版本中测试）。

对于代码p.height("300px"); 这是重排。

对于p.css({ "height": "300px"});

computeStyleTests用于执行一些支持测试。 同时获得高度与宽度同时使用它也被称为css()和height()/width()但是设置它只是呼吁height()/width()这可能不需要，所以在使用css()来代替。

5.不要不必要地访问布局属性

访问高度，宽度，边距等布局属性将触发页面重排。 原因是每当您向浏览器询问任何布局属性时，它都会通过重新计算值并应用任何布局更改来 确保获取更新后的值 （以防万一该值之前已失效）。

因此，无论您使用的是jQuery还是普通JavaScript，都要当心不必要的访问布局属性，尤其是在循环中或更改样式后，因此是不必要的 。

6.在可能的地方使用缓存

jQuery的某些功能带有可以很好利用的缓存机制。 Ajax请求确实缓存了资源，但是无法用于script和jsonp ，因此，如果要跨所有ajax请求进行缓存，则可能需要像下面这样全局设置 。

还要注意，如果使用post来获取资源，即使使用上述设置启用了缓存，也不会缓存该资源。

就像我之前提到的，与remove()不同， detach()缓存与要删除的元素关联的数据； hide()在隐藏元素之前先缓存它的初始CSS display值，以便以后可以恢复它而不会丢失数据。

结论

您可以确定要使用最有效的jQuery代码的一种方法是，等到您实际运行代码并注意到是否存在性能问题为止。 如果存在，请使用性能和调试器工具 检测问题的根源 。

由于jQuery就像JavaScript的茧一样，具有用于浏览器兼容性和功能的其他功能，因此如果没有这些工具，可能很难诊断出问题。

翻译自: https://www.hongkiat.com/blog/code-optimization-jquery-best-practices/