前端加载方式详解

大家先思考一下，对于前端来讲，什么时候会谈论到加载方式？或者对于前端来讲，文件的加载在什么地方会用到？

我猜，你可能会想到的有：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