JS延时加载

延迟加载

需要使用延迟加载的原因：

（1）DOM还未加载完毕就执行JS，代码会出现错误
（2）很多资源同时加载浪费内存，浪费加载时间
（3）用户访问一部分只展示这一部分的内容（按需加载）

延迟加载的方法：

1. defer：当前页面解析完毕后（dom、css、同步js解析完）再执行

<script src="1.js" defer="defer">1</script>
<script src="2.js">2</script>
<script src="3.js">3</script>

执行顺序：2、3、1

2. async：不能控制加载顺序

<script src="1.js" async>1</script>
<script src="2.js">2</script>
<script src="3.js" async>3</script>
<script src="4.js">4</script>

执行顺序：2、1、4、3或者1、2、3、4或者2、4、1、2或者2、3、1、4等等

3. 动态创建DOM

function add() {
    var ele = document.createElement('script')
    ele.src = '..'
    document.body.appendChild(ele)
}

if(window.addEventListener) window.addEventListener('load', add, false)
  else if (window.attchEvent) {
    window.attchEvent('onLoad', add)
  }else{
    window.onload = add
  }

可以在某个元素存在的情况下动态创建script

4. 使用jQuery的getScript方法

5. setTimeout：使用延时函数

6. 把JS引入放到最后

var ele = document.createElement('script')
ele.src = '..'
document.body.appendChild(ele)

延迟加载的优缺点：

优点：

（1）提高网站的加载速度，增强用户体验
（2）减少带宽、内存、存储的消耗，减少服务器压力
（3）在某些场景中更合理

缺点：

（1）使代码编写时更加复杂
（2）影响网站在搜索引擎上的排名

Vue中使用延迟加载

路由懒加载

import  About from '../components/About.vue';
//直接引用的方式，非懒加载，后续项目打包结束将会直接打包到app.js文件中
const routes = [
   { path: '/about',component: About }     //引入组件
]

//懒加载不需要在上方引入
const routes = [
   {
     path: '/about'，
     component: () => import( /* webpackChunkName: 'about' */ '../components/About.vue' )
   }
]
//懒加载最后打包工具打包不会将About.vue组件中的内容打包进app.js中
//它会单独打包成一个新的about.js文件，并在页面加载完成后异步加载，从而达到懒加载效果
//包装到箭头函数中，vue仅在请求到对应组件时执行并加载模块

注意：import中 /* webpackChunkName: ‘about’ */ 这个注释必须有，这个为将来打包命名

参考文章：
https://zhuanlan.zhihu.com/p/147922995
https://www.jianshu.com/p/8920dc078689