js基础总结性能优化

一.加载和执行

1.推荐所有的script标签尽可能放到body标签的底部，以尽量减少对整体页面下载速度的影响。

2.组织脚本

减少页面包含的scirpt标签数量，可以把多个文件合并成一个。

3.无阻塞脚本

1）.延迟脚本

defer:html解析完才加载，执行顺序和加载顺序有关。

async:html加载完就执行，执行顺序和加载顺序无关。

2）.动态脚本元素（推荐）

文件在该元素被添加到页面时开始下载。这种技术的中i单在于：无论在何时启动下载，文件的下载和执行过程呢个不会阻塞页面其他进程。

但是有兼容问题，解决办法如下：

function loadScript(url, callback) {var script = document.createElement_x_x('script');script.type = "text/javascript";if (script.readyState) {//IEscript.onreadystatechange = function () {if (script.readyState == 'loaded' || script.readyState == 'complete') {script.onreadystatechange = null;callback();}};}else{//其他浏览器script.onload=function(){callback();}};script.scr=url;document.getElementsByTagName('head')[0].a(script);};loadScript('file.js',function(){console.log('file.js is loaded')});
loadScript('file.js',function(){loadScript('file2.js',function(){loadScript('file3.js',function(){console.log('all is load')})})});复制代码

XMLHttpRequest脚本注入（大型web不推荐）

var xhr=new XMLHttpRequest();xhr.open('get','file.js',true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<<span style="color: #b5cea8;">300||xhr.status==304){var script=document.createElement_x_x('script');script.type='text/javascript';script.text='xhr.responseText';document.body.a(script)}}};xhr.send(null);复制代码

总结：减少JavaScript对性能的影响。

1./body闭合标签之前，将所有的script标签放在页面底部。这样确保在脚本执行前页面已经完成了渲染。

2.合并脚本，页面中的script标签也少，加载也就越快，响应也就越快，无论外链还是内嵌脚本都是如此。

3.使用多种无阻塞的javascript方法：

3.1使用script的方法defer属性。

3.2使用动态创建script元素来下载并执行代码。

3.3使用XHR对象下载javascript代码并注入页面中

js基础总结性能优化相关推荐

js 前端抠图性能优化
原文链接: js 前端抠图性能优化上一篇: js 生成器协程下一篇: wasm 和cpp std 的使用性能对比下图是字符串键 + 欧式距离 + 四方字符串键 + 欧氏距离 + 八方 ...
揭秘 Vue.js 九个性能优化技巧
gitHub 源码:https://github.com/Akryum/vue-9-perf-secrets 这篇文章主要参考了 Vue.js 核心成员 Guillaume Chau 在 19 年美国 ...
查询mysql数量_Linux 运维基础 Mysql性能优化
1, 查看MySQL服务器配置信息 mysql> show variables; 2, 查看MySQL服务器运行的各种状态值 mysql> show global status; 3, 慢 ...
Unity 对GPU的基础性能优化
Unity GPU 性能优化遇到的问题分析工具解决方法 1.不在代码层面的优化方法 2.部分在代码层面进行优化特别说明遇到的问题因为项目中采用的主机为工控机,不带有独立显卡,CPU采用的是 ...
FlutterWeb性能优化探索与实践
点击"开发者技术前线",选择"星标" 让一部分开发者看到未来来自:美团技术团队美团外卖商家端基于 FlutterWeb 的技术探索已久,目前在多个业务中落地 ...
嵌入式linux内存使用和性能优化
这本书有两个关切点:系统内存(用户层)和性能优化. 这本书和Brendan Gregg的<Systems Performance>相比,无论是技术层次还是更高的理论都有较大差距.但是这不影 ...
Hibernate性能优化之EHCache缓存
像Hibernate这种ORM框架,相较于JDBC操作,需要有更复杂的机制来实现映射.对象状态管理等,因此在性能和效率上有一定的损耗. 在保证避免映射产生低效的SQL操作外,缓存是提升Hibernat ...
ES性能优化之查询优化笔记（一）
文章目录前言一.mappings优化二.查询语句优化三.强制段合并(force merge) 四.过滤查询(filter) 五.路由(routing) 六.游标查询(scroll) 七.避免使 ...
vue2的9种性能优化方式
文章目录总原则零.不要过早优化一. 使用函数式组件适用情况原理官网说明实例与分析二. 组件拆分适用情况原理实例与分析三. 尽量适用普通变量而非响应式变量适用情况原理实例与 ...

js基础总结性能优化

js基础总结性能优化相关推荐

最新文章

热门文章