大家先思考一下,对于前端来讲,什么时候会谈论到加载方式?或者对于前端来讲,文件的加载在什么地方会用到?
我猜,你可能会想到的有:HTML中<script>标签、<img>标签,中的src会请求加载文件。
对于前端来讲,涉及到文件加载的主要就是这两种情况。
对于文件加载方式的选择需要考虑两方面:加载速率、文件依赖,为了解决加载效率的问题,可以使用异步加载方式,如果要解决文件依赖问题,就要使用requirejs等模块或处理库。
同步加载:默认情况就是浏览器自上而下,解析HTML标签->并加载文件->执行文件内容。
异步加载: 什么是异步加载?异步加载是为了实现在HTML解析完成之后再加载或执行JavaScript代码,也就是说异步加载是为了解决JavaScript代码和HTML解析之间的冲突
异步加载的实现方法:动态脚本加载、defer、async(HTML5新增属性)
async方法:HTML5中新增的属性async,<script async defer src='siteScript.js' οnlοad='init()'></script>
备注:
defer在html解析完成之后执行,按顺序加载,然后按顺序执行
async在加载完成后立即执行,执行顺序和加载顺序无关
1)同步加载主要针对信息量很小的情况,如果要加载的js文件或者图片信息过大,会影响页面渲染,使用户体验变差。
2)异步加载的方式:动态脚本加载、defer、async