WEB前端面试题

2023-03-10 07:07:02html-css014

WEB前端面试题,第1张

第二章面试题基础篇

2.1 HTML面试题

面试题：行内元素有哪些？块级元素有哪些？空(void)元素有那些？

面试题：页面导入样式时，使用link和@import有什么区别？

面试题：title与h1的区别、b与strong的区别、i与em的区别？

面试题：img标签的title和alt有什么区别？

面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

2.2 CSS面试题

面试题：css背景纹路

面试题：介绍一下CSS的盒子模型

面试题：CSS选择符有哪些？哪些属性可以继承？

面试题：CSS优先级算法如何计算？

面试题：用CSS画一个三角形

面试题：一个盒子不给宽度和高度如何水平垂直居中？

面试题：display有哪些值？说明他们的作用。

面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

面试题：清除浮动有哪些方式？

面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？

面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

面试题：什么是CSS reset？

面试题：css sprite是什么,有什么优缺点

面试题：display: none与visibility: hidden的区别

面试题：position有哪些值?有什么作用? 【特别多公司问】

面试题：line-height和height有什么区别？

面试题：opacity 和 rgba区别

2.3 JavaScript基础面试题

面试题：延迟加载JS有哪些方式？

面试题：JS数据类型有哪些？

面试题：null和undefined的区别

面试题：JS数据类型考题

面试题：==和===有什么不同

面试题：JS微任务和宏任务

面试题：JS作用域考题

面试题：JS对象考题

面试题：JS作用域+this指向+原型考题

面试题：JS判断变量是不是数组，你能写出哪些方法？

面试题：slice是干嘛的、splice是否会改变原数组

面试题：JS数组去重

面试题：找出多维数组最大值

面试题：给字符串新增方法实现功能

面试题：找出字符串出现最多次数的字符以及次数

2.4 真正移动端 —— H5/C3面试题

面试题：什么是语义化标签

面试题：::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

面试题：如何关闭iOS键盘首字母自动大写

面试题：怎么让Chrome支持小于12px 的文字？

面试题：rem和em有什么样区别

面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

面试题：webkit表单输入框placeholder的颜色值能改变吗？

面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

面试题：禁止ios和android用户选中文字

面试题：自适应 [淘宝无线适配]

面试题：响应式

第三章面试题进阶篇

3.1 JavaScript进阶面试题

面试题：new操作符具体做了什么

面试题：闭包【必须会】

面试题：原型链【必须会】

面试题： JS继承有哪些方式

面试题：说一下call、apply、bind区别

面试题：sort背后原理是什么？

面试题：深拷贝和浅拷贝

面试题：localstorage、sessionstorage、cookie的区别

3.2 ES6面试题

面试题：var、let、const区别

面试题：作用域考题

面试题：将下列对象进行合并

面试题：箭头函数和普通函数有什么区别？

面试题：Promise有几种状态

面试题：find和filter的区别【大厂】

面试题：some和every的区别【大厂】

3.3 webpack面试题

面试题：webpack插件

3.4 Git面试题

面试题：git常用命令

面试题：解决冲突

面试题：GitFlow

第四章面试题框架篇

4.1 区分初中高级的 —— Vue面试题

面试题：Vue2.x 生命周期有哪些？

1.系统自带八个

2.当一旦进入到某个组件会执行哪些生命周期

3.$el和$data在哪个阶段有

4.如果使用keep-alive会多俩个生命周期

5.如果加入keep-alive第一次进入组件会执行哪些生命周期

6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期

面试题：谈谈你对keep-alive的了解

面试题：v-if和v-show区别

面试题：v-if和v-for优先级 2.x

面试题：ref是什么？

面试题：nextTick是什么？

面试题：Vue中如何做样式穿透

面试题：scoped原理

面试题：Vuex是单向数据流还是双向数据流？

面试题：讲一下MVVM

面试题：双向绑定原理

面试题：什么是虚拟DOM

面试题：key是干什么？

面试题：diff算法

面试题：Vue组件传值

面试题：props和data优先级谁高？

面试题：computed、methods、watch有什么区别？

面试题：Vuex

面试题：Vue路由

面试题：Vue项目打包后出现空白页

4.2 微信小程序面试题

面试题：如何自定义头部？

面试题：如何自定义底部？

4.3 uni-app面试题

面试题：生命周期

面试题：条件编译

第五章面试题性能优化篇

今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

1.渐进增强与优雅降级

渐进增强

并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。

优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。

这两种思想的区别在于：

1.渐进增强是向上兼容，优雅降级是向下兼容

2.渐进增强是从简单到复杂，优雅降级是从复杂到简单

3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)

2.DOCTYPE

作用

DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML

的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。

DOCTYPE是用来声明文档类型和DTD

规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。

HTML5的文档类型声明：

HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML

元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：

-//W3C//DTDXHTML1.0Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

标准模式与怪异模式

怪异模式(Quirks

Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的

DOCTYPE都会触发怪异模式。

浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE

可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。

怪异模式与标准模式的主要区别：

1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:

border-box将标准盒模型转化成怪异模式下的盒模型。

2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。

3.怪异模式下，在表格中的字体样式(如font-size)不会继承。

4.怪异模式下颜色值必须使用十六进制标记法。

3.语义化

HTML5

中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS

样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。

优点

·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。

·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。

·方便其他设备解析，如盲人阅读器根据语义渲染网页。

·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

语义化标签

·定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器

·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息

·article

文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目

·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表

·section表示文档中的一个区域(或节)，比如，内容中的一个专题组

·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站

logo，搜索框(搜索框作为文档的主要内容)

·aside

表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

4.超链接伪类

:link、:visited、:active和:hover的声明顺序是怎样的?

:link表示未访问的链接状态

:visited表示已访问状态:active表示激活状态(鼠标按下):hover表示悬停状态。

推荐顺序是LVHA，即:link:visited:hover:active。理由如下：

·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link

之前声明，那么(:hover)就会被覆盖

·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited

之前声明，那么(:hover)就会被覆盖

·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active

样式，因此:active在:hover之后声明

·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和

:visited两者的顺序无所谓，互不影响。

5.CSS常见的长度单位

CSS中除了px长度单位之外，还有下面几个长度单位：

·pc六分之一英寸，1pc=12pt=1/6*1in=16px

·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px

·in一英寸，1in=2.54cm=96px

·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em

·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍

·rem当用在根元素()的font-size上面时，它代表了它的初始值

·ch代表元素所用字体font中“0”这一字形的宽度

·vh1vh相当于视口高度的1%，100vh就是视口的高度

·vw1vw相当于视口宽度的1%，100vw就是视口的宽度

·vmax视口高度vw和宽度vh两者中的最小值

·vmin视口高度vw和宽度vh两种中的最大值

·%相对于父级元素的大小来确定

参考：CSS[1]

CSSpercentage[2]

6.事件对象

冒泡与捕获

事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。

在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：

·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它

然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素

而冒泡与捕获恰恰相反：

·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它

·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素

而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。

addEventListener函数的第三个参数是个布尔值。含义：

·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件

·当布尔值是true时，表示向下捕获触发事件

不能冒泡的事件

有些事件是不会冒泡的。比如：

·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡

·focus元素获取焦点时触发

·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡

·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡

事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用

e.target属性可以获取到当前触发事件的子元素。

事件对象中的方法

·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发

·preventDefault()阻止默认事件的发生

·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div

元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用

stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡

比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click

事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。

paragraph

document.querySelector("div").addEventListener("click",(event)=>{

alert("我是div元素,我是p元素的上层元素")

//p元素的click事件没有向上冒泡，该函数不会被执行

},false)

constp=document.querySelector('p')

p.addEventListener("click",(event)=>{

alert("我是p元素上被绑定的第一个监听函数")

},false)

p.addEventListener("click",(event)=>{

alert("我是p元素上被绑定的第二个监听函数")

event.stopImmediatePropagation()

//执行stopImmediatePropagation方法，阻止click事件冒泡，并且阻止p元素上绑定的其他click
事件的事件监听函数的执行.

},false)

p.addEventListener("click",(event)=>{

alert("我是p元素上被绑定的第三个监听函数")

//该监听函数排在上个函数后面，该函数不会被执行

},false)

“

在IE浏览器中，使用e.cancelBubble=true也可以取消事件冒泡使用e.returnValue=false

也能阻止默认事件的发生。

target与currentTarget

target属性指向的是事件目标，而currentTarget属性指向的是正在处理当前事件的对象，它总是指向事件绑定的元素。而target

指向的可能不是定义时的事件目标。

例如：

div.addEventListener('click',(e)=>{

console.log(e.target,e.currentTarget)

},false)

e.target可能指向div元素，也可能指向它的子元素。而e.currentTarget总是指向div元素。

以上就是小编今天为大家分享的关于参加Web前端面试的常见面试题汇总的文章，希望本篇文章能够对正准备参加前端面试的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。

参考资料

[1]

CSSlength:#/zh-CN/docs/Web/CSS/length

[2]

CSSpercentage:

#/zh-CN/docs/Web/CSS/percentage

面试前端，面试官问你怎么解决浏览器相容性问题，你应该怎么回答？？

不同浏览器对HTML标记所具有的内外边距属性具有不同的定义。

因此如果想消除这种差距，应该在相应的CSS部分加入以下CSS程式码：

*{margin:0pxpadding:0px}

借于此，所有标记的内外边距被统一起来。

优先顺序问题：

对于同一标记属性所给定的值，有不同的优先顺序。其中优先顺序最高的是内联程式码，其实是页内CSS，接下来是浏览器预设设定，最后才是外部CSS所做的限制。

Margin不一致的问题：

当有多张图片需要排在一行时，我们通常使用“Float：Left”来实现，这样一来，浏览器就存在相容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片新增“Display：inline”项即可。

DIV居中问题：

通常我们会利用“vertical-align:middle”来实现，这对于搜狗浏览器来说，是正常的，但是对于IE浏览器来说，却并没有效果。对此，一种较好的解决方法是：将文字的行高设定与DIV一样时即可解决问题。

内外边框合并问题。通常情况下，对于两个相关DIV块，相邻时采用外边距合并原则，其结果只最两个DIV块中Margin最大值做为两个DIV之间的间距。包含的两个DIV之间的间距也遵行同样的规则。

掌握了这一规则，在利用DIV块进行布局时我们就可以做的更加得心应手。

怎么解决浏览器相容性问题

1.在大多数情况下,IE是常用的浏览器,当然IE6现在用的相对少了,自WIN7以来,IE都更新到IE9,IE9浏览模式,有一个相容性的选项,这样可以解决浏览网站的相容性

2.再个要解决浏览器的相容性,最好使用谷歌浏览器或是360浏览器,这两个浏览程式优化做得好,能解决大多数相容问题

3.解决浏览器的相容性,还要注意浏览器的外挂,很多外挂只能在IE下使用,所以,我们要注意外挂带来的相容性问题

浏览器相容性问题怎么解决

不同的浏览器有不同的HACK程式码，如IE6采用的是_属性：值，如_margin:10px表示该样式只有IE6能识别，如果感兴趣，可以上网搜寻一下，不同的浏览器相容方式不一样，如今的浏览器在相容上，你需要先了解所相容浏览器的核心属于什么型别，现在的浏览器分为三大类，即IE一类、火狐一类、以webkit为核心的一类，如搜狗、谷歌等，不同的浏览器，其相容的程式码不一致，因此针对一个样式，你需要些多种不同的相容程式码才能完成相容。

浏览器相容性问题怎么解决啊

如果是外挂崩溃建议换一个浏览器。

不过据你说的原因个人感觉是网速问题。因为视讯网站，例如youku都是将视讯分成若干段储存的。播放的时候一段一段载入。如果网速不好或者是连通率不高也许就会出现载入完事一段之后不能顺利载入第二段。

ie8浏览器相容性问题怎么解决

方法1、简单方法：通过IE8.0浏览器介面中的“相容性检视”按钮，重新开启当前地址网页便可

方法2：通过IE8.0浏览器选单中的“工具”－“相容性检视设定”来设定相容的网站。具体方法为点选“工具”－“相容性检视设定”按钮出现如下图所示的视窗，只要在“新增此网站”中新增要相容开启的网址，然后点选“新增”按钮后，就会在“已新增到相容性检视中的网站”中显示出来网址。新增好后，点选“相容性检视设定”视窗，浏览器便可自动重新整理网页并可以正常显示。

浏览器相容性问题

常见浏览器相容性问题与解决方案（面试题目）

1，浏览器相容问题一：不同浏览器的标签预设的margin和padding不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：

可以使用Normalize来清除预设样式，具体可参考文章：来，让我们谈一谈 Normalize.css

也可以使用如下程式码：

body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0padding:0}

2，浏览器相容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设定的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器相容问题）