书写html页面时,将js插入在body的后部是常识,因为如果将js插入在body前部,页面还未渲染就先执行js,将导致js中涉及组件的操作无法正确地作用。
举例来说,以下这段代码,将使得页面无法正确渲染。
<body>
<script src = "./vue2.6.11.js"></script>
<script>
new Vue({
el:'#app',
data:{
count: 100
},
methods:{
}
})
</script>
<div id="app">
<h1>{{count}}</h1>
</div>
</body>
如图,页面没有将Vue实例中的数据count渲染到页面上,因为页面需要进行渲染时,js已经执行结束了。
那么,为什么通常需要引入外部js时,我们又习惯于将其书写在body最开始的地方,或是html的头部呢?
以下进行了两个小实验,来对其中的合理性进行解释。
同样的一段代码,我们先将Vue.js的引入与页面自身的js代码都放置到body后部。
<body>
<div id="app">
<h1>{{count}}</h1>
</div>
<script src = "./vue2.6.11.js"></script>
<script>
new Vue({
el:'#app',
data:{
count: 100
},
methods:{
}
})
</script>
</body>
细心的话可以发现,页面刷新过程中有闪烁现象,这样的页面效果将是很差的。
似乎可以这样解释这一现象,未执行到js时,浏览器没有想到{{count}}将会是绑定的数据,而仅仅是一段html文本,所以将其直接渲染。但执行后部js时,又需要按照Vue的语法将其理解为绑定的数据,所以页面重新渲染。
那么我们再次改变代码顺序,这次将Vue.js的引入提到body前部。
<body>
<script src = "./vue2.6.11.js"></script>
<div id="app">
<h1>{{count}}</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
count: 100
},
methods:{
}
})
</script>
</body>
可以发现,在这样的代码顺序下,页面效果正常了。