前端开发怎样实现懒加载和预加载
给大家讲明白什么是图片的预加载和揽加载，这也是面试当中前端经常考的一个面试题。首先说什么是预加载，那么它的使用场景，它的实现非常简单，就是我先模拟一张图片，怎么样模拟呢？就是用这个 amate 去模拟请求一张图片，然后 让他去服务器请求加载图片的这个路径，请求完之后把路径再给真正的 atml 页面上的图片的 src 路径再给他。如果我们不使用的话，他会出现什么情况呢？我给大家做一个演示， 比如说现在我去加载一张图片大图，也就是整个图片他会从上到下慢慢的出现，那么这种效果其实体验是不好的， 我再给大家演示一下，看到没有？就是这样的效果慢慢的出现，那么为了解决这个问题，提升这个用户体验，那么我们首先会先又一个 给妹子对象，然后让他去加载这个真正的这个图片，加载完了之后，咱们可以去看一下，那么他这个图片你可以看一下他其实是怎么从缓存当中取的， 也就说你在第一次模拟出来的时候，他去真正的去进行图片的地址，那么我在这个页面盗墓元素的时候，他其实是走的这种本地的缓存了，这样的话就体验特别好，这就是欲加载，真正加载完成之后，可以获取到这个 ma 字标签， 然后再把 src 给他。那么再说一下揽加载，也就说我们在事先渲染一个页面的时候，先用一一这个默认的图片去替代，等到你滑动到具体的位置的时候，他才显示真正的图片，那么什么意思呢？我给大家做一个演示，就比如说现在，现在这个图片我往下滑 滑块的时候，你可以看一下他先加载一个类似于这样的背景图，等我滑到的时候他再去加载，这样的话能提高他的体验，这就是图片的揽加载。怎么样实现一个图片的揽加载呢？如果你们知道方案，可以评论区留言。
粉丝4.9万获赞44.9万
相关视频
01:14查看AI文稿AI文稿请说像什么是懒加载和欲加载，那么懒加载和欲加载呢，其实都是一种页面的新的优化，都是为了提高网站和应用程序的性能，减少页面的加载时间。那么其中来说懒加载呢，一般是指在页面滚动时，按需加载页面上的图片，视频或者是其他资源。 当页面加载时，只会加载页面的初始内容，而不会加载页面上的所有资源。所以当用户去滚动页面的时候呢，再依据需要去加载对应的资源，这样的话呢就可以减少页面的加载时间，提高用户体验。那么欲加载呢，是指在页面加载时，提前加载页面上的资源，以便呢在用户需要时可立即访问。 那么预加载呢，我们一般来说就是通过页面中的头部标签呢，去使用外部啊，令可标签，外力钥匙以及 screep 外部 g s 方式去实现的，比如说可以使用令可标签来预加载 css 文件，使用 scree 标签来预载图片或者是其他 资源，那么这样来说的话，就可以避免在用户需要的时候再去请求资源，提高响应速度和用户体验。那么总体来说呢，懒加载和预加载呢，都是优化网站的有效手段 啊，所以我们基本上来说呢，可以根据具体的场景和需要去选择合适的方式。那么一般来说，懒加载呢，就适用于呢需要去加载大量资源的页面啊，欲加载呢，就适用于需要去提高响应速度的关键资源。我是旭旭，祝你面试成功！
460程序员旭旭呀～
02:13查看AI文稿AI文稿懒加载是一种网页性能优化的方式，它能极大的提升网站加载速度，就比如图片，图片一直是影响网页性能的主要因素，如果每次进入网站就请求所有的图片资源，等图片加载出来，访客也早没耐心了，所以我们需要懒加载这一项优化功能。 这里不止聊科技，更能探索新天地。大家好，欢迎来到潮趣科技。一本我们已经讲解完了 wp rocket 的缓存汉文件优化，今天我们来介绍一下 wp rocket 的揽加载还有加载功能。现在我们先转到到媒体设置选项卡， 这里就包括了懒加载选项。图片通常是我们网站上其中一个重要的元素，他加载的时间比文本更长，会导致网站加载的更慢。为了优化这个加载时长的问题，市面上主流的网站中都会使用懒加载技术，这种技术可以延迟图像的下载，而不是同时加载所有图片资源。懒加载这种技术 专注于首先下载用户现阶段屏幕中可见的那些图像，这种方法能确保网站页面加载的速度更快，为访客提供更快的网页体验感。 wp rock 的内置了懒加载功能的开关，我们只需要在这里启用这个懒加载功能即可。我们还可以启用嵌入式内容的延迟加载， 像是有管视频的框架替换成预览图像那样子显示。如果想排除掉某些图像或者 iphone， 可以在下方填入名称即可。我们还可以启用自动添加图像缺失尺寸这项功能，因为它有助于网页的观看体验。 设置完毕后再次点击保存，接下来我们切换到预加载选项卡，在默认情况下，这个预加载功能是自动启用的，会自动预先加载好网站主页的缓存。我们也可以填入不想要预加载的 url 路径，这里是预加载链接，可以预先加载用户鼠标悬停的链接，提高新页面的加载速 度。这个预期 dns 请求选项，他允许在加载页面时提前解析该页面域名的 dns， 减少与域名解析相关的延迟时间，从而加快页面加载速度。 我们还可以预加在网站的字体，只需要在下面框内填入要预先加在的字体的 url 路径即可，设置好后记得再次保存。以上就是 wp rocket 懒加在害预加在的功能介绍， 如果你还有任何问题，我将非常乐意为你解答。感谢您的观看，我们下期再见。
114潮趣科技本
01:20查看AI文稿AI文稿说下图片揽加载的原理。图片揽加载是一种技术，它可以延迟图片的加载，直到用户将其滚动到视图中。 这种技术可以提高页面加载速度，并降低数据使用量。图片栏加载的原理是基于浏览器的滚动事件。当用户滚动页面时， javasprep 代码会检查哪些图片在视图中， 然后只加载这些图片。通常是将图片的 src 属性设置为一个站位符，例如一个空白的 gif 图像，然后使用 driver script 先将其替换为实际的图像 url。 具体来说，图片揽加载通常涉及以下步骤一、将所有要延迟加载的图片 i、 s、 r、 c 属性设置为站位符，例如空白的 g、 i、 i 图像或者 一些低分辨率的图片。二、使用 driver script 监听页面的滚动事件。三、当用户滚动页面时，检查哪些图片已经进入了视图范围。四、将这些图片的 s、 r、 c 属性设置为实际的图像 url。 五、加载这些图片。这种技术可以减少页面的加载时间，并提高用户的体验，特别是在移动设备上，因为它可以减少数据使用量和页面加载时间。
22前端sir
11:44查看AI文稿AI文稿好，那么接下来的话，我们来看一下京东的一个效果啊，哎，当我们把这个滚动条往下滚的时候， 大家可以看到一开始的时候，这个图片呢是处于一个未加载的状态，当我们图片滚动到可视区域范围之后，这个图片呢才会进行加载， 那么这一种效果呢，称之为叫做我们的图片揽加载。那么今天的话，我们就来看一下这一个图片揽加载的效果，我们应该如何去实现它， 如果要实现这个功能，哎，我们的具体的思路是什么呢？如果要实现图片揽加载，它最核心的是不是有一个我们的可视区域， 有一个我们需要加载的图片，当这个图片即将到达我们的可社区，一旦他干嘛发生交叉的时候，一旦发生交叉进入到我们 可视区的时候，就意味着咱们是不是要加载这一个图片了。所以呢，要实现这一个功能，核心关键点就在于我们要在什么样的时机的时候去加载这个图片，并且我们刚刚已经说过了，就是要在 与我们的可视区交叉的时候再去加载咱们的图片，而这个功能如果要实现，就会用到一个语法，就叫做我们的 interception of the。 好，那下面我们来看一下代码咱们应该怎么去写？好，那我们切到代码，首先的话，我们这边已经准备好了一些基本的结构，可以看到 list 里面有 item， item 里面有隐秘剧，所有的隐秘剧呢都设置了一张默认的图片地址，而这个默认的图片地址呢？哎，他就可以去展示出这么一个灰白的效果，这是默认的一个效果， 当我们如果要去加载真正的图片的时候呢，其实会发现真正的图片它藏在这里，藏在一个叫 datagosrc 的属性里面，默认情况下所有的图片都不会去加载后面的真实的图片， 只有当我们这个图片进入到可视区了才去加载它，那么现在关键点就在于我们应该如何去监视图片这里呢？如果要监视图片进入可视区，就得用到一个语法 啊，就叫做我们的 interception observer， 我们首先需要创建一个 observe 对象啊，我们创建一个 observer 观察者 好，然后代码怎么去写呢？这么写的，然后在这个 interception observer 里面需要传入一个回调，那么在这个回调哎里面我们就可以去写 conso， 这个 conso 会在什么时候执行呢？注意这 这个 ctrl 会在我们交叉改变的时候执行。什么叫做交叉改变呢？就是我们这一个图片，它从原来的不在我们的可时区的范围，当它接近到可时区，直到进入到可时区的时候，就从原来的 未交叉变成了什么呢？交叉，那这个时候可以理解为我们这一个函数呢就会被触发，并且呢除了这一个回调之外，后面还会有对应的三个参数，哪三个参数呢？ 就由我们的 root rotamagin 以及 three show 的，那么这三个参数分别是什么意思啊？咱们逐一给大家解释一下。第一个 root 默认情况下就是我们的适口， 那么这个他配置的是什么呢？配置的是我们观察的元素和谁进行交叉，那如果说我们这边配置的是 no， 就代 表的是他跟四口在进行交叉，那如果说我们配置的是复元素祖辈元素，则代表的是他是跟他的复元素祖辈元素来进行交叉。那么第二个参数呢？叫做 root margin， 这个 rot margin 呢，指的是什么意思呢？ 哎，他会根据我们当前所配置的这一个大小啊，向外扩展多少，这什么意思呢？就如果我们配置的是复元素啊，或者说我们配置的是视窗， 那么将来的话，我们就如果图片要判断它是否交叉的时候干嘛呢？当它贴近它的时候，正常情况下，哎，在这个位置的时候就算是交叉了， 但如果我们希望什么呢？如果我们希望他所交叉的范围能够向外扩展，什么意思？我们希望这个适口的范围啊，能够往外扩展。你这个图片呢，当他 抵达到这个视窗这个位置的时候，就算是交叉了，那这个时候我们就可以通过 root magi 来进行配置，它可以让我们这一个交叉的范围呢扩大。比如说我们配置成十像素，也就意味着他会往外扩大十像素， 那默认警官是零。那么第三个参数呢，叫做 three show 的，这个 three show 的指的是交叉比例，如果是零的话呢，就代表着没有交叉， 一的话呢，就代表着完全交叉之后再去触发我们的函数，什么意思呢啊？就是如果我们配置成零，默认情况下呢，就这一个可视区的图片，一旦 当他刚触及刚交叉的时候，就立刻会触发我们上面的回调。那如果配置成一呢，则代表着我们必须整张图片完完全全的全 都在我们的可视区里面，他才会进行执行我们的回调，才算是交叉。所以当前我们这一个需求呢，其实第一个是口，以及我们第二个 returmage 呢，都可以去按照默认值来进行配置，所以上面两个其实可以不用配。 ok， 第三个的话呢，直接按照我们的零表示，他一进行交叉，哪怕是一个边边进行交叉了，他也需要直行我们上面的回调啊，所以核心代码只要写我们第三行就可以了。好，那这样的话呢，我们相当于是添加好了这么一个观察者， 那添加完观察纸之后呢，那到底观察的是哪些图片呢？哎，这个时候我们还需要获取到所有的图片来进行观察。好，怎么玩呢？我们先获取到所有图片啊， cons 的 images 等于 document press like or 找到所有的图片。这里呢，我们可以通过隐秘曲当中的 deta 杠 s r c 属性更加精准地找到我们需要获取的图片。然后再往下面呢，就是对图片进行观察， 而且呢，这边是要对所有的图片都要进行观察，那怎么办呢？所以我们需要便利这一个图片啊，我们可以对当前的这一个 init 图片呢进行一个 foolish， 在 fore 当中呢，用我们刚才所创建的 observer 对象对每一个图片呢来进行观察。那么这里面啊，一旦我们调用了这个 observer 的方法，就代表他已经干嘛呢？开始观察了。 好，此时我们可以打开浏览器运行看一下。好，虽然看起来现在好像没有什么效果，但是我们打开一下 控制台，那么在控制台当中我们可以看到这里回调函数在交叉改变的时候运行，是不是已经执行了这么一次了？我们这一个效果只有第一张图片进入到了可视区，所以呢相当于就只触发了一次， 而后续的如果要出发，你得往下滚，当第二张图片进入到可视区的时候，你看他才会触发第二次，再往下才会触发第三次，第四次，所以呢，他只有进入到我们可视区，满足我们这一个情况的时候，才会执行上面的回调， 而且所有的元素啊，都会被我们这边的一个参数所收集到，我们在这边呢可以去有一个参数叫做 entrance， 这个 entrance 呢可以拿到所有元素交叉所得到的一个结果，也就意味着这一个 entrance 里面它并不是只打印一个元素的结， 是所有元素的结果啊，我们可以打印一下，一旦打印好了之后，打开我们的浏览器，可以看到这边有数组里面包含六个元素， 那为啥是六个呢？因为我们现在监视了几个元素，这六个元素每一个元素它都有，它对应的一个什么呢？矮状态。这个时候我们可以点开看一下啊，我们就从第一个开始看吧， 刷新第一个呢，应该是进入到我们的交叉范围啊，他已经交叉了，所以呢，当我们点开第一个的时候一看，哎，这里面会有一个属性叫做 is intersecting， 可以看到是 two， 确什么意思哎，交叉了。而我们如果说点到第二个图片，第二个图片有没有交叉呢？没有，所以当我们点到第二个的时候，可以看到第二个 intercepting 干嘛呢？是我们的 force， 而当我们点开到第三 三个也是同样的 force， 那这个时候我们就明确了，当它进入到可视区， intercepting 就会变成 two， 当它如果没在我们的可视区范围，则还是我们的 force， 那大致明确了他什么时候进入到我们的可视区。那这里的代码啊，我们就可以去写了，我们可以对这边的 entrance 呢来进行判断。 four of 这里一旦便利之后，就拿到了每一个我们当前的安全对象，一旦拿到了安全对象，我们就去判断谁呢？哎，就去判断当前的 is interesting。 如果当前的 entry 点 is intercepting 为 two， 则代表着什么？哎，则代表着它交叉了。那么在交叉的同时呢，这个 n 圈里面除了 intercepting 之外，还有一个关键的属性， 就叫做我们的 entry 点 target， 这个呢就指的是交叉的目标元素，这个时候我们比如说交叉的是第一个元素，那么 entry 点 target 就是第一个元素，加上的是第二个元素，他拿到的就是第二个的元素。 这里我们应该是将这一个元素呢，比如说先存起来啊，这里得到的就是那一张图片， 我们可以将当前这一个图片的 data s r c， 也就是存储真实地址的这一个属性，把里面的属性值渠道复制给谁呢？复制给我们上面的 s r c， 所以我们应该这么写， image 点 s r c 就等于 image 点 data set 点 s r c 就可以了。那么这样的话呢，就完成了我们这边 图片揽夹子的功能，此时我们注意看来当我们打开到页面当中的时候，可以看到刷新，我一刷新一进页面，我们就看这个 network， 在 network 当中啊，然后我们看这里的图片， 图片可以看到现在默认情况下只加载了一个默认图片和第一张图片，后面的二三四五都没有去加载，而当我们往下滑动，哎，当我们进入到第二个的时候，才会去加载第二张图，第三个的时候才会加载第三张，第四张， 第五张。哎，我们的图片栏加载是不相当于就已经实现了啊，但千万注意了，在这边最后还有一个小的步骤，如果说我们要完成当前的这一个 g s 之后，我们已经成功的将真实的地址是不是已经 复制给了前面的 s r c 了，那么也就意味着复制完了之后，这一个图片它已经懒加载完了，就没有必要再继续对它进行监视了。 所以呢，从性能考虑上来说，最后我们还要做一个小的优化，就是一旦加载成功了，咱们干嘛？哎，就不再需要观察了，哎。 o b 点 on of， 如果我们要取消对于某个元素的观察，则直接调用一下 on of 就可以了。 那么这次我们通过一个 api new interseption observer， 然后呢创建了一个观察者，并且呢便利图片对每一个图片进行观察， 当我们的图片进入到可视区的时候，将图片的 s r c 啊，准确的说是将图片的 data s r c 来进行复制，就完成了咱们这边的一个图片揽加载的效果。
356令人脱发的代码
01:33查看AI文稿AI文稿如果你恰当的运用这些技巧呢，一定可以大幅度的提高网站的性能，让用户体验更佳。网站速度啊，是用户体验的重要指标之一，优化网站性能呢，可以直接影响用户停留的时间与转化率，这对很多网站来说很重要。 今天呢，我将与你分享一些前端的性能优化的技巧，将网站的速度呢提高一些，让用户浏览体验更加。第一个技巧就是优化页面加载，我们可以以轻量级的框架按需加载、图片揽加载等手段提高手屏的加载速度。比如啊， 用轻量级的框架的 vivo 代替啊 jk， 可以减少框架体积。使用爱心加载或者代码分割手段，精简打包文件，使用图片的懒加载，或者是推迟加载非手屏图片。第二个技巧是网站缓存，我们可以设置强缓存和协商缓存来加速页面的加载。强缓存呢，可以直接使用本地的缓存资源。协商缓存呢，是与服务器验证资源有没有更 没有更新，直接使用本地资源。此外呢，咱们还可以使用 cdn 提高缓存的命中率。第三个技巧啊，是资源的压缩，我们可以使用 gjip 对文本文件进行压缩传输，对应 css、 gs 等进行混淆处理，以及啊优化图片大小，这可以减少网络传输的数据量，加快资源的加载。第四个技巧呢，是啊， 浏览器的渲染优化了，我们可以使用 ssr 服务器端渲染，在首屏加载时呢，直接输出 html 的字符串，避免重复的阿贾克斯， 可以使用虚拟盗墓与 state 的数据啊状态管理，避免不必要的盗墓操作，删除一些无用的 c s s 规则等，这也可以加速浏览器啊渲染与啊重绘。如果啊你恰当的运用这些技巧呢，一定可以大幅度的提高网站的性能，让用户体验更佳。 nice！
39尚学堂李呵呵
01:28查看AI文稿AI文稿首屏加载空白的解决方案首屏加载空白的问题可能由多种原因引起，例如网络延迟、代码执行时间过长、资源加载时间过长等，以下是一些解决方案，一、使用义部组件， 将组件按需加载，减少手屏加载的压力，提高加载速度。二、代码优化对代码进行优化，减少无用代码，减少代码体积，提高代码执行效率。三、使用缓存， 将常用的资源进行缓存，减少资源的加载时间。四、资源，欲加载，提前加载可能用到的资源，加快加载速度。五、服务端渲染 yes s r， 将页面的初始也以 t m l 的服务端生成并返回给客户 端，减少客户端加载时间。六、使用股价屏 skeleton screen 在手屏加载过程中，使用股价屏填充页面内容，让用户感受到页面，在加载中提高用户体验。七、图片栏加载， 对于图片资源，使用图片栏加载技术，先加载页面可见区域内的图片，当用户滚动页面时，再加载其他图片， 减少手屏加载时间。综上所述，手屏加载空白的问题可以从多个方面进行解决，需要根据具体情况进行分析和优化。
20前端sir
02:08查看AI文稿AI文稿本文讲解 css 三动画原理。图片揽加在策略及其对用户体验的影响。 css 三动画是前端开发中提升用户体验的重要手段，它通过利用 css 三的 transition 和 animation 属性，实现了页面元素平滑流畅的视觉效果， 无需依赖 drop script 这种无刷新的动画不仅提高了页面的交互性，还能节省服务器资源，提升页面加载速度。然而，过度或频繁的动画可能会对性能造成负面影响，因此设计师需要合理运用平衡、美观与效率。 另一方面，图片揽加载技术则是针对网页中大量图片资源的一种优化策略。当用户滚动到图片所在的可视区域时，图片才会开始加载，而非 一开始就一次性全部加载出来，这显著减少了初始页面加载时间。尤其是在移动端，用户往往首先关注的是主要内容而非背景。图片揽加载技术配合现代浏览器的 intersection of server api， 可以实现智能高效的图片加载， 进一步提升了用户体验。然而，图片揽加载并非一劳永逸的解决方案，他可能影响到图片的预览效果和搜索优化。 搜索引擎如 google 的 lighthouse 就指出，如果图片没有 out 标签或者没有在适当位置进行预加载，可能会影响 su 排名。 因此，开发者在实施揽加载时需确保关键信息的可见性和 su 友好。总的来说， c s s 三动画和图片揽加载技术都是前端性能优化的重要工具，他们能够提升页面的响应速度和视觉体验，但使用时需要根据具体场景进行权衡和调整，以达到最佳的性能表现。同时，随着新的技术和标准的出现， 如 web web、 subbly 等前端优化的手段将更加丰富，我们需要持续学习和探索，以适应不断变化的前端环境。
1鹭羽无暇
05:16查看AI文稿AI文稿好了，咱们来看一下啊，在咱们路由模块里面呢，他给我们又提供了一个新的功能，叫路由揽加载，为什么要提供这样一个功能呢？简单说一下 维优项，维优 e 项目呢，打包之后，打包之后呢，他会出现一个问题，什么样的问题呢？传统的路由导入方式，路由导入组建的方式 会在什么呢？用户打开首页的时候，将所有的组件，所有的路由组件一次性加载到什么呢？加载到我们应用中， 影响了我们首页打开的什么呢？效率，这里的效率呢包含什么？这里的效率包括打开的速度和 消耗的资源等等等等。 ok， 然后在操作的过程中呢，有些用户他打开首页呢，仅仅是看一下首页，其他页面呢是不需要去看的， 但是呢，你现在呢？这种导入方式，大家来看，现在的导入方式是不是这种导入形式呀？这种导入形式他会怎么样呢？他会在操作的过程中，一次性将所有的数据全部都引入进来， 放在肉特斯等于好，就是传统的这种操作方式会存在这样的问题，一定要注意，是打包以后啊， ok， 所以呢， vo e 呢，它提供了一种揽加载的机制，就是 view rotar， 它提供了什么呢？一种组建揽加载的倒入方式， 哎，让打包后的项目用户在访问时，用户在访问的情况下按需加载，也就是说访问到哪个组件，再加载对应的组件， 而不是什么呢，而不是一次性全部加载，这样能理解了，那这种操作方式如何实现呢？其实，其实，其实这东西就是一个什么，就是一个语法上的不一样，好吧，其他的东西都一模一样，咱们把这个呢注视掉， 注视掉之后呢，肯定爆错了，那我们如何引入呢？看一下啊？ cose lv， 等于啊，看好了， 引炮塔，用箭头函数后面加上引炮塔点点斜杠，然后呢 高冷刺下面的 lv， 这就相当于引入了一个，然后第二个呢就是我们什么呢？叫固增 lv 是吧？ 好，这导航呢也引入了，再往下面呢就是我们的一级，什么呢？一级路由组建， 引炮塔，点点斜杠配置下面的 pome 啊，一起路由组建呢，应该是有四个，第二个呢是我们的 goose， 第三个呢是手发痒，然后第四个呢是很 kat， 好，把这四个呢引入一下， 好，再往下面呢还有我们的二级路有组，二级路有组件，呃，二级路有组件，里面呢 用我们的麦， 然后是拧泡他 点点斜杠配置下面的 good， 下面的慢，这是一个页面，两个页面，三个页面，四个页面，然后慢，下面呢是 market， 然后呢是三 ken 字，再往下面呢就是我们的 odore orders， 好，大概呢按照这样的方式引入，还有一些什么呢？雷 out， 然后 rejected， log in， 没有引入， 把这几个呢给他再加进来，然后一个是脑根，一个是瑞 gesture， 一个是 lay out。 好， lay out， register， log in。 好，这些页面组建了，全部都引入进来，引入进来之后呢，等待它编辑编议通过之后呢，我们再来看一下页面的一个访问是不是正常好登录，然后呢注册 再往进来了首页，首页里面进入商品，我们就会进入什么呢？二级，二级路由返回首页，然后呢用户联系我们这些是不是都正常呀？好，这样呢，就没有问题了啊，就是以后呢，我们在引入数据的时候，就可以按照这样的方式进行数据的一个引入操作。 最后呢给大家简单说一下为了什么呢？让我们的这些引入的数据看上去可图性更好一点，通常情况会把他们对 旗袍做好吧。好，然后把这些代码拷贝过来，这应该是今天大家看到的代码里面最简单的一个代码了吧， 是吧？好，录音览加载就说完了啊。
52大牧
05:34查看AI文稿AI文稿各位小伙伴们，我是悟空，今天我们来讲解一下路由揽加载的使用和原理，这个在我们的工作当中和面试的时候经常会问，我们在写项目的时候经常会用， 很多小伙伴们都会去使用这个路由懒加载，但是不太理解它的原理，为什么要使用这个路由懒加载，这个路由懒加载它有什么好处？ 第一个为什么要使用我们的录音奶加载呢？因为我们这个六他是单页面应用，当我们用户第一次加载我们的内容的时候，比如我们第一次加载我们的首页，用户第一次展示我们首页的时候， 但是我们这个项目里面有几个页面，比如我这个项目有额报册两个页面，但是用户第一 是加载的时候显示的是首页，但是我们这个六单页面应用，他会把我们的六和报呃报册两个页面都加载出来了，这样会干个什么事情呢？会让我们的项目体积变大， 项目体积变大，这样会让我们这一个项目首次加载的速度干个什么事情呢？速度减缓，这个时候我们就要使用路由揽加载，如果你不使用路由揽加载，你会发现我们来进行打包的时候，你会看到 拿着我们来打包一下，打包的时候他会让我们的所有的模块干个什么事情，变成一个文件，所有的资源都是通过一个文件来进行加载的，来看到我们这个 dist， 在这里会 发现只有一个 g s 的文件和一个 c s 文件，将我们的什么将我们的 a bot 页面和 home 页面两个刚刚什么事情加载在一起呢？我们的漏油文件写的什么？没有使用我们的漏油懒加载，翻过来看，直接使用我们的引入的方式 在这个地方干，为什么会出现这种情况呢？因为在我们的 wait 或 y pad 当中干个什么事情， 一个 import 其实就会发送一个网络请求，这个会在我后面的深入了解我们的位册的， 类似的解析课里面会讲啊。那么现在我们来干个什么？把它变成来看一下，现在我们把之前这种直接引用的方式，把它变成什么东西呢？变成我们的路由揽加载，因为我这里简写来看，路由揽加载的方式写成 都用冷教的方式把它移下来下，移下来的时候直接写成什么？写成一个处理函数。那么为什么这里要写成处理函数呢？等一下会讲解。现在我们继续再来运行一下， 运行完之后来到我们的项目再来刷新，再来看看，你会发现干个什么事情？用户第一次进到的是我们的首页啊，我的首页是斜杠的地址，那么我这里干个什么事情呢？我刷新一下， 刷新一下之后你会发现，哎，我这个地方没有保存啊，没有保存，没有保存之后我们再来刷新一下。 刷线之后，用户你看一下我们这里还有啊爆头页面吗？没有啊爆头页面只有，当我们的漏油地址发生改变的时候，啊爆头 abobot 根据路径匹配主题，匹配到啊爆头页面，再会给我们发送我们的啊爆头页面的 请求。拿到呃 bot 页面的组件，再来看一下我们这个地方，那么这个地方就是我们的漏油满加载， 那么路由揽家者的本质什么？其实就是按需引入，他结合了 e s 六的 import， 这个 import 干个什么事情呢？就是我们的模块化，他可以干个什么事情呢？引入的时候根据我们的请求按需引入。哈，那么这个时候我们要写成一个方法，结合我们的路由。 路由乃加载，它的本质其实就是干个什么事？按需引入 e s 六的 import， 再结合我们的路由表， 结合路表。当我们的漏油干了什么？当我们的漏油地址发生改变的时候，你看我们这个漏油地址发生改变，他会根据路径匹配 组件看，显示对面的组件，这个时候会走到我们的 new e rotor 里面的路由表，根据我们这里的这个路由地址。哎，这里的路由地址 aboves 啊，爆炒，干个什么事情呢？去到路由表里面进行匹配，匹配到之后干个什么？找到我们的这一个组件，找到完之后干个什么事情呢？在执行这个方法，这个方法一执行的时候会得到谁 得到这个 import？ 引入我们的 yes new 里面的引入什么呢？引入我们这一个 组建啊，引入的组建也就是我们的按需引入组建，这样的话，刚刚什么是在发送我们的网络请求？刚刚这里是看啊 bot， 这里是不是发送网络请求？你看，再切到我们的斜杠页面，切到我们的 home 页面，回去，这里是不是拿到我们的 home 页面的请求， 再根据我们的地址匹配到对应的组件，这样会减少我们的项目体积。这个就是我们的什么东西呢？就是我们的路由揽家产，路由揽家产的本质其实就是什么？就是我们的按需引入啊。 input 结合路由表，根据路径匹配组件查找到我们的对应的那个组件，再找到 combat 执行这个方法。执行方法了之后，根据这个 input 发送网络请求，展示出对应的组件内容。
358悟空说AI，前端
02:28查看AI文稿AI文稿哈喽，小伙伴们大家好，又到了每天要分享一道面试题的时间了，我们来看一下今天这道面试题。问图片栏加载的原理。 相信大家在平常的开发中都有用到过图片揽家宅，但是你真的有去了解过揽家宅背后的原理吗？ ok， 我们来看一下 懒家仔呢。顾名思义就是在当前的网页中滑动页面到能看到图片的时候再加载图片。然后这个问题呢，可以拆分成两个。第一个呢是我们如何判断图片出现在了当前事口，也就当前的窗口下。 这个呢，我们可以通过这个图片呢，所在这个网页中的一个位置，加上当前的一个滚动的一个窗口，滚 动到了一个位置，发现这个滚动的位置呢，是不是在图片嗯，我们计算的图片的位置的这个地方，如果是呢，我们就可以判断出图片出现在了当前的一个适口。 第二个呢，是我们如何控制一个图片的加载，然后在图片嗯不再显示位置的时候，我们可以呢给图片设置一个站位图，然后当图片进入了我们的一个可视区域，这里是可 当图片进入了一个可视区域的时候呢，我们可以去后台那请求图片的资源，然后复制给你妹子的 src 属性。然后这个时候呢，真正的图片啊，复制一个真正的图片的 地址即可。这样呢就可以保证在一个用户呢不需要浏览玩当前嗯当前这个页面的所有图片的时候。这种情况下，然后我们可以减少一个服务器的压力，然后尽快的来做一些嗯，有效的加载。 ok， 这就是今天为大家分享的图片揽家的原理。如果你对这条视频内容有疑问的话，可以在视频的下方进行留言。如果你觉得这条视频对你有帮助的话，希望你能够点赞支持一下。感谢你的支持，我们下期再见，拜拜！
20敲代码的超级奶爸
