html js引入位置,JavaScript | 文件引入位置的讲究，在文件头部和尾部哪里引入JS文件更好？...

JS放在文件头部还是尾部

HTML5学堂：JavaScript文件的引入方式与CSS引入方式类似，但是外引的JS文件可以放置在html文件的任意地方，JS文件放置在头部或者底部有何不同呢？或者说，放置在不同位置各有什么影响呢？

JavaScript文件位置

在本网站(HTML5学堂)正式上线之前，统计工具针对本网站的SEO优化提出了一些建议，说是将JS文件放置在body标签之后会提升加载速度。不过最终我们还是放置在了head标签里。这里就涉及到一个JS文件位置的选择。到底JS文件的引入放置在头部好还是尾部好？一起来看看吧。

具体将引入的JS放在哪里与代码执行的顺序有关。网页文件的读取是从上到下的，如果将JavaScript文件放置在head当中，会先加载JS文件，之后再继续执行，那么此时，如果JS文件比较大，页面加载就会比较慢，导致空白。

那么，如果将JavaScript文件放置在底部，如果说，也是比较大型的JS文件的话，是不是就没有问题了呢？

其实，如果将JS文件放置在底部的话，可以让JS文件与图片几乎同时下载，使得页面当中的内容能够尽快的下载下来，但是，由于网页基本结构与样式均已经加载完成，那么此时负责交互的JS并没有下载下来，必然也会对用户的体验造成影响。

因此，整体来说，如果“交互性优先”，那么我们应当将JS放置在顶部。如果对于交互性要求没那么高的页面，我们将JS放置在底部。

阻塞方式加载JS

阻塞方式加载JS：JavaScript在头部会阻止其他元素并行加载(css,图片,网页)。目前绝大部分的浏览器都是采取阻塞方式(Scripts Block Downloads)进行JavaScript文件的加载的。

更好的解决方法？

一般大型的网站都会采取非阻塞方式加载JavaScript来提高性能(降低页面加载时间)，如使用iframe, 动态添加script节点等来并行下载JavaScript文件。不过目前用得最多的应该还是动态添加script节点的方法。

欢迎沟通交流~HTML5学堂

html js引入位置,JavaScript | 文件引入位置的讲究，在文件头部和尾部哪里引入JS文件更好？...相关推荐

HTML页面引入另一个HTML页面，比如各个页面引入通用的网站头部、尾部、导航栏
1. 使用HTML的link标签import另一个HTML页面 1.1 在HTML页面的<head>标签内使用<link>标签引入另一个HTML页面("centerH ...
将py文件转换成html,(2条消息)自制 Python小工具将markdown文件转换成Html文件
今天看到了一个Python库,名为markdown.瞬间就给了我一个灵感,那就是制作一个将markdown文件转换成html文件的小工具. 我的实验环境操作系统: Windows 7 64位旗舰版 ...
原生JS实现文件自定义位置盖章功能并导出PDF
原生JS实现文件自定义位置盖章功能并导出PDF 实现原理在需要签章的文件上面创建一个div,可以通过移动这个div来确定签章位置,然后在通过获取这个位置把章子替换到这,并导出PDF,可以多次盖章! ...
JS(JavaScript)--字符串指定位置添加元素
字符串指定位置添加元素 /*** 字符串指定位置添加元素* @param str1:原字符串* @param n:插入位置* @param str2:插入元素* @return 拼接后的字符串*/ f ...
javascript历史、作用、三大组成、javascript代码书写位置、注意事项、变量
JavaScript简介 JavaScript历史: JavaScript是一门解释型.动态类型.基于对象的脚本语言(不需要编译,直接执行,与之相对的是编译型语言),由美国网景公司的布兰登·艾奇发明, ...
oracle修改数据文件存储位置,oracle 修改数据库文件位置
Oracle 体系结构 Oracle 服务器如图所示:由oracle实例(INSTANCE)和数据库(database)组成. 1) Instance 实例用于管理和调用数据库,是由oracle系统 ...
Vue引入第三方JavaScript库和如何创建自己的Vue插件
一第三方JavaScript库前言 .vue文件中不解析 script标签引入js文件,只能用 import 引入有两种用法: 1.import a from '-/a' 2.import ' ...
php中路径怎么表示,PHP_PHP解析目录路径的3个函数总结，要描述一个文件的位置，可以 - phpStudy...
PHP解析目录路径的3个函数总结要描述一个文件的位置,可以使用决对路径和相对路径.绝对路径是从根开始一级一级地进入各个子目录,最后指定该文件名或目录名.而相对目录是从当前目录进入某目录,最后指定该文 ...
js实现截取网页上特定位置的图片打印或保存
js实现截取网页上特定位置的图片打印或保存一.实现思路具体思路是创建一个宽和高都是100%的canvas,使其能够覆盖整个页面,然后根据所要截取的图片起始位置相对于canvas的位置(因为是1 ...

html js引入位置,JavaScript | 文件引入位置的讲究，在文件头部和尾部哪里引入JS文件更好？...

html js引入位置,JavaScript | 文件引入位置的讲究，在文件头部和尾部哪里引入JS文件更好？...相关推荐

最新文章

热门文章