返回顶部

script标签引入脚本的引入位置与效果

用script标签引入脚本的引入位置大致有两种情况:

1,在head中引入;

2,在body末尾引入;

浏览器由上到下解析代码,正常情况下,先解析head中的代码,在解析body中的代码;放在head中的好处是统一管理、方便维护,但是,要知道解析js代码也就是遇到script标签会阻塞加载,如果js代码文件较大,页面会出现一个明显的空白期,造成用户体验不好(事实上js会被缓存,所以这种情况造成的影响很小),一般通用类的调用可以放在head中(其中需要操作dom的可以ready后操作);而对于内部引用(在script标签中写js代码)一般会放在body中;在head中的js会在调用的时候执行,在body中的js会在页面加载时候执行。

 

理论上来说js标签放在html文档的任何位置都可以,规范起见,推荐放到body结束标签的末尾,包含到body标签内:
<body>
    <!-- 这里是其他的HTML标签 -->
    <script> // 这里是代码 </script>
</body>
这样处理的好处是无需担心因页面未完成加载,造成DOM节点获取不到,使脚本报错的问题,而且能避免因脚本运行缓慢造成页面卡死的问题。另外,Yahoo的前端优化指南里就有这一条。

参考
链接:https://www.jianshu.com/p/0c3af5731e2a
https://blog.csdn.net/tianrangdejiehuo/article/details/51818673

posted @ 2020-01-20 15:22  fen斗  阅读(2814)  评论(0编辑  收藏  举报