2024最新前端面试八股文【基础篇293题】

⼀、HTML、HTTP、web综合问题

1 前端需要注意哪些SEO

2 <img> title alt 有什么区别

3 HTTP的⼏种请求⽅法⽤途

4 从浏览器地址栏输⼊url到显示⻚⾯的步骤

5 如何进⾏⽹站性能优化

6 HTTP状态码及其含义

7 语义化的理解

8 介绍⼀下你对浏览器内核的理解

9 html5有哪些新特性、移除了那些元素?

10 HTML5 的离线储存怎么使⽤,⼯作原理能不能解释⼀下?

11 浏览器是怎么对 HTML5 的离线储存资源进⾏管理和加载的呢

12 请描述⼀下 cookies sessionStorage localStorage 的区别?

13 iframe有那些缺点?

14 WEB标准以及W3C标准是什么?

15 xhtml和html有什么区别?

16 Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?

17 ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元

素和块级元素有什么区别?

18 HTML全局属性(global attribute)有哪些

19 Canvas和SVG有什么区别?

20 HTML5 为什么只需要写 <!DOCTYPE HTML>

21 如何在⻚⾯上实现⼀个圆形的可点击区域?

22 ⽹⻚验证码是⼲嘛的,是为了解决什么安全问题

23 viewport

24 渲染优化

25 meta viewport相关

26 你做的⻚⾯在哪些流览器测试过?这些浏览器的内核分别是什么?

27 div+css的布局较table布局有什么优点

28 a:img的alt与title有何异同?b:strong与em的异同?

29 你能描述⼀下渐进增强和优雅降级之间的不同吗

30 为什么利⽤多个域名来存储⽹站资源会更有效?

31 简述⼀下src与href的区别

32 知道的⽹⻚制作会⽤到的图⽚格式有哪些?

33 在css/js代码上线之后开发⼈员经常会优化性能,从⽤户刷新⽹⻚

开始,⼀次js请求⼀般情况下有哪些地⽅会有缓存处理?

33 ⼀个⻚⾯上有⼤量的图⽚(⼤型电商⽹站),加载很慢,你有哪

些⽅法优化这些图⽚的加载,给⽤户更好的体验。

34 常⻅排序算法的时间复杂度,空间复杂度

35 web开发中会话跟踪的⽅法有哪些

36 HTTP request报⽂结构是怎样的

37 HTTP response报⽂结构是怎样的

⼆、CSS部分

1 css sprite是什么,有什么优缺点

2 display: none; visibility: hidden; 的区别

3 link @import 的区别

4 什么是FOUC?如何避免

5 如何创建块级格式化上下⽂(block formatting context),BFC有什么⽤

6 display、float、position的关系

7 清除浮动的⼏种⽅式,各⾃的优缺点

8 为什么要初始化CSS样式?

9 css3有哪些新特性

10 display有哪些值?说明他们的作⽤

11 介绍⼀下标准的CSS的盒⼦模型?低版本IE的盒⼦模型有什么不同

的?

12 CSS优先级算法如何计算?

13 对BFC规范的理解?

14 谈谈浮动和清除浮动

15 position的值, relative和absolute定位原点是

16 display:inline-block 什么时候不会显示间隙?(携程)

17 PNG\GIF\JPG的区别及如何选

18 ⾏内元素float:left后是否变为块级元素?

19 在⽹⻚中的应该使⽤奇数还是偶数的字体?为什么呢?

20 ::before 和 :after中双冒号和单冒号 有什么区别?解释⼀下这2个

伪元素的作

21 如果需要⼿动写动画,你认为最⼩时间间隔是多久,为什么?(阿

⾥)

22 CSS合并⽅法

23 CSS不同选择器的权重(CSS层叠的规则)

24 列出你所知道可以改变⻚⾯布局的属性

25 CSS在性能优化⽅⾯的实践

26 CSS3动画(简单动画的实现,如旋转等

27 base64的原理及优缺点

28 ⼏种常⻅的CSS布局

29 stylus/sass/less区

30 postcss的作⽤

31 css样式(选择器)的优先级

32 ⾃定义字体的使⽤场景

33 如何美化CheckBox

34 伪类和伪元素的区别

35 base64 的使⽤

36 ⾃适应布局

37 请⽤CSS写⼀个简单的幻灯⽚效果⻚⾯

38 什么是外边距重叠?重叠的结果是什么?

39 rgba()和opacity的透明效果有什么不同?

40 css中可以让⽂字在垂直和⽔平⽅向上重叠的两个属性是什么?

41 如何垂直居中⼀个浮动元素?

42 px和em的区别

43 Sass、LESS是什么?⼤家为什么要使⽤他们?

44 知道css有个content属性吗?有什么作⽤?有什么应⽤?

45 ⽔平居中的⽅法

46 垂直居中的⽅法

47 如何使⽤CSS实现硬件加速?

48 重绘和回流(重排)是什么,如何避免?

49 说⼀说css3的animation

50 左边宽度固定,右边⾃适应

51 两种以上⽅式实现已知或者未知宽度的垂直⽔平居中

52 如何实现⼩于12px的字体效果

三、JavaScript

1 闭包

2 说说你对作⽤域链的理解

3 JavaScript原型,原型链 ? 有什么特点?

4 请解释什么是事件代理

5 Javascript如何实现继承?

6 谈谈This对象的理解

7 事件模型

8 new操作符具体干了什么呢?

9 Ajax原理

10 如何解决跨域问题?

11 模块化开发怎么做?

12 异步加载JS的⽅式有哪些?

13 那些操作会造成内存泄漏?

14 XML和JSON的区别?

15 谈谈你对webpack的看法

16 说说你对AMD和Commonjs的理解

17 常⻅web安全及防护原理

18 ⽤过哪些设计模式?

19 为什么要有同源限制?

21 javascript有哪些⽅法定义对象

22 常见兼容性问题?

23 说说你对promise的了解

24 你觉得jQuery源码有哪些写的好的地方

25 vue、react、angular

26 Node的应用场景

27 谈谈你对AMD、CMD的理解

28 那些操作会造成内存泄漏

29 web开发中会话跟踪的⽅法有哪些

30 介绍js的基本数据类型

31 介绍js有哪些内置对象

32 说几条写JavaScript的基本规范

33 JavaScript有⼏种类型的值

34 javascript创建对象的⼏种⽅式

35 eval是做什么的

36 null,undefined 的区别

37 ["1","2","3"].map(parselnt)答案是多少

38 javascript 代码中的"use strict";是什么意思

39 JSON 的了解

40 js延迟加载的⽅式有哪些

41 同步和异步的区别

42 渐进增强和优雅降级

43 defer和async

44 说说严格模式的限制

45 attribute和property的区别是什么

46 谈谈你对ES6的理解

47 ECMAScript6 怎么写class么

48 什么是⾯向对象编程及⾯向过程编程,它们的异同和优缺点

49 ⾯向对象编程思想

50 对web标准、可⽤性、可访问性的理解

51如何通过JS判断一个数组

52 谈-谈let与var的区别

53 map与forEach的区别

54 谈一谈你理解的函数式编程

55 谈⼀谈箭头函数与普通函数的区别?

56 谈⼀谈函数中this的指向

57 异步编程的实现⽅式

58 对原⽣Javascript了解程度

59 Js动画与CSS动画区别及相应实现

60 JS 数组和对象的遍历⽅式,以及⼏种⽅式的⽐较

61 gulp是什么

62 说⼀下Vue的双向绑定数据的原理

63 事件的各个阶段

64 let var const

65 快速的让⼀个数组乱序

66 如何渲染⼏万条数据并不卡住界⾯

67 希望获取到⻚⾯中所有的checkbox怎么做?

68 怎样添加、移除、移动、复制、创建和查找节点

69 正则表达式

70 Javascript中callee和caller的作⽤?

71 window.onload和$(document).ready

72 addEventListener()和attachEvent()的区别

73 获取⻚⾯所有的checkbox

74 数组去重⽅法总结

75 (设计题)想实现⼀个对⻚⾯某个节点的拖曳?如何做?(使⽤

原⽣JS)

76 Javascript全局函数和全局变量

77 使⽤js实现⼀个持续的动画效果

78 封装⼀个函数,参数是定时器的时间,.then执⾏回调函数

79 怎么判断两个对象相等?

80 项⽬做过哪些性能优化?

81 浏览器缓存

82 WebSocket

83 尽可能多的说出你对 Electron 的理解

84 深浅拷⻉

85 防抖/节流

86 谈谈变量提升?

87 什么是单线程,和异步的关系

88 是否⽤过 jQuery 的 Deferred

89 前端⾯试之hybrid

90 前端⾯试之组件化

91 前端⾯试之MVVM浅析

92 实现效果,点击容器内的图标,图标边框变成border 1px solid

red,点击空⽩处重置

93 请简单实现双向数据绑定

94 实现Storage,使得该对象为单例,并对 mvvm localStorage 进⾏封装设置值setItem(key,value)和getItem(key)

95 说说event loop

96 说说事件流

97 为什么 canvas 的图⽚为什么过有跨域问题

98 我现在有⼀个 canvas ,上⾯随机布着⼀些⿊块,请实现⽅法,计

算canvas上有多少个⿊块

99 请⼿写实现⼀个promise

100 说说从输⼊URL到看到⻚⾯发⽣的全过程,越详细越好

101 描述⼀下 this

102 说⼀下浏览器的缓存机制

103 现在要你完成⼀个Dialog组件,说说你设计的思路?它应该有什

么功能?

104 caller callee 的区别

105 ajax、axios、fetch区别

四、jQuery

1 你觉得jQuery或zepto源码有哪些写的好的地⽅

2 jQuery 的实现原理

3 jQuery.fn init ⽅法返回的 this 指的是什么对象

4 jQuery.extend 与 jQuery.fn.extend 的区别

5 jQuery 的属性拷⻉(extend)的实现原理是什么,如何实现深拷贝

6 jQuery 的队列是如何实现的

7 jQuery 中的 bind(), live(), delegate(), on()的区别

8 是否知道⾃定义事件

9 jQuery 通过哪个⽅法和 Sizzle 选择器结合的

10 jQuery 中如何将数组转化为 JSON 字符串,然后再转化回来

11 jQuery ⼀个对象可以同时绑定多个事件,这是如何实现的

12 针对 jQuery 的优化⽅法

13 jQuery 的 slideUp 动画,当⿏标快速连续触发, 动画会滞后反复执

⾏,该如何处理呢

14 jQuery UI 如何⾃定义组件

15 jQuery 与 jQuery UI、jQuery Mobile 区别

16 jQuery 和 Zepto 的区别? 各⾃的使⽤场景

17 jQuery对象的特点

五、Bootstrap

1 什么是Bootstrap?以及为什么要使⽤Bootstrap?

2 使⽤Bootstrap时,要声明的⽂档类型是什么?以及为什么要这样声

明?

3 什么是Bootstrap⽹格系统

4 Bootstrap ⽹格系统(Grid System)的⼯作原理

5 对于各类尺⼨的设备,Bootstrap设置的class前缀分别是什么

6 Bootstrap ⽹格系统列与列之间的间隙宽度是多少

7 如果需要在⼀个标题的旁边创建副标题,可以怎样操作

8 ⽤Bootstrap,如何设置⽂字的对⻬方式?

9 Bootstrap如何设置响应式表格?

10 使⽤Bootstrap创建垂直表单的基本步骤?

11 使⽤Bootstrap创建⽔平表单的基本步骤?

12 使⽤Bootstrap如何创建表单控件的帮助⽂本?

13 使⽤Bootstrap激活或禁⽤按钮要如何操作?

14 Bootstrap有哪些关于的class?

15 Bootstrap中有关元素浮动及清除浮动的class?

16 除了屏幕阅读器外,其他设备上隐藏元素的class?

17 Bootstrap如何制作下拉菜单?

18 Bootstrap如何制作按钮组?以及⽔平按钮组和垂直按钮组的优先

级?

19 Bootstrap如何设置按钮的下拉菜单?

20 Bootstrap中的输⼊框组如何制作?

21 Bootstrap中的导航都有哪些?

22 Bootstrap中设置分页的class?

23 Bootstrap中显示标签的class?

24 Bootstrap中如何制作徽章?

25 Bootstrap中超⼤屏幕的作⽤是什么?

六、微信⼩程序

1 微信⼩程序有⼏个⽂件

2 微信⼩程序怎样跟事件传值

3 ⼩程序的 wxss 和 css 有哪些不⼀样的地⽅?

4 ⼩程序关联微信公众号如何确定⽤户的唯⼀性

5 微信⼩程序与vue区别

七、webpack相关

1 打包体积 优化思路

2 打包效率

3 Loader

4 说⼀下webpack的⼀些plugin,怎么使⽤webpack对项⽬进⾏优化

⼋、编程题

1 写⼀个通⽤的事件侦听器函数

2 如何判断⼀个对象是否为数组

3 冒泡排序

4 快速排序

5 编写⼀个⽅法 求⼀个字符串的字节⻓度

6 bind的⽤法,以及如何实现bind的函数和需要注意的点

7 实现⼀个函数clone

8 下⾯这个ul,如何点击每⼀列的时候alert其index

9 定义⼀个log⽅法,让它可以代理console.log的⽅法

10 输出今天的⽇期

11 ⽤js实现随机选取10–100之间的10个数字,存⼊⼀个数组,并排序

12 写⼀段JS程序提取URL中的各个GET参数

13写-个function,清除字符串前后的空格

14 实现每隔⼀秒钟输出1,2,3...数字

15 实现⼀个函数,判断输⼊是不是回⽂字符串

16、数组扁平化处理

九、其他

1 负载均衡

2 CDN

3 内存泄漏

4 babel原理

5 js⾃定义事件

6 前后端路由差别

⼗、综合

1 谈谈你对重构的理解

2 什么样的前端代码是好的

3 对前端⼯程师这个职位是怎么样理解的?它的前景会怎么样

4 你觉得前端⼯程的价值体现在哪

5 平时如何管理你的项目

6 组件封装

⼗⼀、⼀些常⻅问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/16232.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【操作系统】发展与分类(手工操作、批处理、分时操作、实时操作)

2.操作系统发展与分类 思维导图 手工操作阶段&#xff08;此阶段无操作系统&#xff09; 需要人工干预 缺点&#xff1a; 1.用户独占全机&#xff0c;资源利用率低&#xff1b; 2.CPU等待手工操作&#xff0c;CPU利用不充分。 批处理阶段&#xff08;操作系统开始出现&#x…

链表-线性表的链式表示

链表-线性表的链式表示 #mermaid-svg-ozpXrKnNCyYdqHvN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ozpXrKnNCyYdqHvN .error-icon{fill:#552222;}#mermaid-svg-ozpXrKnNCyYdqHvN .error-text{fill:#552222;stro…

express 设定路径别名

在使用ts情况下 pnpm i -D tsconfig-paths配置tsconfig.json {// 引入 tsconfig-paths/register// 注意 ts-node 的层级与 compilerOptions 相同"ts-node": {"require": ["tsconfig-paths/register"]},"compilerOptions": {// ...//…

width: auto 和 width: 100% 的区别

width: auto Vs. width: 100% 关于 width 属性 CSS 中的 width 属性用于设置元素的宽度。默认情况下&#xff0c;width 设置的是内容区&#xff08;content area&#xff09;的宽度。如果元素有样式 box-sizing: border-box&#xff0c;则 width 设置的是边框区&#xff08;bo…

正运动控制器:视觉纠偏和找孔

一、用户主界面CCD参数设置 通过主界面CCD参数设置&#xff0c;学习如何操作计算相机中心与电批中心的偏移量&#xff0c;以及相机标定的功能。 1、相机中心与电批中心的偏移量计算 1.1、在用户主界面点击CCD参数按钮&#xff0c;进入CCD设置界面。 主界面 CCD参数设置界面 1…

制作电子画册速成攻略,快来试试

​当今社会&#xff0c;数字媒体日益普及&#xff0c;电子画册作为一种崭新的展示方式&#xff0c;受到了越来越多人的青睐。它不仅形式新颖&#xff0c;互动性强&#xff0c;而且制作起来也并不复杂。想知道如何快速掌握制作电子画册的技巧吗&#xff1f;我来教你吧。 接下来&…

二叉树的广义表反序列化

前言 个人小记 一、代码 #include<stdio.h> #include <stdlib.h> #include <string.h> #include <time.h> #define MAX_NODE 10 #define MAX_LEN 100 #define key(n)(n)?(n->key):(-1) typedef struct Node {int key;struct Node* lchild,*rchil…

Leetcode 3159. Find Occurrences of an Element in an Array

Leetcode 3159. Find Occurrences of an Element in an Array 1. 解题思路2. 代码实现 题目链接&#xff1a;3159. Find Occurrences of an Element in an Array 1. 解题思路 这一题的话我们只需要首先统计一下array当中目标元素x出现在第几次的位置&#xff0c;构造一个has…

推荐13款常用的Vscode插件,提高前端日常开发效率

1. Live Server Live Server 插件是一个用于前端开发的扩展&#xff0c;它的主要作用是提供一个本地开发服务器&#xff0c;以便实时预览和调试网页应用程序。其最大特点在于热重载&#xff0c;即开发者可实时预览代码效果。 因为Live Server 允许开发者在浏览器中实时预览您正…

软件测试面试题(五)

一&#xff1a;如何选择用户测试的工作产品&#xff1f;、 答&#xff1a;在用户有需求得到签字确认以后&#xff0c;我们选择用户测试的工作产品。我们几乎所有的项目都进行了测试&#xff0c;我们是在项目立项公告中得知需要对工作产品进行测试。 二&#xff1a;测试环境描述…

C++中集合的使用

在 C 中&#xff0c;集合通常指的是标准模板库&#xff08;STL&#xff09;中的 std::set 或 std::unordered_set。这两个都是用来存储不重复元素的容器&#xff0c;但在实现和使用方式上有一些区别。 1. std::set&#xff1a; 基于红黑树实现&#xff0c;元素按照严格的顺序…

Llama 3没能逼出GPT-5!OpenAI怒“卷”To B战场,新企业级 AI 功能重磅推出!

Meta 是本周当之无愧的AI巨星&#xff01;刚刚推出的 Llama 3 凭借着强大的性能和开源生态的优势在 LLM 排行榜上迅速跃升。 按理说&#xff0c;Llama 3在开源的状态下做到了 GPT-3.7 的水平&#xff0c;必然会显得用户&#xff08;尤其是企业用户&#xff0c;他们更具备独立部…

指令中常用的7种寻址方式z

指令中的寻址方式就是对指令中的地址字段进行解释&#xff0c;以获得操作数的方法或获得程序转移地址的方法。常用的寻址方式有&#xff1a; 立即寻址&#xff1a;操作数就包含在指令中。直接寻址&#xff1a;操作数存放在内存单元中&#xff0c;指令中直接给出操作数所在存储…

C#调用HttpClient.SendAsync报错:System.Net.Http.HttpRequestException: 发送请求时出错。

C#调用HttpClient.SendAsync报错&#xff1a;System.Net.Http.HttpRequestException: 发送请求时出错。 var response await client.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, cancellationToken);问题出在SSL/TLS&#xff0c;Windows Server 2012不支持…

先进制造aps专题八 基于ai大模型的ai超级应用,ai生管

目前正在研发的面向消费者的ai超级应用有ai文员&#xff0c;ai教师&#xff0c;ai家教&#xff0c;ai护士&#xff0c;ai翻译 而ai生管无疑是面向制造业的ai超级应用 从商业角度来说&#xff0c;ai生管&#xff0c;必然是aps公司必然要研发的ai超级应用

Grafana 路径遍历所有路径 CVE-2021-43798漏洞预警

简介​ ​Grafana是一个跨平台、开源的数据可视化网络应用程序平台。用户配置连接的数据源之后&#xff0c;Grafana可以在网络浏览器里显示数据图表和警告。 漏洞危害等级 高危 CVE 编号​ CVE-2021-43798 FOFA查询 ​app"Grafana" ​zoomeyes查询 ​app:"gr…

Vue3解决“找不到模块“@/components/xxx.vue”或其相应的类型声明”

文章目录 前言背景问题描述解决方案总结 前言 在使用 Vue 3 开发项目时&#xff0c;遇到“找不到模块 ‘/components/xxx.vue’ 或其相应的类型声明”的错误是一个常见问题。这通常与 TypeScript 和模块解析相关的配置不当有关。本文将详细介绍如何解决此问题&#xff0c;确保…

2024-6-遥远的救世主

2024-6-遥远的救世主 2024-4-18 豆豆 fatux&#xff1a; 2021.5.26 看完电视剧《天道》之后购买本书&#xff0c;断断续续一直没有读完。 非常好奇&#xff0c;一个什么样的作者能写出如此奇书。老丁&#xff0c;一个智者&#xff0c;智者是多么孤独&#xff0c;因为找不到同…

信息安全等级保护测评: 登陆日志

文章目录 引言I 登录日志表结构设计II 日志处理2.1 封装日志入库2.2 收集登陆信息2.3 查询接口引言 等保测评是信息安全等级保护测评的简称,是对信息和信息载体按照重要性等级分级别进行检测、评估的过程。 背景:近期AIS监控平台(网页版)等保测评,发现没有登陆日志,现要…