前端优化之---- 懒加载
1、什么是懒加载意思就是:需要用到的时候才去加载这个资源,也就是 延时加载2、为什么要使用懒加载当进去某个页面时(比如淘宝之类的推荐页面),会有许多的图片等等资源,而这时我们不去翻动看下面的数据,也就意味着这个数据浪费了,白加载了,而且降低了网页的加载速度(一个网站如果打开速度太慢,用户体验是极差的)如果使用懒加载,下面的数据等我们往下翻才加载,才不会浪费,这样可以加快页面的加载速度,也可以减
·
1、什么是懒加载
意思就是:需要用到的时候才去加载这个资源,也就是 延时加载
2、为什么要使用懒加载
当进去某个页面时(比如淘宝之类的推荐页面),会有许多的图片等等资源,而这时我们不去翻动看下面的数据,也就意味着这个数据浪费了,白加载了,而且降低了网页的加载速度(一个网站如果打开速度太慢,用户体验是极差的)
如果使用懒加载,下面的数据等我们往下翻才加载,才不会浪费,这样可以加快页面的加载速度,也可以减少服务器的压力,提高前端的性能
3、懒加载的原理
例如图片懒加载:
- 就是先将 图片的src路径,赋给一个html5的自定义属性
data-src
,(图片地址:https://csdnimg.cn/feed/20200514/83d0b19140c9349b9ed95c54d7723457.png) - 图片的src路径给一个加载中的图片路径(loading)
- 等页面显示了那种图片,再将 图片的
data-src
赋给图片的src路径
代码我就不演示了,因为大部分都是使用插件的
4、懒加载的相应插件
4.1、jQuery — jquery.lazyload.js
可以查看这篇博客:jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
4.2、Vue
可以查阅这篇博客:vue中的懒加载和按需加载
- 路由懒加载
① 安装 @babel/plugin-syntax-dynamic-import 包。
② 在 babel.config.js 配置文件中声明该插件。
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
"@babel/plugin-syntax-dynamic-import" // 这路声明
]
③ 将路由改为按需加载的形式,示例代码如下:
// 路由懒加载
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ 'views/login/Login')
更多推荐
已为社区贡献1条内容
所有评论(0)