性能
1.代码执行过程会阻塞浏览器的其他进程,比如页面绘制、
a.讲脚本放在页面底部
b.合并脚本,减少script标签数。压缩脚本
c.使用无阻塞下载。例如defer属性,xhr对象下载。SSR服务端渲染
d.使用CDN,设置HTTP响应头来缓存JS
2.数据存储位置对性能的影响。
数据存储份字面量,变量,数组项,对象成员。
a.字面量和局部变量访问速度快,访问数组元素和对象成员相对较慢。
b.嵌套对象,原型链属性,层次越深,访问速度越慢。
3. 利用缓存:
DOM渲染
a.减少回流、重排
减少使用影响重排的属性,(居中查询),例如getComputedStyle(),offset属性,scroll属性client属性。使用缓存布局属性
集中查询 ,一次合并修改,或者让元素脱离文档流。例如Diff,虚拟节点
c.使用事件委托,减少性能损耗。
d.使用速度更快的API,比如querySelectorAll,firstElementChild
循环
a.减少循环次数,计算量
b.switch比if。判断条件较多时,使用查找表法更快
c.减少使用for..in。for..in需要遍历原型链中所有属性
d.使用递归算法、改善过的Memoization算法,改善调用栈错误的递归模式。
JS引擎
a.js任务不应当执行超过100毫秒。过长的运行时间导致的延时,会让用户感觉与页面失去联系
b.浏览器响应存在差异 ,错位的交互与响应,会导致用户体验混乱
c.将耗时脚本,拆分多个小任务,利用setTimeout安排延时执行。例如:分时函数。
d.使用web Worker,避免锁定UI线程。
Ajax请求
1.使用json传输,减少解析时间
2.使用MXHR 减少请求,合并js和css文件
3.不泄露异常信息
Vue性能
- 模块按需加载, 懒加载,Vue路由懒加载。预加载,轮播预加载前后图片,长滚动先显示可视区域,滚动加载更多。
- 树形数据加载太大,引用懒加载。表格采用分页。
- for循环设置key值,让每一项都有唯一key值,这样vue核心代码能更快找到该条数据,快速定位到diff
- 使用keep-alive 对组件进行缓存,从而节约性能
- 对代码进行压缩,例如采用gzip压缩。生产环境sourcemap设置成false
- 使用可复用组件
- 提前公共css
- 及时销毁定时器,解绑事件,销毁控件
- 频繁切换控件使用v-show,不频繁切换采用 v-if
标签:缓存,性能,面试,使用,加载,减少,属性 来源: https://blog.csdn.net/mmjinglin/article/details/114649492
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。