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

  1. 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等等

  1. 动态创建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

  1. 使用jQuery的getScript方法

  2. setTimeout:使用延时函数

  3. 把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

你可能感兴趣的:(前端,前端面试,javascript,前端,vue.js)