源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Javascript 加载和执行-性能提高篇

  • 时间:2021-09-05 20:54 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Javascript 加载和执行-性能提高篇
[b]Js的阻塞性[/b] Javascript 在浏览器中的性能问题,可能是最重要的可用性问题 Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行 不管是内嵌的还是外链的,下载并立即执行 因为它有可能会修改页面 [b]页面生存周期的概念[/b] 瀑布图中看到了下载时间和executing time 在head中加入script 和link body加载到前不会输出任何东西,因此会看到空白页面
[u]复制代码[/u] 代码如下:
<script type="text/javascript"> document.write("The date is" + (new Date().toDateString())); </script>
页面在到script时,不知道script里会做什么,所以必然阻塞,等它执行 Ie8 等浏览器能并行下载多个js等资源,但是还是对下载图片有影响 结论, 将脚本放在底部加载 [b]组织脚本[/b] 目标 最小化迟延时间 问题 引用多个script文件 内嵌多个script标签 每个http请求都会带来性能上的开销 紧跟在link 后的script 是个错误 它会等待css的加载,以求获得最精准的描绘 结论:减少script标签的数量 将多个js文件合并成一个,打包工具 yahoo的合并处理器 [b]无阻塞的脚本[/b] js倾向于阻止浏览器的某些处理过程,如http请求处理和界面更新.这是最重要的性能问题。于是要减少js文件大小和限制http请求数 但是功能丰富与代码量之间的矛盾, 合并成单个文件却体积大会锁死浏览器一大段时间,于是我们需要逐步加载javascript文件 重点:在页面加载完成后加载javascript文件 [b]1、延迟加载脚本[/b] defer 属性 如果要下载的js文件不会进行dom操作,那么defer属性有很大的用处,它能让文件并行下载,并不会立即执行,而会在onload事件后再执行,适用于任何script标签 [b]2、动态加载脚本[/b] 一个function
[u]复制代码[/u] 代码如下:
function loadScript(url,callback){ var script = document.createElement('script'); script.type = 'text/javascript'; if(script.readyState) { //IE script.onreadyStatechange = function(){     if(script.readyState == 'loaded' || script.readyState == 'complete') { script.onreadyStatechange = null;      callback(); } } else { script.onload = function(){ callback(); } } }
这里要注意浏览器的兼容性,删除事件, 如果有多个文件需要这样加载,那么可以
[u]复制代码[/u] 代码如下:
loadScript('file1.js', function(){ loadScript('file2.js',function(){ }) });
[b]3、XHR脚本注入[/b]
[u]复制代码[/u] 代码如下:
var xhr = new XMLHttpRequest(); xhr.open('get','file1.js',true); xhr.onreadystatechange= function(){   if(xhr.readyState == 4) {     if(xhr.status >= 200 && xhr.status <=300 || xhr.status==304) { var oScript = document.createElement('script');      oScript.text = xhr.responseText;      document.body.appendChild(oScript); } } }
304表示从缓存取 text将ajax的内容放入text [b]它的优点[/b] 兼容性好,异步, 缺点:不能扩域 不能从cdn取内容
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部