史上最全的web前端面试题汇总及答案3

小咪咪 2022-02-18 08:57 191阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

前段时间在github上看到一篇没有答案面试题的文章，小丸子经过多方的看书查资料，总结了一些问题的答案出来，希望能给大家带来帮助，有问题的地方，欢迎指正欢迎交流，前端面试题会持续更新，欢迎关注。

## HTML&CSS ##

> title与h1的区别、b与strong的区别、i与em的区别？

**title与h1的区别**  
定义：title是网站标题，h1是文章主题  
作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的。

**b与strong的区别**  
定义：b(bold)是实体标签，用来给文字加粗，而strong是逻辑标签，作用是加强字符语气。  
区别：b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、评测文章中的产品名称、文章的导言； 而strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通过CSS添加样式，使用别的样式强调。  
**建议**：为了符合CSS3的规范，b应尽量少用而改用strong

**i与em的区别**  
定义：i(italic)是实体标签，用来使字符倾斜，而em(emphasis)是逻辑标签，作用是强调文本内容  
**区别：**i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；而em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。  
**建议**：为了符合CSS3的规范，i应尽量少用而改用em

> 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

> 请解释一下CSS3的Flexbox（弹性盒布局模型），以及适用场景

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。在布局上有了比以前更加灵活的空间。  
[Flexbox——快速布局神器][Flexbox]

> 用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
    }

> 一个满屏品字布局如何设计

简单的方式：  
上面的div宽100%，  
下面的两个div分别宽50%，  
然后用float或者inline使其不换行即可

> 浏览器是怎样解析CSS选择器的？

样式系统从关键选择器开始匹配，然后从右左移查找规则选择器的祖先元素。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。Firefox 称这种查找方式为 keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

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

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）

双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。  
想让插入的内容出现在其它内容前，使用::before，否者，使用::after

在代码顺序上，::after生成的内容也比::before生成的内容靠后。  
如果按堆栈视角，::after生成的内容会在::before生成的内容之上

> 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

> li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

> absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：  
1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；  
2、否则,则由这个祖先元素的 padding box 构成。如果都找不到，则为 initial containing block。

补充：  
① static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）  
②absolute: 向上找最近的定位为absolute/relative的元素  
③fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block

> CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后有什么区别？

当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。

在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。

在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

> position跟display、margin、collapse、overflow、float这些特性相互叠加之后会怎么样？

1、如果元素的display: none，那么position，float不起作用。  
2、如果元素拥有position: absolute或position: fixed属性，那么float不起作用。  
3、如果元素的float属性值不是none，元素会脱离文档流，根据float属性值来显示。  
4、设置了float、position: absolute、display: inline-block属性的元素，margin不会和垂直方向上的其他元素的margin发生外边距合并。  
5、设置了overflow: hidden属性的元素，不和它的子元素发生margin合并。  
[position跟display、margin、collapse、overflow、float这些特性相互叠加之后会怎么样？][position_display_margin_collapse_overflow_float]

> 移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局

@media screen and (min-width: 400px) and (max-width: 700px) \{ … \}  
上面这段CSS代码意思是：当页面小于700px大于400px的时候执行它下面括号中的CSS.这个应该没有太大疑问。

> CSS优化，提高性能的方法有哪些？

1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。

2，减少css嵌套，最好不要套三层以上。

3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。

4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。

5，减少通配符\*或者类似\[hidden="true"\]这类选择器的使用，挨个查找所有...这性能能好吗？当然重置样式这些必须的东西是不能少的。

7，巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。

8，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里，这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。

9，不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。

10，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的朋友可以选择normolize.css

11，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种十分实用的技巧，极大减少了http请求。

当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十分好的)，GZIP压缩，Gzip是一种流行的文件压缩算法，详细做法可以谷歌或者百度。  
详细文章：[CSS提高性能的方法][CSS]

> 页面可见性（Page Visibility）API 可以有哪些用途？

当可见性发生了改变的时候，会触发 visibilityState事件，通过给事件注册一个监听函数，那么就可以进行一些操作：即能够在页面切换到不可见状态时暂停执行一些不必要的操作，以减少资源的浪费。

比如当前页面在播放动画，检测到用户切换了或者最小化了该窗口，则自动停止；  
有的程序会及时刷新访问界面（比如篮球比赛时的比分更新），若窗口关闭，他也会停止刷新；

> 元素竖向的百分比设定是相对于容器的高度吗？

对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的是父容器的宽度，而不是高度,请自行验证。

> 全屏滚动的原理是什么？用到了CSS的哪些属性？

图片轮播原理，只不过图片宽高100%、超出隐藏、调整比例适应屏幕大小。

> 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式,如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？

基本原理: 媒体查询 @media

兼容IE可以使用JS辅助一下来解决

> 网页验证码是干嘛的，是为了解决什么安全问题?

区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水；  
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试；

> 视差滚动效果，如何给每页做不同的动画？

[视差滚动效果原理解析与功能实现][Link 1]

> 如何修改chrome记住密码后自动填充表单的黄色背景？

可以通过input : -webkit-autofill来进行修改！

input:-webkit-autofill {
    background-color: #FAFFBD;
    background-image: none;
    color: #000;
    }

> 你对line-height是怎样理解的？

css中起高度作用的是height以及line-height了吧！line-height是行高，height就是高，通常height是对于某个框架或者图片来说，line-height用于文字，如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用，利用行高还可以实现单行或多行或图片垂直居中实现上的应用。  
[CSS行高的一些深入理解和应用][CSS 1]

> 设置元素浮动后，该元素的display值是多少?

无论行内元素还是块元素，被设置浮动之后，display属性值都变为block。

> 怎么让Chrome支持小于12px 的文字？

1、用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。  
2、使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。  
3、继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，做到最大兼容考虑。  
4、可以使用到 css3里的一个属性：transform:scale()  
[CSS3 transform 属性介绍][CSS3 transform]

> 让页面的里的字体变清晰，变细用CSS怎么做？

CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。  
`webkit-font-smoothing:antialiased`

> font-style属性可以给它赋值为oblique,oblique是什么意思？

**可以理解为Oblique是让没有斜体属性的文字倾斜。**  
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果。

> position:fixed在安卓下无效怎么处理？

在head头中加入下面的代码  
`<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>`

> display:inline-block什么时候会显示间隙？（携程）

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

> 有一个高度自适应的div，里面有两个div，一个的高度是100px，希望另一个填满剩下的高度。

box-sizing方案 和 absolute position方案  
[有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。][div_div_100px]

> png/jpg/gif这些图片格式解释一下，分别什么时候用，有没有了解过webp?

**PNG**：这是三种中质量最好的一种，保存图像是静态图，可以保留32位色，也能保留透明与半透明区域，但是很多网站不支持PNG上传  
**JPG**：这是目前使用最广泛的格式之一，因为其高质量的压缩率导致的图片大小减少，而且也支持32位色彩，因此被广泛使用，一般情况下，任何支持图片的地方都支持jpg，也为静态图，但缺点是不支持透明区域  
**GIF**：这也是目前使用最广泛的格式之一，和jpg相比，有以下不同：颜色数只支持256色，支持透明区域，不支持半透明区域，可以保存为动态图

**webp**是谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。  
但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。

> style标签写在body后与body前有什么区别？

写在head标签中利于浏览器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）  
写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

## Javascript ##

介绍js有哪些内置对象？

**Object 是 JavaScript 中所有对象的父对象**  
**数据封装类对象**：Object、Array、Boolean、Number 和 String  
**其他对象**：Function、Arguments、Math、Date、RegExp、Error

> 说出一些写Javascript的基本规范

1.不要在同一行声明多个变量。  
2.请使用 ===/!==来比较true/false或者数值  
3.使用对象字面量替代new Array这种形式  
4.不要使用全局函数。  
5.Switch语句必须带有default分支  
6.函数不应该有时候有返回值，有时候没有返回值。  
7.For循环必须使用大括号  
8.If语句必须使用大括号  
9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。  
10.命名规则中构造器函数首字母大写，如function Person()\{\}  
11.写注释。

> Javascript有几种类型的值？你能画一下他们的内存图吗？

数据类型分为两大类：堆和栈  
栈：原始数据类型（Undefined，Null，Boolean，Number、String）  
堆：引用数据类型（对象、数组和函数）

两种类型的区别是：存储位置不同；原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；  
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

![Image 1][]

> JavaScript创建对象的几种方式？

1.对象字面量的方式p＝｛｝；  
2.用function来模拟无参的构造函数，再定义属性；  
3.用function模拟构造函数，利用this；  
4.利用工厂方式（内置对象Object）；  
5.利用原型方式来创建；  
6.混合方式来创建。

> JavaScript作用链域

当代码在一个环境中执行时，会创建变量对象的一个作用域链。如果是个函数，则将其活动对象作为变量对象。活动对象在最开始只包含一个arguments对象。而下一个变量对象则来自下一个包含环境。如此一直延续到全局执行环境，这种组织形式即为作用域链。内部函数可访问外部变量，外部变量无法访问内部函数。注意：js没有块级作用域，若要形成块级作用域，可通过（function（）｛｝）（）；立即执行的形式实现。  
[JavaScript 开发进阶：理解 JavaScript 作用域和作用域链][JavaScript _ JavaScript]

> \["1","2","3"\].map（parseint）答案是多少？

\[1, NaN, NaN\]  
parseInt() 函数可解析一个字符串，并返回一个整数。需要两个参数 (val, radix)，  
其中 radix 表示解析时用的基数。  
map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。  
[\["1","2","3"\].map（parseint）][1_2_3_.map_parseint]

> 算出字符串中出现次数最多的字符是什么，出现了多少次

var str = "adadfdfseffserfefsefseeffffftsdg";
    var maxLength = 0;
    var result = "";
    while(str != ''){
        oldStr = str;
        str = str.replace(new RegExp(str.charAt(0),"g"),"");
        if( oldStr.length-str.length > maxLength){
            maxLength = oldStr.length-str.length;
            result = getStr + "=" + maxLength;
        }
    }
    alert(result);

> 编写一个方法 求一个字符串的字节长度

> JavaScript中有一个函数，执行对象查找的时候，永远不会去查找原型，这个函数是？

Object.hasOwnProperty(proName)  
其中参数object是必选项，一个对象的实例。  
proName是必选项，一个属性名称的字符串值。  
hasOwnProperty 函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

> 页面编码和被请求资源的编码如果不一致怎么处理？

a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的 ，那就需要在引入的时候加上  
`<script src="http://www.xxx.com/test.js"charset="utf-8"></script>`  
同理，如果你的页面是utf-8的，引入的js是gbk的，那么就需要加上charset="gbk"

> 模块化开发怎么做？

**模块化就是将js文件按照功能分离，根据需求引入不同的文件中。源于服务器端。**  
在ES6中提出用工具babel,webpack打包成浏览器识别的js来实现模块化开发，不同的框架和库的模块，有很多功能类似比如Node.js中的模块，Angular.js中的模块，React.js中的模块，只要接口Api可以对的上，那么也可以通用。

## 其他 ##

> 网站重构的理解？

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

**对于传统的网站来说重构通常是：**  
表格(table)布局改为DIV+CSS  
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)  
对于移动平台的优化  
针对于SEO进行优化

**深层次的网站重构应该考虑的方面**  
减少代码间的耦合  
让代码保持弹性  
严格按规范编写代码  
设计可扩展的API  
代替旧有的框架、语言(如VB)  
增强用户体验

通常来说对于速度的优化也包含在重构中  
压缩JS、CSS、image等前端资源(通常是由服务器来解决)  
程序的性能优化(如数据读写)  
采用CDN来加速资源加载  
对于JS DOM的优化  
HTTP服务器的文件缓存

> AMD和CMD 规范的区别？

AMD规范是 RequireJS 在推广过程中对模块定义的规范化产出的，而CMD规范是SeaJS 在推广过程中对模块定义的规范化产出的。这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。  
主要区别总结为以下三条  
1、CMD推崇依赖就近，而AMD推崇依赖前置  
2、执行顺序上： CMD是延迟执行的，而AMD是提前执行的。  
3、api设计角度上：AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。

> 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

分为4个步骤：  
①当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。  
②浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。  
③一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。  
④此时，Web服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了我们关注的前端模块，简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM。

> WEB应用从服务器主动推送Data到客户端有那些方式？

JavaScript数据推送  
Commet：基于HTTP长连接的服务器推送技术  
基于WebSocket的推送方案  
SSE（Server-Send Event）：服务器推送数据新方式

作者：樱桃小丸子儿  
链接：https://www.jianshu.com/p/2273c8d2ef02

[Fundebug]: https://www.fundebug.com/
[Flexbox]: https://link.jianshu.com?t=http://www.w3cplus.com/css3/flexbox-basics.html
[position_display_margin_collapse_overflow_float]: https://link.jianshu.com?t=http://www.cnblogs.com/jackyWHJ/p/3756087.html
[CSS]: https://link.jianshu.com?t=http://www.jb51.net/css/488485.html
[Link 1]: https://link.jianshu.com?t=http://www.wufangbo.com/shi-jue-gun-dong-yuan-li/
[CSS 1]: https://link.jianshu.com?t=http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/
[CSS3 transform]: https://link.jianshu.com?t=http://www.w3chtml.com/css3/properties/2d-transform/transform.html
[div_div_100px]: https://link.jianshu.com?t=http://www.cnblogs.com/loushiqiang/p/6739285.html
[Image 1]: 
[JavaScript _ JavaScript]: https://link.jianshu.com?t=http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html
[1_2_3_.map_parseint]: https://link.jianshu.com?t=http://www.cnblogs.com/Candybunny/p/5627905.html