js插入位置对页面效果的影响

最新推荐文章于 2022-08-31 23:47:38 发布

我只会html

最新推荐文章于 2022-08-31 23:47:38 发布

阅读量256

点赞数

分类专栏： frontend

本文链接：https://blog.csdn.net/qq_34087914/article/details/104314357

版权

frontend 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

书写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>

可以发现，在这样的代码顺序下，页面效果正常了。

我只会html

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js插入位置对页面效果的影响

书写html页面时，将js插入在body的后部是常识，因为如果将js插入在body前部，页面还未渲染就先执行js，将导致js中涉及组件的操作无法正确地作用。举例来说，以下这段代码，将使得页面无法正确渲染。<body> <script src = "./vue2.6.11.js"></script> <script> ...
复制链接

扫一扫

专栏目录