js异步加载的方式有哪些？

JavaScript015

js异步加载的方式有哪些？,第1张

方法一：Script Dom Element

(function(){

var scriptEle = document.createElement("script")

scriptEle.type = "text/javasctipt"

scriptEle.async = true

scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"

var x = document.getElementsByTagName("head")[0]

x.insertBefore(scriptEle, x.firstChild)

})()

方法二：onload时的异步加载

function(){

if(window.attachEvent){

window.attachEvent("load", asyncLoad)

}else{

window.addEventListener("load", asyncLoad)

}

var asyncLoad = function(){

var ga = document.createElement('script')

ga.type = 'text/javascript'

ga.async = true

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'

var s = document.getElementsByTagName('script')[0]

s.parentNode.insertBefore(ga, s)

}

})()

方法三：$(document).ready()

关于JavaScript脚本加载的问题，相信大家碰到很多。主要在几个点——

1>同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题

2>同步脚本和异步脚本带来的性能优化问题

深入理解脚本加载相关的方方面面问题，不仅利于解决实际问题，更加利于对性能优化的把握并执行。

先看随便一个script标签代码——

复制代码代码如下:

<script src="js/myApp.js"></script>

如果放在<head>上面，会阻塞所有页面渲染工作，使得用户在脚本加载完毕并执行完毕之前一直处于“白屏死机”状态。而<body>末尾的打脚本只会让用户看到毫无生命力的静态页面，原本应该进行客户端渲染的地方却散布着不起作用的控件和空空如也的方框。拿一个测试用例——

代码如下:

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>异步加载script</title>

<script src="js/test.js"></script>

</head>

<body>

<div>我是内容</div>

<img src="img/test.jpg">

</body>

</html>

其中,test.js中的内容——

代码如下:

alert('我是head里面的脚本代码，执行这里的js之后，才开始进行body的内容渲染!')

我们会看到,alert是一个暂停点，此时，页面是空白的。但是要注意，此时整个页面已经加载完毕，如果body中包含某些src属性的标签(如上面的img标签)，此时浏览器已经开始加载相关内容了。总之要注意——js引擎和渲染引擎的工作时机是互斥的（一些书上叫它为UI线程）。

因此,我们需要——那些负责让页面更好看、更好用的脚本应该立即加载，而那些可以待会儿再加载的脚本稍后再加载。

分页一般和表格一起用，分页链接作为表格的一部分，将分页链接封装成一个独立的组件，然后作为子组件嵌入到表格组件中，这样比较合理。

效果：

代码：

1.注册一个组件

js

Vue.component('pagination',{

template:'#paginationTpl',

replace:true,

props:['cur','all','pageNum'],

methods:{

//页码点击事件

btnClick:

function(index){

if(index

!=

this.cur){

this.cur

=

index

}

}

},

watch:{

"cur"

:

function(val,oldVal)

{

this.$dispatch('page-to',

val)

}

},

computed:{

indexes

:

function(){

var

list

=

[]

//计算左右页码

var

mid

=

parseInt(this.pageNum

/

2)//中间值

var

left

=

Math.max(this.cur

-

mid,1)

var

right

=

Math.max(this.cur

+

this.pageNum

-

mid

-1,this.pageNum)

if

(right

>

this.all

)

{

right

=

this.all}

while

(left

<=

right){

list.push(left)

left

++

}

return

list

},

showLast:

function(){

return

this.cur

!=

this.all

},

showFirst:

function(){

return

this.cur

!=

1

}

}

})

模板：

<script

type="text/template"

id="paginationTpl">

<nav

v-if="all

>

1">

<ul

class="pagination">

<li

v-if="showFirst"><a

href="javascript:"

@click="cur--">«</a></li>

<li

v-for="index

in

indexes"

:class="{

'active':

cur

==

index}">

<a

@click="btnClick(index)"

href="javascript:">{{

index

}}</a>

</li>

<li

v-if="showLast"><a

@click="cur++"

href="javascript:">»</a></li>

<li><a>共<i>{{all}}</i>页</a></li>

</ul>

</nav>

</script>

HTML：

<div

id='item_list'>

...

<pagination

:cur="1"

:all="pageAll"

:page-num="10"

@page-to="loadList"></pagination>

</div>

当点击分页链接的时候，通过watch

cur，子组件分发

page-to

事件，通过

@page-to="loadList"

标签指定使用父组件

loadList

方法处理事件，父组件接收到page值然后ajax加载数据，根据服务端返回计算并更新自身的

pageAll

值，因为子组件prop通过

:all="pageAll"

动态绑定了父组件的pageAll对象，所以子组件会联动更新。

附上一个简单的表格组件例子:

var

vm

=

new

Vue({

el:

"#item_list",

data:

{

items

:

[],

//分页参数

pageAll:0,

//总页数,根据服务端返回total值计算

perPage:10

//每页数量

},

methods:

{

loadList:function(page){

var

that

=

this

$.ajax({

url

:

"/getList",

type:"post",

data:{"page":page,"perPage":this.perPage},

dataType:"json",

error:function(){alert('请求列表失败')},

success:function(res){

if

(res.status

==

1)

{

that.items

=

res.data.list

that.perPage

=

res.data.perPage

that.pageAll

=

Math.ceil(res.data.total

/

that.perPage)//计算总页数

}

}

})

},

//初始化

init:function(){

this.loadList(1)

}

}

})

vm.init()

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！