前端懒加载（前端懒加载插件）

本篇文章给大家谈谈前端懒加载，以及前端懒加载插件对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue-lazyload解决图片懒加载问题
• 2、前端大量数据一次渲染的写法
• 3、2020-05-09 前端图片太多，图片太大怎么优化
• 4、图片懒加载和预加载
• 5、前端性能优化总结(一)-js、css优化

vue-lazyload解决图片懒加载问题

在本次项目中 由于是一个相册展示的项目，相片数据通过月份进行分页，前端通过接口一次返回所有相片的链接，接口上并没有返回相片总数，嗯...加上有点懒 也就没做滚动加载了 然后发现了 vue-lazyload这个插件

本文只是简单记录一下插件用法 和有这个插件的存在 并不是什么高端文章哦~

官方简单事例子

通过这个简单例子就可以实现lazyload

看看请求

可以看出滚动后才开始加载好庆乎后面的图片

看看dom结构可以看出 通过 监听页面展示区域 动态把把v-lazy里面的替换为data-src 替换为src 实现懒加载

嗯 这就很好的差腔解决了 在不用再次分页的情况下请友悉求大量图片请求的问题了

具体参见文档

[img]

前端大量数据一次渲染的写法

您好，前端大量数据一次渲染的写法主要有以下几种：

1. 使用懒加载：懒加载可以有效地减少页面渲染时间，只有当用户滚动到特定位置时，才会加载需要渲染的数据，从而减少页面渲染庆旅时间。

2. 使用分页：分页可以有效地减少页面渲染时间，只有当用户滚动到特定位置时，才会加载需要渲染的数据，从而减少页面渲染时间。

3. 使用缓存：缓存可以有效地减少页面渲染时间，只有当用户滚动到特定位置时，才会加载需要渲染的数据，从而减少页面渲染时间。

4. 使用算法：使用算法可以有效地减少页面渲染指羡时间，只有当用户滚动到特定位置时，才会加载需要渲染誉逗凳的数据，从而减少页面渲染时间。

5. 使用延迟加载：延迟加载可以有效地减少页面渲染时间，只有当用户滚动到特定位置时，才会加载需要渲染的数据，从而减少页面渲染时间。

2020-05-09 前端图片太多，图片太大怎么优化

1、小图多可以用图标，例如阿里巴巴iconfont库伏衡 。

2、使用精灵图。

3、大图可以进行压缩，压缩网站eg: 。

4、图片懒加载，像淘宝或者京东这样的APP页面上有很多图片,当我们滑到下一屏时下一屏的图片才会加载,这就采用了图片懒加缺滚做载的方式.图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片,通过js将img标签的data-src属性赋值备明给src属性。

5、使用webp格式，缺点：浏览器支持度不够

图片懒加载和预加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式 。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中， 当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图渗配片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

资源预加载是另一个性能优化技术，我们可以使用该技芦贺术来预先告知浏览器某些资源可能在将来会被使用到。 预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源 。

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

img src=" 0044449030002.jpg" style="display:none"/

script src="./myPreload.js"/script

PreloadJS提丛哗指供了一种预加载内容的一致方式，以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好。

两者都是提高页面性能有效的办法， 两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力

转：

前端性能优化总结(一)-js、css优化

移动互联网时代，用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏，其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。

从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。

所以输入URL后发生了什么呢？在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。

http缓存优化是网页性能优化的重要一环，这一部分我会在后续笔记中做一个详细总结，所以本文暂不多做详细整理。本文主要从网页渲染过程、网页交互以及Vue应用优化三个角度对性能优化做一个小结。

首先谈谈拿到服务端资源后浏览器渲染的流程：

关键渲染路径是浏览器将 HTML、CSS、JavaScript 转换为在屏幕上呈现的像素内容所经历的一系列步骤。也就是我们刚刚提到的的的浏览器渲染流程。

为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素:

首先，DOM 和 CSSOM 通常是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析。

然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，

所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染。

由此可见，对于 CSSOM 缩小、压缩以及缓存同样重要，我们可以从这方面考虑去优化。

当浏览器遇到 script 标记时，会阻止解析器继续操作，直到 CSSOM 构建完毕，JavaScript 才会运行并继续完成 DOM 构建过程。

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

回流（Reflow）

当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。现代浏览器会对频繁的回流改嫌卜或重绘操作进行优化：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

当你访问以下属性或方法时，浏览器会立刻清空队列:

因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。

避免频繁操作样式，最好一次性重写 style 属者桐性，或者将样式列表定义为 class 并一次性更改 class 属性。

避免频繁操作 DOM，创建一个 documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档核穗中。

也可以先为元素设置 display: none，操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。

避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。注意，图片要指定宽高。

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

事件委托其实就是利用JS事件冒泡机制把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

优点：

例如有一个列表需要绑定点击事件，每一个列表项的点击都需要返回不同的结果。

传统写法：

传统方法会利用for循环遍历列表为每一个列表元素绑定点击事件，当列表中元素数量非常庞大时，需要绑定大量的点击事件，这种方式就会产生性能问题。这种情况下利用事件委托就能很好的解决这个问题。

改用事件委托：

输入搜索时，可以用防抖debounce等优化方式，减少http请求；

这里以滚动条事件举例：防抖函数 onscroll 结束时触发一次，延迟执行

节流函数：只允许一个函数在N秒内执行一次。滚动条调用接口时，可以用节流throttle等优化方式，减少http请求；

下面还是一个简单的滚动条事件节流函数：节流函数 onscroll 时，每隔一段时间触发一次，像水滴一样

参考链接：

关于前端懒加载和前端懒加载插件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。