HTML5学堂-码匠 HTML5学堂

您当前位于:ECMAScript 基础语法 ——> JavaScript | 文件引入位置的讲究,在文件头部和尾部哪里引入JS文件更好?

JavaScript | 文件引入位置的讲究,在文件头部和尾部哪里引入JS文件更好?

2015/07/02 22:40:48 | 作者:HTML5学堂(码匠) | 分类:ECMAScript 基础语法 | 关键词:JavaScript,文件引入,样式阻塞

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学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS