1.简述创建函数的几种方式
第一种(函数声明):
function sum1(num1,num2){
return num1+num2;
}
第二种(函数表达式)
var sum2 = function(num1,num2){
return num1+num2;
}
第三种(函数对象方式)
var sum3 = new Function("num1","num2","return num1+num2");
2.js 延迟加载的方式有哪些?
1. defer 和 async(异步加载)
当浏览器碰到 script 脚本的时候:
1. <script src="script.js"></script>
没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续
载入的文档元素,读到就加载并执行。
2. <script async src="script.js"></script>
有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
3.<script defer src="myscript.js"></script>
有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后DOMContentLoaded 事件触发之前完成。
从实用角度来说,首先把所有脚本都丢到 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析
解析。
此图告诉我们以下几个要点:
1. defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
2. 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
3. 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
4. async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
5. 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google
Analytics
2. 动态创建 DOM 方式(创建 script,插入到 DOM 中,加载完毕后 callBack)
创建 script,插入到 DOM 中,加载完毕后 callBack,见代码
代码如下:(有兼容性封装)
3. 按需异步载入 js
默认情况 javascript 是同步加载的,也就是 javascript 的加载时阻塞的,后面的元素要等
待 javascript 加载完毕后才能进行再加载,对于一些意义不是很大的 javascript,如果放
在页头会导致加载很慢的话,是会严重影响用户体验的。