js中性能优化的几大方法(页面级优化和代码级优化) 待我称王封你为后i 2022-10-27 13:50 143阅读 0赞 # js中性能优化 # ## 页面级优化 ## 页面级优化的方法有以下几种: 1. **CSS Sprites—使用雪碧图** > 具体的使用方法可以自行百度 > [教你来使用雪碧图][Link 1] 2. **使用CDN** > 下图用bootstrap来举例 > 使用bootstrap的时候,下载bootstrap文件比使用CDN性能差得多![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70] 3. **压缩合并代码–使用webpack等打包工具压缩代码** 4. **使用DNS预解析** ## 代码级别的优化 ## 代码级别的优化有以下几种: 1. **减少DOM操作** 避免直接对DOM进行操作,例如如下操作 var lis=document.querySelectorAll('li'); var len=lis.length; var ul=document.querySelector('ul'); for(var i=0;i<len;i++){ lis[i].onclick=function(){ } } 在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因; 1. **异步加载** 使用HTML5新增属性:async和defer属性 <script src="js/jquery-3.4.1.js" defer></script> <script src="js/jquery-3.4.1.min.js" async></script> defer 1. 解析html 2. 遇到带defer属性的script标签,继续解析html,同时下载script引入的文件 3. 浏览器完成解析HTML,然后执行下载的脚本(按书写顺序执行) async 1. 解析html 2. 遇到带async属性的script标签。继续解析html,同时下载script引入的文件 3. js文件下载完毕,浏览器暂停解析html,开始执行js 4. js执行完毕,浏览器接着解析html 1. **事件代理**,也叫做事件委托 第一个for循环显然要对DOM进行操作,很费性能,但是我们又想把li里面的内容输出又该怎么做呢? 这是我们就可以看for循环下面的ul.onlick函数,将找li变为直接找ul,对DOM的操作减少了,性能也增加了这里就是事件委托。 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> var lis=document.querySelectorAll('li'); var len=lis.length; var ul=document.querySelector('ul'); for(var i=0;i<len;i++){ lis[i].onclick=function(){ } } ul.onclick=function(ev){ if(ev.target.tagName.toLowerCase()=='li'){ console.log(ev.target.innerHTML) } } 1. **使用requestAnimationFrame来替代setTimeout和setInterval** var box=document.getElementById('box'); var timer=requestAnimationFrame(function fn(){ box.style.width=box.offsetWidth+5+'px'; box.innerHTML=box.offsetWidth/5+'%'; // console.log(this); timer=requestAnimationFrame(fn); if(box.offsetWidth>=500){ cancelAnimationFrame(timer); } }); 1. **图片懒加载** 什么是图片懒加载呢? 懒加载也就是延迟加载;当访问一个页面时,先将img标签中的src链接设为同一张图片(这样就只需请求一次,俗称占位图),将其真正的图片地址存储在img标签的自定义属性中(比如data-src);当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果;这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢页面卡顿或崩溃等问题 懒加载的实现步骤 1.首先,不要将图片地址放到src属性中,而是放到其它属性(data-src)中 2.页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中 3.在滚动事件中重复判断图片是否进入视野;如果进入,则将data-original属性中的值取出存放到src属性中 代码实现(建议代码) function getTopValue(obj){ var top=0; while(obj.offsetParet){ top+=obj.offsetTop; obj=obj.offsetParet; } } [Link 1]: https://blog.csdn.net/allenyhy/article/details/81484642 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]: /images/20221024/8b10074eeafa4f1f93f4fce37b394c41.png
相关 企业级Java应用性能优化策略 企业级Java应用性能优化是一个复杂的过程,主要包括以下几个方面: 1. **代码优化**:包括减少冗余代码、提高算法效率、使用高效数据结构等。 2. **资源管理优化** 左手的ㄟ右手/ 2024年09月11日 13:30/ 0 赞/ 23 阅读
相关 JS 性能优化 概述 性能优化时不可避免的 哪些内容可以看做是性能优化? 任何一种可以提升程序运行效率,降低程序开销的行为,我们都可以看做是一种优化操作。这就意味着在软件开发的过程中 布满荆棘的人生/ 2022年12月23日 03:26/ 0 赞/ 234 阅读
相关 js中性能优化的几大方法(页面级优化和代码级优化) js中性能优化 页面级优化 页面级优化的方法有以下几种: 1. CSS Sprites—使用雪碧图 > 具体的使用方法可以自行百度 待我称王封你为后i/ 2022年10月27日 13:50/ 0 赞/ 144 阅读
相关 SQL优化大总结之百万级数据库优化方案 网上关于SQL优化的教程很多,但是比较杂乱。近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充。 (1) 选择最有效率的表名顺序(只在基于规则 àì夳堔傛蜴生んèń/ 2022年09月23日 04:54/ 0 赞/ 120 阅读
相关 百万级查询性能优化 百万数据查询优化细则: 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where 子句中对 Dear 丶/ 2022年08月23日 00:40/ 0 赞/ 166 阅读
相关 页面性能优化 1.合并资源,减少http请求: 合并资源:CSS Sprites(精灵图),压缩代码 减少http请求:一个页面请求不要太多,能分页分页,把每个页面请求减少 2.异 我会带着你远行/ 2022年05月10日 16:48/ 0 赞/ 169 阅读
相关 PHP 语言级性能优化 PHP 语言级性能优化 -- 可使用ab压力测试工具进行测试; 1、多使用系统内置函数; 2、系统内置函数之间的性能也不一样,选择较好的函数;如 isset 与 array 今天药忘吃喽~/ 2021年12月19日 02:43/ 0 赞/ 234 阅读
相关 linux 内核优化配置(企业级配置优化) 安装BBR;升级内核到最新版本/5.0.2 载入公钥和yum源 rpm --import https://www.elrepo.org/RPM-G Bertha 。/ 2021年11月04日 10:01/ 0 赞/ 644 阅读
相关 Tomcat企业级优化 以下内容全是干货,是软谋教育Gerry老师的分享! \------------------------------------------------------------ 心已赠人/ 2021年09月27日 12:02/ 0 赞/ 317 阅读
还没有评论,来说两句吧...