前端面试笔试题总结.

合集下载

前端开发面试笔试题目

前端开发面试笔试题目前端开发面试和笔试题目可以涵盖多个领域，包括HTML、CSS、JavaScript、性能优化、框架和库、移动端开发等。

以下是一些可能的问题：一、基础问题1. 请解释一下什么是前端开发，并描述一下你的前端开发经验。

2. HTML、CSS 和JavaScript 的基础知识是什么？请谈谈你对它们的理解。

3. 什么是语义化 HTML，它的重要性是什么？4. CSS 盒模型是什么，以及如何使用它？5. 请解释一下 CSS 选择器的工作原理，并谈谈你使用过哪些选择器。

6. 你如何理解 CSS 优先级，以及你是如何处理它的？7. 请解释一下什么是 CSS 动画和转换，以及如何实现它们？8. JavaScript 中的事件循环是什么，以及它是如何工作的？9. 请解释一下什么是原型链，以及它是如何工作的？10. 请解释一下什么是闭包，以及它的用途是什么？二、性能优化1. 如何优化网页的加载速度，提高用户体验？2. 请解释一下什么是 CDN，以及它是如何工作的？3. 你如何理解 HTTP/2，以及它与 HTTP/ 的区别是什么？4. 请解释一下什么是 Gzip 压缩，以及它是如何工作的？5. 你如何理解域名预取（DNS 预取）和浏览器预取？6. 请解释一下什么是懒加载，以及它是如何工作的？7. 你如何理解 HTTP/2 的多路复用，以及它的重要性是什么？8. 你如何处理网页的资源优化，以提高性能？三、框架和库1. 你对 React 有多少了解，以及你使用过它的哪些功能？2. 你对 Vue 有多少了解，以及你使用过它的哪些功能？3. 你对 Angular 有多少了解，以及你使用过它的哪些功能？4. 请解释一下什么是 Redux，以及它是如何工作的？5. 请解释一下什么是 React Hooks，以及你使用过哪些 Hooks？6. 你对 webpack 有多少了解，以及你如何配置 webpack？7. 你对 Babel 有多少了解，以及你如何配置 Babel？8. 你对 ES6 有多少了解，以及你使用过它的哪些新特性？9. 你对 TypeScript 有多少了解，以及你使用过它的哪些功能？10. 你对模块打包工具有哪些了解，以及你使用过哪些工具？。

前端开发工程师面试题及答案

前端开发工程师面试题及答案在前端开发领域，面试是选拔优秀人才的重要环节。

以下是一些常见的前端开发工程师面试题以及对应的参考答案。

一、HTML 和 CSS 相关问题1、解释一下盒模型以及它在布局中的作用。

答案：盒模型是 CSS 中用于布局的基本概念，它由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

在布局中，理解盒模型对于准确计算元素的尺寸和间距非常重要，能够帮助我们实现各种复杂的页面布局。

2、如何实现一个两栏布局，左边固定宽度，右边自适应？答案：可以使用多种方法实现。

一种常见的方式是使用浮动（float），将左边栏设置为固定宽度并向左浮动，右边栏不浮动，并设置其左边的外边距（marginleft）为左边栏的宽度。

也可以使用 flex 布局，将父容器设置为 display: flex; ，左边栏设置固定宽度，右边栏设置flex: 1; 以实现自适应。

3、说一说 CSS 选择器的种类和优先级。

答案：CSS 选择器包括元素选择器、类选择器、id 选择器、属性选择器、伪类选择器、伪元素选择器等。

选择器的优先级从高到低依次为：内联样式（通过 style 属性设置）＞ id 选择器＞类选择器、属性选择器、伪类选择器＞元素选择器、伪元素选择器。

二、JavaScript 相关问题1、谈谈你对 JavaScript 中作用域和闭包的理解。

答案：作用域决定了变量的可见性和可访问性。

在 JavaScript 中有全局作用域和函数作用域。

闭包是指有权访问另一个函数作用域中的变量的函数。

闭包可以让函数记住其创建时的环境，即使外部函数已经执行完毕，闭包仍能访问外部函数中的变量。

2、如何实现 JavaScript 的继承？答案：常见的实现方式有原型链继承、借用构造函数继承、组合继承、寄生组合继承等。

原型链继承通过将子类型的原型指向父类型的实例来实现继承；借用构造函数继承通过在子类型的构造函数中调用父类型的构造函数来继承属性；组合继承结合了原型链继承和借用构造函数继承的优点；寄生组合继承是一种优化的组合继承方式，避免了不必要的父类实例属性的重复创建。

web前端笔试题及答案

web前端笔试题及答案一、选择题1. 下列哪个不是JavaScript的数据类型？A. NumberB. StringC. UndefinedD. Array答案：D2. CSS中，以下哪个属性用于设置元素的宽度？A. widthB. heightC. marginD. padding答案：A3. HTML5中，用于定义文档的元数据的标签是：A. <html>B. <head>C. <meta>D. <title>答案：B二、简答题1. 请简述什么是BEM命名方法，并说明其优点。

答案：BEM是Block Element Modifier的缩写，是一种CSS类名命名方法。

它通过将CSS类名分为三个部分：块（Block）、元素（Element）和修饰符（Modifier），来提高CSS的可读性和可维护性。

优点包括：提高代码的可读性，方便团队协作；通过块和元素的命名，可以避免CSS选择器的冲突；修饰符的使用可以方便地覆盖或扩展样式。

2. 请解释什么是跨域资源共享（CORS）以及它是如何解决跨域请求问题的。

答案：跨域资源共享（CORS）是一种安全机制，允许Web页面上的脚本发起跨域HTTP请求。

它通过在HTTP响应头中添加特定的字段来告知浏览器，哪些源可以访问该资源。

CORS通过设置Access-Control-Allow-Origin等响应头，允许或限制来自不同源的请求，从而解决了由于浏览器同源策略导致的跨域请求问题。

三、编程题1. 编写一个JavaScript函数，实现数组中所有数字的累加。

示例代码：```javascriptfunction sumArray(numbers) {let sum = 0;for (let i = 0; i < numbers.length; i++) {sum += numbers[i];}return sum;}```2. 请使用HTML和CSS创建一个简单的登录表单，并包含用户名和密码输入框。

web前端开发面试题及答案

web前端开发面试题及答案Web前端开发是互联网行业中一个非常热门的领域，涉及到网页设计、开发和用户体验等多个方面。

在面试过程中，面试官通常会提出一系列问题来评估应聘者的专业知识和技能。

以下是一些常见的Web前端开发面试题及答案：1. HTML相关问题- 问：HTML5有哪些新特性？- 答：HTML5引入了新的语义元素如`<header>`, `<footer>`,`<article>`, `<section>`等，增强了表单控件，如`<inputtype="date">`，`<input type="range">`等，支持多媒体内容，如`<video>`和`<audio>`，以及提供了绘图功能`<canvas>`。

2. CSS相关问题- 问：CSS选择器有哪些类型？- 答：CSS选择器主要有以下几种类型：元素选择器、类选择器（如`.class`）、ID选择器（如`#id`）、属性选择器（如`[type="text"]`）、伪类选择器（如`:hover`, `:first-child`）和伪元素选择器（如`::before`, `::after`）。

3. JavaScript相关问题- 问：JavaScript中的闭包是什么？- 答：闭包是指一个函数能够记住并访问其创建时的环境，即使该环境的外部上下文已经执行完毕。

闭包通常用于创建私有变量和方法，或者在回调函数中使用外部变量。

4. 响应式设计相关问题- 问：如何实现响应式网页设计？- 答：实现响应式网页设计主要依赖于CSS媒体查询（Media Queries），通过不同的屏幕尺寸和设备特性来应用不同的样式规则。

同时，使用流体布局（使用百分比而非固定像素）和可伸缩的图片和媒体元素也是关键。

前端面试题笔试考题和答案

前端⾯试题笔试考题和答案⼀、选择题 1．下⾯标签嵌套正确的是（D）A. <ul><p>赶集⽹</p></ul>B. <a href="#"><a href="#">赶集⽹</a></a>C. <dl><li>赶集⽹</li></dl>D. <ol><li>赶集⽹</li></ol>2. 在HTML中，（c）可以在⽹页上通过链接直接打开邮件客户端发送邮件。

A.<a href=”telnet:zhou@”>发送邮件</a>B. <a href=”mail:zhou@”>发送邮件</a>C. <a href=”mailto:zhou@”>发送邮件</a>D. <a href=”ftp:zhou@”>发送邮件3. 请选出所有的置换元素（abcd）(多选)A. imgB. inputC. textareaD. select4．下⾯哪条声明能固定背景图⽚（A）A. background-attachment:fixed;B. background-attachment:scroll;C. background-origin: initial;D. background-clip: initial;5．下列说法正确的是（AB）（多选）A.display: none；不为被隐藏的对象保留其物理空间；B.visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；C.visibility:hidden;产⽣reflow和repaint(回流与重绘)；D.visibility:hidden;与display: none;两者没有本质上的区别；6．以下关于盒⼦模型描述正确的是（ab）A.标准盒⼦模型中：盒⼦的总宽度＝左右margin + 左右border + 左右padding + widthB.IE盒⼦模型中：盒⼦总宽度＝左右margin + 左右border + widthC.标准盒⼦模型中：盒⼦的总宽度＝左右margin 详细的介绍:⽹页中的盒⼦模型；我们常常要控制盒⼦模型的宽度width:w3c中的盒⼦模型的宽:包括margin+border+padding+width;width:margin*2+border*2+padding*2+width;height:margin*2+border*2+padding*2+height;iE中的盒⼦模型的width:也包括margin+border+padding+width;上⾯的两个宽度相加的属性是⼀样的。

web前端开发笔试题及答案

web前端开发笔试题及答案Web前端开发是当今互联网行业中的热门职业，因此笔试题也成为了求职者们争相解答的问题。

本文将为大家提供一些常见的Web前端开发笔试题及答案，希望能够帮助到正在准备面试的你。

一、HTML/CSS相关问题1. 什么是HTML？请简要介绍一下HTML的特点及用途。

答：HTML全称为Hypertext Markup Language，是一种用于创建网页的标准标记语言。

它的主要特点包括：简单易学、跨平台、具有良好的可扩展性和可读性。

HTML用途广泛，可以用来构建静态网页及动态网页的基础结构。

2. 请简述CSS的作用及优势。

答：CSS全称为Cascading Style Sheets，用于定义HTML文档的表现样式。

CSS的作用包括网页布局、字体样式、颜色等方面的控制。

相较于使用HTML内联样式，CSS具有以下优势：代码可重用性高、样式更易维护、网页加载速度更快。

3. 如何实现水平居中和垂直居中？答：实现水平居中可以使用`margin: 0 auto;`来对块级元素进行居中设置。

实现垂直居中可以使用多种方法，其中一种常见的方法是使用`display: flex;`和`align-items: center;`来对父元素进行设置。

二、JavaScript相关问题1. 什么是闭包？请简要描述闭包的原理及用途。

答：闭包是指函数能够访问并操作其外部作用域中的变量的能力。

当函数内部定义的函数引用了外部函数的变量时，就形成了闭包。

闭包的主要用途包括：封装变量、实现模块化、延长局部变量的生命周期等。

2. 如何判断一个变量的数据类型？答：可以使用`typeof`运算符来判断一个变量的数据类型。

例如：`typeof 123`返回`"number"`，`typeof "hello"`返回`"string"`。

3. 请解释一下什么是事件冒泡和事件捕获？答：事件冒泡是指在页面中，当一个元素触发了某个事件时，该事件会依次向父元素传递，直到传递给最顶层的元素。

最新Web前端经典面试试题及答案

最新Web前端经典面试试题及答案一、HTML/CSS面试题1. 问题：Doctype声明的作用是什么？答案：Doctype声明用于告诉浏览器页面使用的HTML版本。

它对浏览器解析HTML文档的方式有重要影响。

如果没有声明Doctype，浏览器会进入怪异模式（quirks mode），导致不同浏览器之间的渲染差异。

2. 问题：请解释一下盒模型的概念。

答案：盒模型是CSS布局的基础，它将HTML元素视为一个矩形盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

通过调整这些属性，我们可以控制元素在页面上的布局。

3. 问题：如何实现水平垂直居中？答案：有多种方法可以实现水平垂直居中，以下是一些常见的方法：- 使用Flexbox布局：父元素设置为display: flex; justify-content: center; align-items: center;- 使用Grid布局：父元素设置为display: grid; place-items: center;- 使用定位和transform：子元素设置position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);- 使用表格布局：父元素设置为display: table; 子元素设置为display: table-cell; vertical-align: middle; text-align: center;4. 问题：什么是响应式设计？答案：响应式设计是一种网页设计方法，旨在使网页能够适应不同设备和屏幕尺寸。

通过使用媒体查询（Media Queries）和弹性布局（如Flexbox或Grid），可以实现在不同设备上提供最佳的用户体验。

二、JavaScript面试题1. 问题：什么是闭包？请给出一个例子。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JavaScript类库：jQuery、PrototypeJavaScript框架：BackBone、Vuejs、Angular.js、React.jsCSS预编译器：LessCss、SassJavaScript模块加载器：RequireJS、Browserify项目构建工具：Grunt、Gulp项目管理和协同工具的使用：SVN、Git前端测试框架以及工具：Jasmine、Mocha基本后端开发：NodeJS、Pythonweb相关技术：MongoDB、CoffeeScript、SEO、Socket.io、Express、Tornado等一、谈谈cookie的弊端：cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

第一：每个特定的域名下最多生成20个cookie1.IE6或更低版本最多20个cookie2.IE7和之后的版本最后可以有50个cookie。

3.Firefox最多50个cookie4.chrome和Safari没有做硬性限制IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据，叫做uerData，从IE5.0就开始支持。

每个数据最多128K，每个域名下最多1M。

这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点：极高的扩展性和可用性1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。

偷盗者很可能拿到一个过期的cookie。

缺点：1.`Cookie`数量和长度的限制。

每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。

如果cookie被人拦截了，那人就可以取得所有的session信息。

即使加密也与事无补，因为拦截者并不需要知道cookie 的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。

例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。

如果我们把这个计数器保存在客户端，那么它起不到任何作用。

二、浏览器本地存储：在较高版本的浏览器中，js提供了sessionStorage和globalStorage。

在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

三、web storage和cookie的区别Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。

Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。

通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等四、display:none和visibility:hidden的区别？display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

五、CSS中link 和@import 的区别是？(1) link属于HTML标签，而@import是CSS提供的;(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;(4) link方式的样式的权重高于@import的权重.六、position的absolute与fixed共同点与不同点A：共同点：1.改变行内元素的呈现方式，display被置为block；2.让元素脱离普通流，不占据空间；3.默认会覆盖到非定位元素上B不同点：absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

七、介绍一下CSS的盒子模型？参考答案1）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border) 2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了border 和 pading;3）八、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？参考答案CSS 选择符：1.id选择器(# myid)2.类选择器(.myclassname)3.标签选择器(div, h1, p)4.相邻选择器(h1 + p)5.子选择器(ul > li)6.后代选择器(li a)7.通配符选择器( * )8.属性选择器(a[rel = "external"])9.伪类选择器(a: hover, li:nth-child)可继承的样式：1.font-size2.font-family3.color4.text-indent不可继承的样式：1.border2.padding3.margin4.width5.height优先级算法：1.优先级就近原则，同权重情况下样式定义最近者为准;2.载入样式以最后载入的定位为准;3.!important > id > class > tag4.important 比内联优先级高，但内联比 id 要高CSS3新增伪类举例：p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

九、列出display的值，说明他们的作用。

position的值， relative和absolute 分别是相对于谁进行定位的？参考答案display 的值的作用：1.block 象块类型元素一样显示。

2.inline 缺省值。

象行内元素类型一样显示。

3.inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

4.list-item 象块类型元素一样显示，并添加样式列表标记。

position 的值的定位区别：1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位（老IE不支持）。

3.relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

4.static 默认值。

没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

5.inherit 规定从父元素继承 position 属性的值。

十、CSS3有哪些新特性？参考答案1. CSS3实现圆角（border-radius），阴影（box-shadow），2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜4. 增加了更多的CSS选择器多背景 rgba5. 在CSS3中唯一引入的伪元素是 ::selection.6. 媒体查询，多栏布局7. border-image十一、为什么要初始化CSS样式。

参考答案因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

*最简单的初始化方法就是（不建议）：{padding: 0; margin: 0;}淘宝的样式初始化：body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }十二、对BFC规范的理解？参考答案BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。