js页面加载前执行_3、再学JavaScript-在html里如何合理安排JS的位置，用户体验更好...

温故而知新，再学一遍JavaScript

在讨论JavaScript引入位置之前，我们了解一下浏览器是如何解析JS脚本代码。

1、对于JS嵌入脚本方式编写的代码：

解析器会按照从小到下的顺序对代码块依次扫描，进行预编译，然后保存到自己环境当中。

对于“函数声明型“，函数定义顺序不受调用执行位置的影响，即可以先调用或定义；

showMessage();//可以正常调用

function showMessage(){

alert('ok');

}

对于“表达式型“，如 ：

showMessage();//调用出错

var showMessage=function(){

alert('出错');

},

则必须先定义后调用，否则，就会引发错误。

2、对于引用外部JS独立文件的写法：

我们先来看看上一编文章里面谈到的关键字作用和区别

要注意的一点就是使用async异步下载：

• 首先，如果多个文件同时加载，要确保它们之间无依赖关系。
• 其次，不要在脚本加载期间修改DOM，因为你不能保证，修改前，页面中的元素一定已经呈现。例如：异步加载速度很快完成，在某个button呈现之前已经加载完毕，你这个时候去访问这个button，你就会发现无法访问到它，从而引发错误。

根据上面的解析机制原理，那么怎么安排JS出现的位置比较合理呢？

我们都知道，编写的软件不但要把功能写出来，还要注重用户体验的好坏。一个页面如果让用户等待2、3分钟，仍然是空白内容，那么很可能用户就会直接把页面关闭，放弃浏览。

因此，我们开发过程中，通常会按照以下规则引入JS脚本。

• 以最快的速度把内容呈现给用户。哪怕是渐进式的加载，也让用户知道内容已经在加载中。尽量避免用户等待期间一直以空白页面呈现，又无任何友好提升。

按照我们传统的方式，把JS放在

元素之间：

这种情况通常会因为阻塞页面继续往下解释而导致用户一直看到是空白页面。页面呈现内容是从浏览器遇到

元素开始的。

如果一定要把JS放在

元素之间，我们可以加入关键字defer 或者async 让页面继续往下解析，尽快呈现内容。

使用async 异步加载：

根据经验，总的来说：把所有脚本都放置到 之前是一个很好的安排。

本节到处结束！下一节我们学习一下：基本语法，有兴趣的朋友可用关注一下小编。

如果学习过程，有什么异议或者经验总结，欢迎在下方留言，一起研究学习，共同进步。