前端面试题之预加载，懒加载

最新推荐文章于 2025-10-24 14:07:13 发布
原创 最新推荐文章于 2025-10-24 14:07:13 发布 · 411 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#面试 #前端

本文对比分析了前端开发中预加载与懒加载两种技术的区别及其应用场景。预加载将资源提前加载到缓存中以提升后续页面加载速度；懒加载则是按需加载页面元素，优先展示关键内容以改善用户体验。

前端面试的时候我们可以用预加载来进行优化，主要优化客户的体验以及浏览器运行的性能，如果使用预加载的话则会加载到缓存里面，当用户打开某一页面的时候，直接调用缓存中已经加载成功的代码即可，大大增加了浏览器的运行性能，更好的优化了用户的体验。

而懒加载是加载部分特定模块的，同样是优化用户体验以及浏览器的性能，懒加载是优先加载出指定的某一页面，通过这样来实现性能的优化，提高用户的体验，所以两者是不一样的

One___One
关注
前端经典面试题 | 性能优化之 懒加载
CoderHing的博客~
11-14 3172
前端经典面试题 | 性能优化之 懒加载🖥️ 前端经典面试题专栏：性能优化之 懒加载🧑‍💼 个人简介：一个不甘平庸的平凡人🍬🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️👉 你的一键三连是我更新的最大动力❤️。
前端优化中的路由懒加载
田兴的博客
10-15 2381
懒加载： 也叫延迟加载，即在需要的时候进行加载，随用随载。 使用懒加载的原因： vue 是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验 非懒加载的路由配置： import Vue from 'vue' import Router from 'vue-router' import DefaultIndex from '@/components/DefaultIndex' import I
图片懒加载
最新发布
2301_81233478的博客
10-24 682
本文系统讲解了图片懒加载的原理与实现方式，同时分析了懒加载的常见问题，如 SEO 影响、首屏白屏与快速滚动闪烁，并提供了相应优化方案，面试必备！！
【高频考点精讲】前端数据预加载策略：如何让用户感觉页面加载更快
全栈老李的博客
06-22 765
🧑‍🏫：全栈老李📅：2025 年 6 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。作为一个天天和页面加载速度较劲的前端工程师，你一定遇到过这样的场景：用户点开一个链接，页面白屏转圈，数据慢慢悠悠地加载，最后用户不耐烦地关掉了页面。这时候，老板的夺命连环call就来了："为什么我们的页面这么慢？其实，。用户感知的"快"不一定是真正的加载时间短，而是"感觉"快。今天全栈老李就带你玩转前端数据预加载策略，让用户觉得你的页面快到飞起。
前端优化——预加载篇
YooHoeh的博客
05-31 3万+
预加载 1.什么是预加载 资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 2.为什么要用预加载 在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就...
1道面试题---懒加载和预加载
weixin_33819479的博客
05-30 876
什么是懒加载？ 懒加载也就是延迟加载。 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 延迟加载有多种实现，这里只说其中一种，其实原理都差不多的. 为什么要使用懒加载？ 很多页面，内容很丰富，页面很长，图片较多。比如说...
前端面试题之safe相关题集.zip
06-21
以上是“前端面试题之safe相关题集”可能涉及的部分重点知识点，理解并掌握这些内容将有助于开发者在面试中表现出色，同时也能在实际工作中提升项目的安全性。在学习和准备面试时，应结合具体场景进行深入研究和实践...
最新Web前端面试题精选大全及答案
热门推荐
HanXiaoXi_yeal的博客
01-07 19万+
HTML、CSS相关 1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级别 2.请简述css盒子模型 一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的width和height属性只是设置content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 盒子真正
2017前端面试题整理汇总
08-23
- 性能优化：包括代码压缩、懒加载、资源预加载、首屏加载时间等。 - 安全问题：XSS、CSRF攻击的防范，HTTPS的作用，以及如何处理JSONP的安全隐患。 通过"2017年前端面试题整理汇总100题.pdf"这份资料，你可以...
前端面试题之浏览器Browser相关题集.zip
06-21
10. **性能优化**：包括首屏加载时间、懒加载、预加载、预渲染、图片优化、代码分割、异步加载等策略，以及如何使用DevTools进行性能分析和调试。 以上仅是部分核心知识点，面试题集可能会涵盖更多细节，如Web ...
前端懒加载和预加载
hellocoder2029的博客
10-21 779
懒加载和预加载的目的都是为了提高用户的体验，二者行为是相反的，一个是延迟加载，另一个是提前加载。懒加载对缓解服务器压力有一定作用，预加载则会增长服务器前端压力缓存。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OBFZAkCJ-1666343264980)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37ec31743c664c2e98c39eb51962e28f~tplv-k3u1fbpfcp-zoom-in-crop
前端面试题88（JavaScript懒加载）
God's asylum的博客
07-22 426
懒加载（Lazy Loading）是一种网页优化技术，它延迟了资源的加载时间，直到这些资源真正需要时才进行加载。这种技术常用于图片、视频等媒体内容以及一些较大的JavaScript和CSS文件上，目的是减少初始页面加载时间，提升用户体验，同时还能节省服务器带宽和用户流量。
前端面试笔记5：图片懒加载
qq_52287721的博客
12-29 438
图片懒加载 文章目录图片懒加载如何判断图片出现在可视区域如何判断图片加载完毕 图片懒加载的意思就是当图片出现在我们的可视区域中的时候才去进行加载。 如何判断图片出现在可视区域 我们先去获取到所有图片的数组，然后通过遍历去比较每个图片的 offsetTop 属性值和当前窗口值 window.innerHeight 的大小，如果当前的图片的 offsetTop 的属性值小于我们当前的窗口尺寸的话，那么我们就认为当前图片出现在我们此时的页面当中。此时我们就加载图片。 在页面滚动的时候我们同样要进行上述的判断，但是
通过一道面试题来引入Hibernate之懒加载
nwpu_geeker的博客
01-14 2023
前言先来看看面试题： Hibernate中get和load方法的区别？ 答：相同点：都是通过主键查询的方法。session.get(User.class,1);session.load(User.class,1); 不同点： get: 及时加载，只要调用get方法立刻向数据库查询,,执行sql语句。 load:默认使用懒加载，当用到数据的时候才向数据库查询。 相当于做了一层优化。懒加载：(
前端的预加载
LuckXinXin的博客
11-02 849
在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载 预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载 <link rel="preload" href="http://example.com"> 预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好 ...
JavaScript预加载和处理的面试题
一个搞IT的人
08-31 180
1、面试题一如下： &lt;script&gt; var tt = 'aa'; function test(){ alert(tt); var tt = 'dd'; alert(tt); } test(); &lt;/script&gt; 答案： js预加载导致函数内部的tt被覆盖，第一个alert()时tt在其作用域内未定义，弹出unde...
【面试题】图片懒加载
Dai的博客
12-13 1033
图片懒加载的原生js实现方法
web前端面试题附答案014-图片懒加载有什么缺点吗？
xingyu_qie的专栏
10-04 547
很明显啊，问图片懒加载的缺点，面试官最省心，面试者最讨厌的问题就是xxx的缺点说一下，问了你半天问题，你以为答得差不多了，面试官来一句那么xxx的缺点是什么，经常弄得你不要不要的。
前端实现预加载
wang9rui的博客
10-29 688
/* * @Description: 预加载 * @Author: wangrui * @Date: 2021-03-02 13:35:34 */ class PreLoad{ constructor(){ this.images=[] this.opts={ success:null, fail:null } } preLoadFn(images,opts){ this.images=typeof(images)==='strin
前端面试题如何防止首页加载白屏
03-04
<think>嗯，用户现在问的是前端面试题中如何防止首页加载白屏的问题。首先，我得回忆一下之前用户问过关于Vuex的内容，现在转向前端性能优化，这可能是在准备面试，需要综合性的知识。用户可能是正在准备前端开发岗位的面试，需要了解常见的优化手段。 防止首页白屏的关键点应该是在于加快首屏内容的加载和渲染速度。常见的策略包括服务端渲染（SSR）、静态站点生成（SSG）、代码分割、资源优化、预加载等。可能还需要提到缓存策略、骨架屏或者加载动画来提升用户体验。 我需要分步骤来组织答案，结构要清晰。先解释白屏的原因，再给出具体的解决方案。每个方案要有技术名称、原理说明、具体实现方式和适用场景。还要注意使用用户容易理解的语言，避免过于专业的术语，但也要准确。 例如，服务端渲染可以让HTML在服务器生成，直接返回给客户端，减少客户端的渲染时间。代码分割可以通过Webpack的动态导入功能，按需加载资源。资源优化包括压缩图片、使用CDN等。骨架屏可以在内容加载前展示页面结构，减少用户等待的焦虑。 另外，可能需要提到使用PWA的预缓存策略，或者HTTP/2的服务器推送来提前加载关键资源。还有优化JavaScript和CSS的加载顺序，比如异步加载非关键脚本，使用defer或async属性。 需要注意的是，不同的场景可能需要不同的解决方案，比如SSR适合动态内容多的应用，而SSG适合内容相对静态的网站。同时，这些方法可能需要结合使用，效果会更好。 最后，可能还需要强调性能监测工具的使用，比如Lighthouse、Web Vitals等，帮助定位性能瓶颈，持续优化。确保回答覆盖主要方面，并且每个点都有具体的例子或实现方法，这样用户在面试中能够举出实例，展示深入的理解。</think>以下是解决首页加载白屏问题的 **6 个核心方案**，按优先级排序： --- ### 一、服务端渲染（SSR） ```javascript // Nuxt.js 示例（基于 Vue 的 SSR 框架） export default { async asyncData({ params }) { const data = await fetchInitialData() // 服务端获取数据 return { data } } } ``` - **原理**：在服务器生成完整 HTML 直接返回 - **优点**：首屏直出，SEO 友好 - **适用场景**：动态内容较多的中大型应用 --- ### 二、静态站点生成（SSG） ```javascript // Next.js 示例（基于 React 的 SSG） export async function getStaticProps() { const data = await fetchStaticData() return { props: { data } } } ``` - **原理**：构建时预生成静态 HTML - **优点**：加载速度最快，适合内容固定的页面 - **适用场景**：博客、文档类网站 --- ### 三、代码分割 + 懒加载 ```javascript // Vue 动态导入组件 const HomePage = () => import('./Home.vue') // Webpack 魔法注释（预加载关键资源） import(/* webpackPrefetch: true */ './critical.js') ``` - **关键技巧**： 1. 使用 `import()` 语法分割代码 2. 通过 `webpackPrefetch` 预加载关键资源 3. 路由级/组件级懒加载 --- ### 四、资源优化策略 | 优化类型 | 具体方法 | |----------------|--------------------------------------------------------------------------| | 图片优化 | WebP 格式 + `loading="lazy"` + CDN 图片压缩 | | 字体加载 | `font-display: swap` + WOFF2 格式 | | 关键 CSS | 提取首屏所需 CSS 内联到 `<style>` 标签 | | 脚本优化 | 异步加载非关键 JS（`async`/`defer`） | --- ### 五、客户端渲染优化 #### 1. 骨架屏技术 ```html <!-- 数据加载前的占位结构 --> <div class="skeleton"> <div class="skeleton-header"></div> <div class="skeleton-content"></div> </div> ``` - **实现方式**：通过 CSS 动画模拟内容结构 #### 2. 渐进式加载 ```javascript // 优先渲染核心内容 async function loadCore() { await loadMainContent(); requestIdleCallback(() => loadSecondaryContent()); } ``` --- ### 六、缓存与预加载 ```html <!-- DNS 预解析 --> <link rel="dns-prefetch" href="//cdn.example.com"> <!-- 关键资源预加载 --> <link rel="preload" href="main.css" as="style"> <link rel="preload" href="main.js" as="script"> ``` --- ### 性能监测工具 1. **Lighthouse**：全面检测性能指标 2. **Web Vitals**：监控核心用户体验指标（LCP, FID, CLS） 3. **Chrome DevTools Performance**：分析渲染流水线 --- **最佳实践组合**： `SSR/SSG`（首屏快速呈现） + `代码分割`（减少初始负载） + `骨架屏`（提升感知速度） + `预加载关键资源`（优化资源加载顺序）
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值