2021年WEB前端开发工程师面试题
前端开发工程师面试题及答案
前端开发工程师面试题及答案在前端开发领域，面试是选拔优秀人才的重要环节。
以下是一些常见的前端开发工程师面试题以及对应的参考答案。
一、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 的继承？答案：常见的实现方式有原型链继承、借用构造函数继承、组合继承、寄生组合继承等。
原型链继承通过将子类型的原型指向父类型的实例来实现继承；借用构造函数继承通过在子类型的构造函数中调用父类型的构造函数来继承属性；组合继承结合了原型链继承和借用构造函数继承的优点；寄生组合继承是一种优化的组合继承方式，避免了不必要的父类实例属性的重复创建。
前端工程化面试问题
前端工程化面试问题一、基础知识1. 请简述一下你对HTML5的理解？HTML5在前端开发中扮演了什么样的角色？2. 什么是CSS，它的主要作用是什么？3. JavaScript的主要特性和应用场景有哪些？4. 请谈谈你对前端框架（如React、Vue、Angular等）的理解。
你可以详细描述一下你熟悉的前端框架的主要特性和使用场景吗？5. 请解释一下什么是前端路由，以及它的实现原理。
6. 请简述一下你对前端工程化的理解，以及它的重要性。
7. 什么是模块化，如何实现前端模块化？8. 请解释一下什么是HTTP和HTTPS，以及他们的区别。
9. 请简述一下你对Webpack的理解，以及它的主要功能和使用场景。
10. 请解释一下什么是DOM，以及它的重要性。
二、进阶知识1. 请解释一下什么是虚拟DOM，以及它与真实DOM的区别和联系。
2. 请谈谈你对前端性能优化的理解，以及你通常采用的前端性能优化方法。
3. 请解释一下什么是CSS预处理器（如Sass、Less等），以及他们的特性和使用场景。
4. 请谈谈你对前端安全性的理解，以及你通常采用的前端安全措施。
5. 请解释一下什么是前端自动化，以及你熟悉的前端自动化工具和框架。
6. 请解释一下什么是前端响应式设计，以及它的实现原理。
7. 请谈谈你对前端组件化的理解，以及你通常采用的前端组件设计和开发方法。
8. 请解释一下什么是Service Worker，以及它的主要功能和使用场景。
9. 请谈谈你对前端模块热替换（Hot Module Replacement）的理解，以及它的主要优点和限制。
10. 请解释一下什么是前端路由懒加载，以及它的实现原理和优点。
三、实战经验1. 请描述一下你在过去的工作中遇到的最大的前端技术挑战，你是如何解决的？2. 请谈谈你在使用前端框架开发中的经验，以及你对其优缺点的理解。
3. 请描述一下你在前端工程化实践中遇到的问题和解决方法。
web前端面试题及答案
web前端面试题及答案前端开发面试题及答案1、对Web标准以及W3C的理解与认识2、某HTML和HTML有什么区别答：HTML是一种基本的WEB网页设计语言，某HTML是一个基于某ML 的置标语言最主要的不同：某HTML元素必须被正确地嵌套;某HTML元素必须被关闭;某HTML文档必须拥有根元素。
3、Doctype严格模式与混杂模式-如何触发这两种模式，区分它们有何意义答：Doctype用于声明文档使用哪种规范(HTML/某HTML)加入某ML声明可触发，解析方式更改为IE5.5拥有IE5.5的bug。
4、行内元素有哪些块级元素有哪些CSS的盒模型答：行内元素：abbripaninputelect块级元素：divph1h2h3h4formulCSS盒模型：内容，bordermarginpadding答：方式：内联内嵌外链导入区别：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link支持使用javacript改变样式，后者不可。
6.CSS选择符有哪些哪些属性可以继承优先级算法如何计算内联和important哪个优先级高后者优先级高7、前端页面有哪三层构成，分别是什么作用是什么答：结构层HTML表示层CSS行为层JS8、你做的页面在哪些浏览器测试过这些浏览器的内核分别是什么答：Ie(Ie内核)火狐(Gecko)谷歌(webkit)opear(Preto)答：Alt当图片不显示时，用文字代表Title为该属性提供信息。
10、描述CSSReet的作用和用途答：Reet重置浏览器的CSS默认属性浏览器的品种不同，样式不同，然后重置，让他们统一。
100-199用于指定客户端应响应的某些动作。
200-299用于表示请求成功。
300-399用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499用于指出客户端的错误。
400语义有误，当前请求无法被服务器理解。
401当前请求需要用户验证403服务器已经理解请求，但是拒绝执行它。
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），通过不同的屏幕尺寸和设备特性来应用不同的样式规则。
同时，使用流体布局（使用百分比而非固定像素）和可伸缩的图片和媒体元素也是关键。
web前端面试题及答案2021
web前端面试题及答案20211. 什么是Web前端开发？- Web前端开发是指利用HTML、CSS和JavaScript等技术，构建网站或Web应用的前端界面，实现用户与网页的交互。
2. 解释一下HTML5的新特性。
- HTML5是HTML的最新版本，它引入了语义化标签、多媒体支持、本地存储、地理位置定位、Canvas绘图、Web Workers等新特性。
3. CSS3相比CSS2有哪些改进？- CSS3在CSS2的基础上增加了圆角、阴影、渐变、动画、多列布局、媒体查询等新特性，并且支持更多的选择器和属性。
4. JavaScript中闭包的概念是什么？- 闭包是指一个函数能够记住并访问其创建时的词法作用域，即使该函数在词法作用域之外被调用。
5. 解释一下Ajax的工作原理。
- Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
它通过JavaScript的XMLHttpRequest对象或现代的Fetch API来实现。
6. 什么是跨域请求？- 跨域请求是指浏览器向与当前页面不同源（协议、域名、端口）的服务器发起的请求。
出于安全考虑，浏览器会限制跨域请求。
7. 什么是前端性能优化？- 前端性能优化是指通过各种技术手段，减少页面加载时间，提高页面响应速度和用户体验。
8. 什么是响应式设计？- 响应式设计是一种使网页能够适应不同设备屏幕尺寸和分辨率的设计方法，通常通过媒体查询和流体布局实现。
9. 什么是前端框架？- 前端框架是一种用于构建用户界面的软件工具，它提供了一套标准化的方法和组件来加速开发过程，如React、Vue、Angular等。
10. 什么是前端构建工具？- 前端构建工具是指用于自动化前端开发流程的工具，如Webpack、Gulp、Grunt等，它们可以处理模块化、压缩、编译等任务。
11. 什么是单页应用（SPA）？- 单页应用是一种Web应用或网站，它通过动态重写当前页面来与用户交互，而不是传统的从服务器加载整个新页面。
web前端面试题(答案及说明,初级)
web前端面试题
1.js的中的"=", "==", "===" 的区别
- "="：赋值
- "==": 相等运算符，判断是否相等
- "===": 严格运算符,判断数值及类型是否相等
2.js中数组循环处理的方法有那些，及其区别
方法：
- map(),forEeach()
区别：
map(): 循环遍历数组中的每一项,但返回新的数组forEach(): 循环遍历数组中的每一项,但没有返回值
3.如何解决发布版本，前端缓存的问题
- 了解面试者项目的构建工具的使用
4.最近使用的技术框架及其组件有那些
- 了解面试者使用react的熟练程序
5.前后端分离，你是如何模拟业务数据
- 根据策划稿或原型稿，与后端定义API接口。
- 使用mockjs模拟API接口的输入，输出
6.谈谈你如何定位前端的性能问题，及优化。
定位性能问题：
- 工具：chrome的开发工具等
- 查看请求次数及响应时间
- 查看浏览器渲染页面完成最大时间
优化：
- 资源（css,js,image等）合并与压缩减少请求数
- 缓存策略
- 图片资源懒加载
- gzip压缩
7.你遇到过比较难的技术问题是？你是如何解决的？
- 了解面试者遇到问题的思路及其逻辑
8.当你非常忙碌的时候，你如何继续完成任务？
- 了解面试者为了按时完成任务而用那些帮助自己规划好自己的时间并保持专注的技巧。
web前端面试题(及答案)
web前端面试题(及答案)编辑整理：尊敬的读者朋友们：这里是精品文档编辑中心，本文档内容是由我和我的同事精心编辑整理后发布的，发布之前我们对文中内容进行仔细校对，但是难免会有疏漏的地方，但是任然希望（web前端面试题(及答案)）的内容能够给您的工作和学习带来便利。
同时也真诚的希望收到您的建议和反馈，这将是我们进步的源泉，前进的动力。
本文可编辑可修改，如果觉得对您有帮助请收藏以便随时查阅，最后祝您生活愉快业绩进步，以下为web前端面试题(及答案)的全部内容。
1、常用那几种浏览器测试?有哪些内核（Layout Engine）？答：（Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。
(Q2）内核：Trident，Gecko,Presto，Webkit。
2、说下行内元素和块级元素的区别?行内块元素的兼容性使用？（IE8 以下）答:（Q1）行内元素:会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line—height)，margin上下无效，padding上下无效。
块级元素：各占据一行,垂直方向排列.从新行开始结束接着一个断行。
（Q2）兼容性：display：inline-block；＊display:inline；*zoom:1；3、清除浮动有哪些方式？比较好的方式是哪一种？答：(Q1)（1）父级div定义height。
(2）结尾处加空div标签clear：both.（3）父级div定义伪类：after和zoom.（4）父级div定义overflow：hidden.（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度.(7）父级div定义display:table。
（8)结尾处加br标签clear:both。
(Q2）比较好的是第3种方式，好多网站都这么用。
4、box-sizing常用的属性有哪些？分别有什么作用?答：（Q1)box-sizing: content-box|border—box｜inherit；（Q2）content—box:宽度和高度分别应用到元素的内容框。
2021年web前端面试题及答案
1.WEB原则以及W3C原则是什么？标签闭合、标签小写、不乱嵌套、使用外链css和js、构造行为体现分离。
1.1div中img怎么水平和垂直居中？Div{width:200px；height:200px;text-align:center；font-size:0；overflow：hidden;line-height:200px；_line-height:178px;/*兼容IE6*/ }Img{ vertical-align:middle;}1.2 HTML中没有单位属性是？z-index:1；zoom:1；font-weight:200;1.3 form表单中input标签readonly 和disabled属性有何区别？readonly=“readonly”是只读，不可以修改，disabled=“disabled”是禁用，整个文本框是显示灰色状态form 中method是数据传递方式，action是与后台数据库提交2.xhtml和html有什么区别XHTML 元素必要被对的地嵌套，闭合，区别大小写，文档必要拥有根元素。
3.行内元素有哪些？块级元素有哪些？行内元素：a b img em br i span input select块级元素：div p h1-h6 form ul dl ol table4.行内元素和块级元素有什么区别？行内元素不可以设立宽高，不独占一行;块级元素可以设立宽高，独占一行。
5.我想让行内元素跟上面元素距离10px，加margin-top和padding-top可以吗？margin-top,padding-top无效6.CSS盒模型由什么构成？内容（width,height），border ,margin，padding6.1 简述div+css布局优势？（1）符合w3c原则；（2）兼容性好；（3）有助于搜索引擎很和谐；（4）样式调节更加以便；（5）css简洁代码，能使样式和构造分离；7.说说display属性有哪些？可以做什么？display:block行内元素转换为块级元素display:inline块级元素转换为行内元素display:inline-block转为内联元素display:box(css3新增弹性布局属性)8.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）9.哪些css属性可以继承？可继承：font-size font-family color，ul li dl dd dt;（字体属性和列表属性）不可继承：border padding margin width height ;10.css优先级算法如何计算？!important > id > class > 标签!important 比内联优先级高* 优先级就近原则，样式定义近来者为准;* 以最后载入样式为准;11.text-align:center和line-height有什么区别？text-align是水平对齐，line-height是行间。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
[HTML && CSS]1. Doctype?严格模式与混杂模式-如何触发这两种模式，区别它们有何意义?Doctype声明位于文档中最前面位置，处在标签之前。
此标签可告知浏览器文档使用哪种HTML 或XHTML 规范。
该标签可声明三种DTD 类型，分别表达严格版本、过渡版本以及基于框架HTML 文档。
当浏览器厂商开始创立与原则兼容浏览器时，她们但愿保证向后兼容性。
为了实现这一点，她们创立了两种呈现模式：原则模式和混杂模式（quirks mode）。
在原则模式中，浏览器依照规范呈现页面；在混杂模式中，页面以一种比较宽松向后兼容方式显示。
混杂模式普通模仿老式浏览器（例如Microsoft IE 4和Netscape Navigator 4）行为以防止老站点无法工作。
浏览器依照DOCTYPE与否存在以及使用哪种DTD来选取要使用呈现办法。
如果XHTML文档包括形式完整DOCTYPE，那么它普通以原则模式呈现。
对于HTML 4.01文档，包括严格DTDDOCTYPE 经常导致页面以原则模式呈现。
包括过渡DTD和URIDOCTYPE也导致页面以原则模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不对的会导致HTML和XHTML文档以混杂模式呈现。
2. 行内元素有哪些？块级元素有哪些？CSS盒模型？行内元素有：a b span I b em img input select strong块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p盒模型：margin border padding width3. CSS引入方式有哪些?link和@import区别是?两者区别：加载顺序差别。
当一种页面被加载时候，link引用CSS会同步被加载，而@import引用CSS 会等到页面所有被下载完再被加载。
@import可以在css中再次引入其她样式表，例如可以创立一种主样式表，在主样式表中再引入其她样式表，如：main.css———————-@import “sub1.css”;@import “sub2.css”;这样做有一种缺陷，会对网站服务器产生过多HTTP祈求，此前是一种文献，而当前却是两个或更多文献了，服务器压力增大，浏览量大网站还是谨慎使用。
4. CSS选取符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？可以继承有：font-size font-family color不可继承普通有：border padding margin background-color width height等============================使用!important可以变化优先级别为最高，另一方面是style对象，然后是id > class >tag ，此外在同级样式按照声明顺序后浮现样式具备高优先级。
5. 前端页面由哪三层构成，分别是什么？作用是什么？网页提成三个层次，即：构造层、表达层、行为层。
网页构造层（structural layer）由HTML 或XHTML 之类标记语言负责创立。
标签，也就是那些出当前尖括号里单词，对网页内容语义含义做出了描述，但这些标签不包括任何关于如何显示关于内容信息。
例如，P 标签表达了这样一种语义：“这是一种文本段。
”网页表达层（presentation layer）由CSS 负责创立。
CSS 对“如何显示关于内容”问题做出了回答。
网页行为层（behavior layer）负责回答“内容应当如何对事件做出反映”这一问题。
这是Javascript 语言和DOM 主宰领域。
6. css基本语句构成是？选取器{属性1:值1;属性2:值2;……}7. 你做页面在哪些流览器测试过？这些浏览器内核分别是什么?经常遇到浏览器兼容性有哪些？怎么会浮现？解决办法是什么？IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT非IE内核浏览器：firefox opera safari chrome1.就是ie6双倍边距问题，在使用了float状况下，不论是向左还是向右都会浮现双倍，最简朴解决办法就是用display:inline;加到css里面去。
2.文字自身大小不兼容。
同样是font-size:14px宋体文字，在不同浏览器下占空间是不同样，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不同样了。
解决方案：给文字设定line-height 。
保证所有文字均有默认line-height 值。
这点很重要，在高度上咱们不能容忍1px 差别。
3.ff下容器高度限定，即容器定义了height之后，容器边框外形就拟定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。
因此不要容易给容器定义height。
4.还讨论内容撑破容器问题，横向上。
如果float 容器未定义宽度，ff下内容会尽量撑开容器宽度，ie下则会优先考虑内容折行。
故，内容也许撑破浮动容器需要定义width。
5.浮动清除，ff下不清除浮动是不行。
6.mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。
padding也会浮现类似问题，都是ie6下特产，该类bug 浮现状况较为复杂，远不只这一种浮现条件，还没系统整顿。
解决方案：外层元素设定border 或设定float。
7.吞吃现象，限于篇幅，我就不展开了。
还是ie6，上下两个div，上面div设立背景，却发现下面没有设立背景div 也有了背景，这就是吞吃现象。
相应上面背景吞吃现象，尚有滚动下边框缺失现象。
解决方案：使用zoom:1。
这个zoom好象是专门为解决ie6 bug而生。
8.注释也能产生bug~~~“多余来一只猪。
”这是前人总结这个bug使用文案，ie6这个bug 下，人们会在页面看到猪字浮现两遍，重复内容量因注释多少而变。
解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”办法写注释。
9.<li/>里加float <div/>，这是一种典型，棘手兼容问题，但愿引起人们正视，给li 不同属性会有不同解释效果，ff下解释稍可理解，ie6下解释会让你摸不着头脑，由于问题复杂性，将另起一文专门讨论该问题。
在《ul使专心得》一文里有有关成果，却没给出问题解决过程。
10.img下留白。
解决方案：给img设定display:block。
11.失去line-height。
<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字line-height 效果消失了。
，因素是<img />这个inline-block元素和inline元素写在一起了。
解决方案：让img 和文字都float起来。
12.链接hover状态。
a:hover img{width:300px} 咱们想让鼠标hover时，链接里包括图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
13.非链接hover状态。
div:hover{} 这样样式ie6是不认，在ie7、ff下才有效果。
14.ie下overflow:hidden对其下绝对层position:absolute或者相对层position:relative无效。
解决方案：给overflow:hidden加position:relative或者position:absolute。
另，ie6支持overflow-x或者overflow-y特性，ie7、ff不支持。
15.ie6下严重bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，虽然你给了宽度。
float元素如果作为布局用或复杂容器，都要给个宽度。
16.ie6下bug，绝对定位div下包括相对定位div，如果给内层相对定位div高度height详细值，内层相对层将具备100%width值，外层绝对层将被撑大。
解决方案给内层相对层float属性。
17. ie6下bug，<head></head>内有<base target=”_blank”/>状况下，position:relative层下float 层内文字无法选中。
18. 终于来了个ff缺陷。
width:100%这个东西在ie里用很以便，会向上逐级搜索width值，忽视浮动层影响，ff下搜索至浮动层结束，如此，只能给中间所有浮动层加width:100%才行，累啊。
opera这点倒学乖了跟了ie。
8. 如何居中一种浮动元素?设立容器浮动方式为相对定位，然后拟定容器宽高，例如宽500 高300 层，然后设立层外边距。
div{Width:500px;height:300px;Margin：-150px 0 0 -250px;position:relative;left:50%;top:50%;}9. 有无关注HTML5和CSS3?如有请简朴说某些您对它们理解状况！HTML5标签变化：<header>，<footer>，<dialog>，<aside>，<figure>，<section> 等IE9以上开始支持CSS3实现圆角，阴影，对文字加特效，增长了更多CSS选取器。
10. 如果让你来制作一种访问量很高大型网站，你会如何来管理所有CSS文献、JS与图片？11. 你对前端界面工程师这个职位是怎么样理解？它前景会怎么样？.clear {clear：both;display：block;overflow：hidden;visibility：hidden;width：0;height：0;}.clearfix:after {clear：both;content：'.';display：block;visibility：hidden;height：0;}.clearfix {display：inline-block;}* html .clearfix {height：1%;}.clearfix {display：block;}.clearfix{*zoom:1;}.clearfix:after{content:'\20';display:block;height:0;clear:both;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/* Hides from IE-mac \*/* html .clearfix{height:1%;}.clearfix{display:block;}/* End hide from IE-mac */这个clearfixCSS使用了after这个伪对象，它将在应用clearfix元素结尾添加content中内容。