解决加载WEB页面时，因为JS文件引用过多影响页面打开速度的问题

时间 2019-12-10

标签解决加载 web 页面因为文件引用过多影响打开速度问题栏目 HTML 繁體版

原文原文链接

一、通常作法

通常咱们会把全部的<script>元素都应该放在页面的<head>标签里，但因为是顺序加载，所以只有当全部JavaScript代码都被依次下载、解析和执行完以后，才开始加载<body>标签里面的内容。浏览器

二、把`<script>`标签放在`<body>`标签最后面

这样会先加载、解析页面元素，然后再加载JS代码，直观表现上就是页面打开速度有所提高。固然须要注意的是，若是页面须要用到某个JavaScript文件，那这个JS文件的引用仍是须要放在页面元素以前，如放在<head>标签里。网络

三、加defer属性

在<script>标签中加入defer属性，该defer属性至关于告诉浏览器当即下载脚本，但延迟执行。脚本会在整个页面元素解析完成后再运行。异步

四、加async属性

在<script>标签中加入async属性，该属性与defer属性相似，至关于告诉浏览器当即下载脚本，可是是异步下载，下载顺序不肯定，执行速度也不肯定。
这个属性可用于在网络不通的环境下，须要引入某个互联网脚本资源的时候，依然能够快速打开页面，这样不至于由于个别脚本访问不到而阻塞后面资源的请求。async

解决加载WEB页面时，因为JS文件引用过多影响页面打开速度的问题

一、通常作法

二、把<script>标签放在<body>标签最后面

三、加defer属性

四、加async属性

二、把`<script>`标签放在`<body>`标签最后面