首页 > 其他分享 >前端面试题(十)

前端面试题(十)

时间:2024-09-27 09:54:50浏览次数:10  
标签:面试题 HTTP DOM 前端 减少 使用 CSS 加载

51. 前端性能优化

在前端开发中,性能优化是面试中的一个常见话题。面试官通常会希望候选人具备识别性能瓶颈并提出相应解决方案的能力。以下是一些常见的前端性能优化面试题及其答案。

1. 前端性能优化有哪些常见手段?

前端性能优化的手段可以从多个维度考虑,主要包括:

  1. 减少 HTTP 请求

    • 合并 CSS、JavaScript 文件,使用雪碧图(sprite images),减少页面加载时的请求数量。
    • 使用 HTTP/2 以实现多路复用,提高请求效率。
  2. 资源压缩与优化

    • 使用工具压缩 HTML、CSS、JavaScript 文件,例如使用 UglifyJS 压缩 JavaScript,使用 CSSNano 压缩 CSS。
    • 对图片进行无损压缩,使用现代格式如 WebP。
    • 延迟加载非关键资源,例如延迟加载图片(Lazy Load)。
  3. 使用缓存

    • 合理配置缓存策略,使用 Cache-ControlExpires 头。
    • 使用 Service Worker 来实现离线缓存和资源预取。
  4. 异步加载资源

    • 使用 asyncdefer 来异步加载 JavaScript 文件,防止阻塞页面的渲染。
    • 将 CSS 文件放在 <head> 中,确保尽早加载,JavaScript 文件放在 <body> 底部,避免阻塞 HTML 渲染。
  5. DOM 操作优化

    • 减少 DOM 操作,批量更新 DOM,避免频繁触发回流和重绘。
    • 使用文档片段(Document Fragment)或虚拟 DOM 来减少操作真实 DOM 的次数。
  6. 提高首屏加载速度

    • 通过服务器端渲染(SSR)加快首屏渲染时间。
    • 使用懒加载和按需加载技术,只加载用户可视区域的资源。
  7. CDN 加速

    • 使用内容分发网络(CDN)加快静态资源的分发,减少服务器压力,缩短资源传输的物理距离。
2. 什么是回流 (Reflow) 和重绘 (Repaint)?如何避免?
  • 回流 (Reflow):当页面的布局、大小、位置或几何属性发生变化时,浏览器需要重新计算元素的布局。回流是一个非常耗时的过程,尤其当涉及到大量元素时,性能会显著下降。
  • 重绘 (Repaint):当页面元素的外观(如颜色、边框等)发生变化时,浏览器会重新绘制这些元素,但不影响布局,这个过程比回流更轻量。

避免回流和重绘的方法

  • 合理使用 CSS:避免频繁操作影响布局的属性,如 widthheightpaddingborder 等。
  • 减少 DOM 的操作:尽量批量更新 DOM,使用文档片段或一次性修改多个属性。
  • 使用 visibility: hidden 代替 display: nonedisplay: none 会触发回流,而 visibility 只会触发重绘。
  • 避免频繁读取导致回流的属性,如 offsetTopoffsetHeight 等。可以将这些值缓存起来,减少读取次数。
3. 如何提升网站的首屏加载速度?
  1. 压缩与合并资源

    • 对 HTML、CSS、JavaScript 进行压缩,减少文件体积。
    • 合并多个 CSS、JavaScript 文件,减少 HTTP 请求。
  2. CDN 加速

    • 使用 CDN 将静态资源部署到离用户最近的节点,减少资源的下载时间。
  3. 懒加载与按需加载

    • 对非首屏的图片、视频、脚本等资源进行懒加载,只在用户需要时加载这些资源。
  4. 预加载关键资源

    • 使用 <link rel="preload"> 提前加载关键资源,如字体、样式表和重要的脚本,确保它们尽快生效。
  5. 服务端渲染 (SSR)

    • 使用服务端渲染将页面 HTML 预生成,减少浏览器解析时间,加快首屏展示速度。
  6. Critical CSS

    • 把关键的 CSS 样式内联到 HTML 中,减少渲染阻塞,同时推迟加载其他非关键的 CSS 文件。
  7. 减少第三方库和插件

    • 尽量减少使用庞大的第三方库和插件,例如可以选择体积更小的库代替 jQuery 或者 Lodash,避免引入不必要的功能。
4. 什么是 Webpack?如何使用 Webpack 优化前端性能?

Webpack 是一个模块打包工具,它可以将项目中的各种资源(JavaScript、CSS、图片等)视作模块,并打包成可供浏览器运行的静态文件。

使用 Webpack 进行前端性能优化的方式有:

  1. 代码拆分 (Code Splitting)

    • Webpack 提供了代码拆分功能,可以将应用程序分割成多个较小的包,按需加载不同部分的代码,从而减少初始包的大小,提升页面加载速度。
    • 例如通过 import() 实现动态导入:
      import('./module').then(module => {
        // 模块加载完成后执行
      });
      
  2. Tree Shaking

    • Webpack 的 Tree Shaking 能够在打包时移除未使用的代码,这对于优化大型项目的包大小非常有效。确保使用 ES6 的模块系统 (import/export) 来支持 Tree Shaking。
  3. 文件压缩

    • 使用 Webpack 的 TerserPlugin 对 JavaScript 进行压缩,减少文件体积。
    • 对 CSS 使用 css-minimizer-webpack-plugin 进行压缩。
  4. 图片优化

    • 使用 Webpack 的 image-webpack-loader 插件自动压缩图片,生成适合网络传输的小体积图片。
  5. 缓存策略

    • Webpack 生成带有内容哈希的文件名,保证每次代码更新时文件名会变动,确保浏览器能够获取最新版本的资源。同时未变动的文件则可以通过缓存策略长期缓存,减少不必要的网络请求。
5. 为什么说 HTTP/2 有助于前端性能提升?

HTTP/2 相较于 HTTP/1.1 有多项改进,有助于提升前端性能:

  1. 多路复用 (Multiplexing):HTTP/2 允许在同一个 TCP 连接上并行处理多个请求和响应,解决了 HTTP/1.1 中的队头阻塞问题,大大提高了传输效率。
  2. 头部压缩 (Header Compression):HTTP/2 使用 HPACK 算法对请求和响应的头部进行压缩,减少了数据传输的体积,尤其对那些拥有大量重复头部信息的请求非常有效。
  3. 服务器推送 (Server Push):服务器可以在客户端请求前主动发送资源,减少客户端请求的等待时间。比如在用户请求一个 HTML 页面时,服务器可以提前推送该页面需要的 CSS 和 JavaScript 资源。
  4. 优先级控制 (Stream Prioritization):HTTP/2 允许客户端为请求分配优先级,服务器可以根据优先级安排资源的传输顺序,确保关键资源优先加载。
6. 如何通过减少 DOM 操作来优化性能?

频繁的 DOM 操作会触发回流和重绘,影响页面的性能。以下是减少 DOM 操作的几种常见方式:

  1. 使用虚拟 DOM:像 React 和 Vue 等框架使用虚拟 DOM,可以减少直接操作真实 DOM 的次数,提高渲染性能。
  2. 批量操作 DOM:将多次操作合并成一次,例如使用文档片段(Document Fragment)进行批量操作,然后一次性插入 DOM。
  3. 缓存 DOM 元素:避免多次查询相同的 DOM 元素,可以将查询结果缓存起来,减少重复的 DOM 查询操作。
  4. 减少频繁修改样式:一次性修改元素的多个样式属性,而不是每次操作都触发重绘。
  5. 避免读取会触发回流的属性:避免频繁读取 offsetTopoffsetHeight 等会触发回流的属性,可以通过将这些值缓存起来减少读取次数。

标签:面试题,HTTP,DOM,前端,减少,使用,CSS,加载
From: https://blog.csdn.net/qq_62512874/article/details/142586285

相关文章

  • 495. 响应式潮流小游戏网页 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有各行各业的Web前端网页制作的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • PasteForm最佳CRUD实践,实际案例PasteTemplate详解之管理前端的代码(二)
    之前的文章说了,使用反射和ABPvNext的Dto实现用后端控制前端以实现最佳CRUD实践!相信看过一的已经了解了这个PasteForm是如何实现的了,本文来看下具体如何实现的表格页面的实现打开pasteform/index.html页面之后,先会向API请求当前的path的数据模板_apiget(`/api/app/${_class......
  • 前端使用webpack本地实现编译时出现错误[cached] 1 asset ERROR in main Module not
    一:概述Webpack是一个现代JavaScript应用程序的静态模块打包工具。它主要用于将JavaScript代码、CSS、图片等资源模块化管理,并最终打包成一个或多个文件,方便在浏览器中使用。以下是对Webpack的详细介绍:主要特点模块化:Webpack支持ES6模块、CommonJS和AMD模块,能够将各种......
  • 前端后端以及全栈的区别
    一.前端前端概念:前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。前端特点:前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现。前端技术:HTMLCSSJavaScript二.后端后端概念:多数后端开发......
  • (H5前端CAD)在线CAD如何实现图形识别功能
    前言CAD图形识别功能可帮助用户快速识别和提取CAD图纸中的各种图形,从而加速设计过程。​可应用在识别与分类阶段,自动识别图纸中的不同元素,通过特定特征进行区分,减少了手动分类的工作量;也可应用在数量统计阶段,统计图纸中各种构件的数量用于预算;还可运用在图纸定位和应用阶段,快速定......
  • 前端知识点
    前言1.1、CS架构和BS架构web网页,我们都不陌生,相信大家都有使用web浏览上网的。那么,学习制作网页前,我们需要清晰哪些概念,准备哪些工具呢?接下来,我们要先了解下。在日常生活中,我们都会上网,或聊天、或阅读、或购物等,浏览很多的网站,而网站就是由网页组成。在互联网中,软件系统体系分两......
  • 并发编程面试题
    在java中守护线程和本地线程区别用户线程是程序创建的线程。由jvm创建的线程是守护线程,比方说垃圾收集线程。死锁与活锁的区别,死锁与饥饿的区别?死锁:是指两个或两个以上的进程(或线程)在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下......
  • 如何利用大模型提升前端研发效率和代码质量
     随着人工智能技术的飞速发展,尤其是大模型(LargeLanguageModels,LLM)的崛起,前端开发者迎来了全新的工作方式。大模型不仅可以提升研发效率,还能够显著提高代码质量。本文将深入探讨前端开发者如何利用大模型及其相关工具,提升工作效率和代码质量,并探讨未来可能的应用场景和发展方向......
  • 【前端学习】 NestJS 之 控制器 (Controller)
    文章目录控制器(Controller)*路由(router)请求对象(requestobject)*资源(Resources)状态码(statuscode)标头&重定向(headers&redirection)*路由参数(routeparameters)*请求负载(requestpayloads)启动并运行小结控制器(Controller)控制器负责处理......
  • JavaScript 数据可视化:前端开发的核心工具
    随着互联网和大数据的快速发展,数据呈爆炸式增长,如何有效地展示和理解数据成为了一项关键技能。JavaScript作为前端开发的主要语言,不仅在构建网页方面无可替代,也在数据可视化领域发挥了重要作用。从简单的图表到复杂的交互式展示,JavaScript为开发者提供了丰富的工具和框架,帮助......