2024年最全前端实现图片懒加载(1)，2024年最新Web前端电话面试技巧

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

1、html 实现

---

最简单的实现方式是给 img 标签加上 loading=“lazy”，比如

2、js实现原理

---

我们通过js监听页面的滚动也能实现。

使用js实现的原理主要是判断当前图片是否到了可视区域：

• 拿到所有的图片 dom 。

• 遍历每个图片判断当前图片是否到了可视区范围内。

• 如果到了就设置图片的 src 属性。

• 绑定 window 的 scroll 事件，对其进行事件监听。

在页面初始化的时候，图片的src实际上是放在data-src属性上的，当元素处于可视范围内的时候，就把data-src赋值给src属性，完成图片加载。

下面展示一个demo：

先获取所有图片的 dom，通过 document.body.clientHeight 获取可视区高度，再使用 element.getBoundingClientRect() API 直接得到元素相对浏览的 top 值， 遍历每个图片判断当前图片是否到了可视区范围内。代码如下：

function lazyload() {

let viewHeight = document.body.clientHeight //获取可视区高度

let imgs = document.querySelectorAll(‘img[data-src]’)

imgs.forEach((item, index) => {

if (item.dataset.src === ‘’) return

// 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置

let rect = item.getBoundingClientRect()

if (rect.bottom >= 0 && rect.top < viewHeight) {

item.src = item.dataset.src

item.removeAttribute(‘data-src’)

}

})

}

最后给 window 绑定 onscroll 事件

主要就完成了一个图片懒加载的操作了。但是这样存在较大的性能问题，因为 scroll 事件会在很短的时间内触发很多次，严重影响页面性能，为了提高网页性能，我们需要一个节流函数来控制函数的多次触发，在一段时间内（如 200ms）只执行一次回调。

下面实现一个节流函数

function throttle(fn, delay) {

let timer

let prevTime

return function (…args) {

const currTime = Date.now()

const context = this

if (!prevTime) prevTime = currTime

clearTimeout(timer)

if (currTime - prevTime > delay) {

prevTime = currTime

fn.apply(context, args)

clearTimeout(timer)

return

}

timer = setTimeout(function () {

prevTime = Date.now()

timer = null

fn.apply(context, args)

}, delay)

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】