web前端工程师面经（笔试 / 面试问题）

最近面临着毕业找工作，自己也是一个小白什么都不懂，所以在此记录一些自己在面试过程中面试官所提问的问题，同时也分享给大家。（不喜勿喷）

1.谈一下CSS的盒子模型。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2.如果要设置盒子的边框应该怎么写语句？

可以通过border来设置，例如：

border：1px solid #fff；

第一个值代表边框的像素；第二值代表边框是虚线还是实线或者其他的属性值，在此solid是代表实线，dashed代表虚线；第三个值代表边框的颜色。

3.padding内边距是否可以为负值？

！！！！这个问题我当时竟然回答了可以为负值，现在想想都可笑。
答案是不能为负值的。padding是不能有负值出现的，出现的话就相当于把那个属性给取消了。padding最小为0。

4.谈一谈CSS的权重。

权重值越大，优先级越高。

选择器	权重值
！important	无限大
行间样式	1000
id选择器	100
类选择器 属性选择器 伪类选择器	10
标签 伪元素	1
通配符	0

5.Doctype有什么作用？严格模式与混杂模式如何区别？它们有何意义？

作用：<!DOCTYPE>声明叫做文件类型定义（DTD），位于HTML文档中的第一行，处于 标签之前，它的作用是为了告诉浏览器该文件的类型，让浏览器解析器知道应该用哪个规范来解析文档。

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。

意义：混杂模式服务于陈旧的网站，严格模式服务于根据W3C标准制定的网站。为了防止陈旧的网站显示受到影响，现在普遍的浏览器都提供了这两种模式。

6.如何在DOM对象与jQuery对象之间做转换？

DOM对象是HTML文档中的页面元素，而jQuery对象是通过jQuery包装DOM对象后产生的对象。

DOM对象转jQuery对象：在导入了jQuery这个库之后，可以通过 $() 方法获取页面DOM元素返回一个jQuery对象。例如：

var jQuery_obj = $('#box')		// 获取id名为box的DOM元素，此时返回的是jQuery对象

jQuery对象转DOM对象：jQuery对象本身提供了一个 get(index) 方法,可以得到相应的DOM对象。例如：

var jQuery_obj = $('#box')
var DOM_obj = jQuery_obj.get(0) 			//  相应的DOM对象

7.在浏览器输入URL 会发生什么？

1. 进行DNS的域名解析
2. 建立TCP连接
3. 发送一个http请求
4. 服务器处理相关的请求
5. 返回响应的结果
6. 关闭TCP的连接
7. 浏览器解析HTML
8. 浏览器进行布局渲染

8.GET和POST请求方式有何区别？

在平时使用这两种请求方式的时候，可以很直观的发现，GET请求方式把参数包含在URL中，而POST通过request body来传递参数。

参考W3C对于GET和POST的描述，可以知道：

1. GET请求在URL中传送的参数是有长度限制的，而POST没有。
2. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
3. 由于GET的参数直接暴露在URL上，所以相对来说，GET的安全性没有POST高，不能用来传递敏感信息。

GET和POST还有一个重大区别，简单的说：GET产生一个TCP数据包；POST产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
此处参考自：https://www.cnblogs.com/logsharing/p/8448446.html

9.position的值有哪些？它们各自对应的意思是什么。

1. relative：表示相对定位，相对于自己本身所在正常文档流中的位置进行定位。
2. absolute：表示绝对定位，相对于最近一级的static的父元素定位。
3. fixed：用于生成绝对定位，相对于浏览器窗口或frame进行定位。
4. static：默认值，没有定位，元素出现在正常的文档流中。
5. sticky：生成黏性定位的元素，容器的位置根据正常文档流计算得出。

10.请说明position：absolute和float属性的异同。

共同点是对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点是float仍可以占据位置，不会覆盖在另一个BFC（Block Formatting Context 块级格式化上下文）区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素，即遮盖现象。

11.CSS的哪些样式可以继承？哪些不可以继承？

可继承的样式有：font-size, font-family, color
不可继承的样式有：border, padding, margin, width, height

12.如何实现一个元素的垂直居中，说说你知道的所有方案。

1. 父元素固定宽高，利用定位及设置子元素margin值为自身的50%。
2. 父元素固定宽高，子元素设置 position：absolute；margin：auto 来平均分配margin。
3. 利用CSS3的属性transform，子元素设置position：absolute；left：50%；top：50%；transform：translate(-50%，-50%)即可。
4. 将父元素设置成display：table，将子元素设置为单元格 display：table-cell。
5. 弹性布局display：flex。设置align-item：center；justify-content：center。

13.谈谈对 setTimeout、Promise、Async/Await 的理解。

setTimeout
setTimeout是一个定时器，可以延迟一定的时间执行函数，属于宏任务，在JavaScript事件循环中，执行优先级最低。在JavaScrip中，优先执行同步任务，当遇到setTimeout时，将其放入异步队列中，跳过继续执行同步任务。当同步任务队列执行完毕，再拿到异步队列中的setTimeout，输出settimeout。

Promise

Promise本身是同步的立即执行函数， 当在executor中执行resolve或者reject的时候, 此时是异步操作， 会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行，打印p的时候，是打印的返回结果，一个Promise实例。resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。这个时候可以再运行一段代码查看结果。
原文链接：https://blog.csdn.net/m0_37595954/article/details/103493367

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')

//输出结果：script start->promise1->promise1 end->script end->promise2->settimeout

解析一下上面的代码

1. 同步执行script start
2. 因为Promise本身是同步的立即执行函数，所以输出promise1，resolve()的作用是改变Promise对象的状态，并不会阻断函数的执行，所以会执行输出promise1 end。then方法因为是异步回调微任务，所以会放入到微任务队列中。跳出执行
3. 遇到setTimeout，放入宏任务队列，跳过执行。
4. 输出script end，同步任务队列执行完毕，然后去微任务队列查看有无执行函数，获得promise1函数的then方法，输出promise2，此时微任务队列为空，然后去宏任务队列查看有无执行方法，输出settimeout。

Async/Await

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。可以运行下面的代码查看结果。
原文链接：https://blog.csdn.net/m0_37595954/article/details/103493367

async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
 
console.log('script start');
async1();
console.log('script end')
 
//输出结果：script start->async1 start->async2->script end->async1 end

解析一下上面的代码：

1. 同步执行，输出script start
2. 执行async1()函数，输出async1 start，这是遇到await语句，执行await方法，但是后面的语句放入微任务队列。
3. 执行async2()函数，输出async2
4. 继续执行同步队列，输出script end。此时同步队列执行完毕，微任务队列查看有无执行函数或方法，输出async1 end
5. 此时微任务队列为空，然后去宏任务队列查看有无执行方法。

总的来说

settimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行； promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行；async函数表示函数里面可能会有异步方法，await后面跟一个表达式，async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行。

14.谈谈对HTML5语义化的理解。

语义化，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。

HTML5 语义元素

HTML5常用语义化标签

1. <header>

<header> 标签可以理解为内容的头部，一般用来定义标题，logo，目录部分或者页眉等。
一个页面中<header>的个数没有限制，可以为每个内容块添加一个<header>。

2. <nav>

<nav> 元素定义导航栏，链接集合等。
<nav> 元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于 <nav> 元素中！

3. <main>

<main>定义文章的主要内容
<main> 标签在一份文档中是唯一的，其后代元素常常包括<article>

4. <article>

<article>定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；

5. <section>

<section> 元素定义文档中的节。
根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，通常具有标题”。

5. <aside>

<aside> 元素页面主内容之外的某些内容（比如侧栏）。通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；aside 内容应该与周围内容相关。

6. <footer>

页脚，通常包含作者、版权信息或者相关链接等；可以在一个文档中使用多个 <footer> 元素。

其余HTML5 新语义元素。

标签	描述
<details>	定义用户能够查看或隐藏的额外细节。
<figcaption>	定 义 <figure> 元素的标题。
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等。
<mark>	定义重要的或强调的文本。
<summary>	定义 元素的可见标题。
<time>	定义日期/时间。

15.你知道的浏览器兼容问题有哪些？以及对应的解决方法。

1. 图片问题（IE6及其更低的版本）
   png24 位的图片在 IE6 浏览器上图片不透明，会出现背景。解决方案是改成 png8 格式，也可以引用一段脚本进行处理。
2. 浏览器默认的margin和padding不同
   解决方案是用一个全局的*{margin：0；padding：0；} 来统一它们。
3. 3像素bug问题（IE6及其更低的版本）
   当相邻的两个元素，一个是浮动的，另一个非浮动，那么在IE6 下面将会产生3像素bug。
   解决方案：让另一个元素也浮动，或者给浮动的元素添加 _margin-right：-3px;（下划线 _ 是IE6及更低版本的hack，只会被IE6识别）。
4. 双边距bug问题（IE6及其更低的版本）
   双边距bug是指在块属性标签 float 后又有横行的 margin（margin-left 或者 margin-right）时，在 IE6 中显示的 margin 比设置的大。
   解决方案：在样式控制中加入 _display：inline；将其转换为行内属性。因为元素是浮动的，所以这么设置不会影响元素在浏览器的显示。
5. Firefox浏览器点击链接会出现虚线框
   Firefox浏览器在点击链接时，会自动在元素周围添加一个虚线边框。
   解决方案：去掉虚线框，可以给a标签设置 outline 属性，例如：

a{outline:none;}
a:focus{outline:none;}

16.你知道的性能优化的方法有哪些？

1. 减少 HTTP 请求次数，控制CSS Sprite、JavaScript 与 CSS 源码、图片的大写，使用网页Gzip、CDN托管、data缓存、图片服务器。
2. 通过前端模板 JavaScript 和数据，减少由于 HTML 标签导致的带宽浪费，在前端用变量保存 Ajax 请求结果，每次操作本地变量时，不用请求，减少请求次数。
3. 用 innerHTML 代替 DOM 操作，减少 DOM操作次数，优化 JavaScript 性能。
4. 当需要设置的样式很多时，设置 className 而不是直接操作 Style，如margin-top margin-left 合为margin。
5. 少用全局变量，缓存 DOM 节点查找的结果，减少 I/O 读取操作。
6. 避免使用 CSS 表达式，它又称为动态属性。
7. 预加载图片，将样式表放在顶部，将脚本放在底部，加上时间戳。
8. 避免在页面的主体布局中使用表（table），表要在其中的内容完全下载之后才会显示出来，显示的速度比 DIV+CSS 布局慢。

17.HTML5有哪些新特性？移除了哪些元素？

新特性

1. 拖放（Drag and drop）API
2. 语义化更好的内容标签（header, nav, section, article, aside, footer）
3. 音频、视频（audio， video）API
4. 画布（Canvas）API
5. 地理（Geolocation）API
6. 本地离线存储（localStorage），即长期存储数据，浏览器关闭数据不会丢失
7. 会话存储（sessionStorage），即数据在浏览器关闭后会丢失
8. 表单控件包括 calendar, date, time, email, url, search
9. 新的技术包括 webworker, websocket, Geolocation

移除的元素

1. 纯表现的元素，包括 basefont, big, center, font, s, strike, tt, u
2. 对可用性产生负面影响的元素，包括 frame, frameset, Noframs

18.CSS3新特性有哪些？

1. 圆角（border-radius）
2. 阴影（box-shadow）
3. 对文字加特性（text-shadow）
4. 线性渐变（gradient）
5. 变换（transform），如transform：rotate（9deg）scale（0.85，0.90）translate（0px，-30px）skew（-9deg，0deg）； // 旋转、缩放、定位、倾斜
6. 更多的css选择器
7. 多背景设置
8. 色彩模式，如 rgba
9. 伪元素 ::selection
10. 媒体查询
11. 多栏布局
12. 图片边框（border-image）