字节跳动架构师讲解Web前端开发，啃下这份web前端大厂面试题，无谓寒冬，html前端开发培训

1.所有的标记都必须要有一个相应的结束标记

2.所有标签的元素和属性的名字都必须使用小写

3.所有的 XML 标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有<和&特殊符号用编码表示

6.给所有属性赋一个值

7.不要在注释内容中使“–”

8.图片必须有说明文字复制代码

前端面试题集锦——CSS 篇

1. 页面渲染时，dom 元素所采用的布局模型,可通过 box-sizing 进行设置。根据计算宽高的区域可分为：

content-box (W3C 标准盒模型 ) border-box (IE 盒模型) padding-box (FireFox 曾经支持 ) margin-box (浏览器未实现) Tips: 理论上是有上面 4 种盒子，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box；

2. ie 盒模型算上 border、padding 及自身（不算 margin），标准的只算上自身窗体的大小 css 设置方法

如下：

标准模型 :box-sizing:content-box;

IE 模型:box-sizing:border-box;

3.几种获得宽高的方式 :

dom.style.width/height 这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到 dom 的宽高的。

dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有 IE 浏览器支持。 window.getComputedStyle(dom).width/height 这种方式的原理和 2 是一样的，这个可以兼容更多的浏览器，通用性好一些。

dom.getBoundingClientRect().width/height 这种方式是根据元素在视窗中的绝对位置来获取宽高的 dom.offsetWidth/offsetHeight 这个就没什么好说的了，最常用的，也是兼容最好的。

4.拓展各种获得宽高的方式 : 获取屏幕的高度和宽度（屏幕分辨率）：

window.screen.height/width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth 网页全文的高度和宽度： document.body.scrollHeight/Width 滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth 网页可见区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

5.边距重叠解决方案(BFC) BFC 原理 :

内部的 box 会在垂直方向，一个接一个的放置每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从做往右的格式化，否则相反） box 垂直方向的距离由 margin 决定，属于同一个 bfc 的两个相邻 box 的 margin 会发生重叠 bfc 的区域不会与浮动区域的 box 重叠 bfc 是一个页面上的独立的容器，外面的元素不会影响 bfc 里的元素，反过来，里面的也不会影响外面的计算 bfc 高度的时候，浮动元素也会参与计算创建 bfc float 属性不为 none（脱离文档流） position 为 absolute 或 fixed display 为 inline-block,table-cell,table-caption,flex,inine-flex overflow 不为 visible 根元素 demo 上这块 margin-bottom:30px; 下这块 margin-top:50px;

前端面试题集锦——JavaScript

1.请你谈谈 Cookie 的优缺点

优点：

极高的扩展性和可用性

数据持久性。
不需要任何服务器资源。 Cookie 存储在客户端并在发送后由服务器读取。 3) 可配置到期规则。控制 cookie 的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的 cookie 。
简单性。基于文本的轻量结构。
通过良好的编程，控制保存在 cookie 中的 session 对象的大小。
通过加密和安全传输技术（ SSL ），减少 cookie 被破解的可能性。
只在 cookie 中存放不敏感数据，即使被盗也不会有重大损失。

缺点：

Cookie 数量和长度的限制。数量：每个域的 cookie 总数有限。 a) IE6 或更低版本最多 20 个 cookie b) IE7 和之后的版本最后可以有 50 个 cookie c) Firefox 最多 50 个 cookie d) chrome 和 Safari 没有做硬性限制长度：每个 cookie 长度不超过 4KB （ 4096B ），否则会被截掉。
潜在的安全风险。 Cookie 可能被拦截、篡改。如果 cookie 被拦截，就有可能取得所有的 session 信息。
用户配置为禁用。有些用户禁用了浏览器或客户端设备接受 cookie 的能力，因此限制了这一功能。
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

2.Array.prototype.slice.call(arr，2)方法的作用是：

利用 Array 原型上的 slice 方法，使用 call 函数的第一个参数，让这个方法中的 this 指向 arr，并传递参数 2，实际上等于 arr.slice(2)，即从下标为 2 开始截取到末尾。

3.以下代码执行后，控制台的输出是：

var a = 10; function a(){} console.log(typeof a)

A."number" B."object" C."function" D."undefined&quot

答案：C

函数提升优先级高于变量提升，所以代码等价于 function a(){} var a； a = 10; console.log(typeof a)

4、简单说一下浏览器本地存储是怎样的

总的来说，浏览器存储分为以下几种：

1、Cookie 存储，明文，大小限制 4k 等

2、localStorage，持久化存储方式之一，不用在两端之间传输，且限制大小为 10M

3、sessionStorage，会话级存储方式，浏览器关闭立即数据丢失

4、indexDb，浏览器端的数据库

5.原型 / 构造函数 / 实例原型(prototype): 一个简单的对象，用于实现对象的属性继承。可以简单的理解成对象的爹。在 Firefox 和 Chrome 中，每个 JavaScript 对象中都包含一个 proto (非标准)的属性指向它爹(该对象的原型)，可 obj.proto__进行访问。构造函数: 可以通过 new 来新建一个对象的函数。实例: 通过构造函数和 new 创建出来的对象，便是实例。实例通过__proto 指向原型，通过 constructor 指向构造函数。说了一大堆，大家可能有点懵逼，这里来举个栗子，以 Object 为例，我们常用的 Object 便是一个构造函数，因此我们可以通过它构建实例。

// 实例 const instance = new Object()复制代码则此时，实例为 instance, 构造函数为 Object，我们知道，构造函数拥有一个 prototype 的属性指向原型，因此原型为:

// 原型 const prototype = Object.prototype 这里我们可以来看出三者的关系: 实例.proto === 原型原型.constructor === 构造函数构造函数.prototype === 原型 // 这条线其实是是基于原型进行获取的，可以理解成一条基于原型的映射线// 例如: // const o = new Object()// o.constructor === Object --> true// o.proto = null;// o.constructor === Object --> false// 注意: 其实实例上并不是真正有 constructor 这个指针，它其实是从原型链上获取的// instance.hasOwnProperty(‘constructor’) === false (感谢刘博海 Brian 童鞋实例.constructor === 构造函数此处感谢 caihaihong 童鞋的指出。放大来看，我画了张图供大家彻底理解:

6.原型链：原型链是由原型对象组成，每个对象都有 proto 属性，指向了创建该对象的构造函数的原型，proto 将对象连接起来组成了原型链。是一个用来实现继承和共享属性的有限的对象链。

属性查找机制: 当查找对象的属性时，如果实例对象自身不存在该属性，则沿着原型链往上一级查找，找到时则输出，不存在时，则继续沿着原型链往上一级查找，直至最顶级的原型对象 Object.prototype，如还是没找到，则输出 undefined；

属性修改机制: 只会修改实例对象本身的属性，如果不存在，则进行添加该属性，如果需要修改原型的属性时，则可以用: b.prototype.x = 2；但是这样会造成所有继承于该对象的实例的属性发生改变。

7.执行上下文(EC)

执行上下文可以简单理解为一个对象:

它包含三个部分:

o 变量对象(VO) o 作用域链(词法作用域) othis 指向

它的类型: o 全局执行上下文 o 函数执行上下文 oeval 执行上下文

代码执行过程: o 创建全局上下文 (global EC) o 全局执行上下文 (caller) 逐行自上而下执行。遇到函数时，函数执行上下文 (callee) 被 push 到执行栈顶层 o 函数执行上下文被激活，成为 active EC, 开始执行函数中的代码，caller 被挂起o 函数执行完后，callee 被 pop 移除出执行栈，控制权交还全局上下文 (caller)，继续执行。

8.变量对象

变量对象，是执行上下文中的一部分，可以抽象为一种数据作用域，其实也可以理解为就是一个简单的对象，它存储着该执行上下文中的所有变量和函数声明(不包含函数表达式)。

活动对象 (AO): 当变量对象所处的上下文为 active EC 时，称为活动对象。

9.作用域链

我们知道，我们可以在执行上下文中访问到父级甚至全局的变量，这便是作用域链的功劳。作用域链可以理解为一组对象列表，包含父级和自身的变量对象，因此我们便能通过作用域链访问到父级里声明的变量或者函数。

由两部分组成: o[[scope]]属性: 指向父级变量对象和作用域链，也就是包含了父级的[[scope]] 和 AO oAO: 自身活动对象如此 [[scopr]]包含[[scope]]，便自上而下形成一条链式作用域。

10.闭包

闭包属于一种特殊的作用域，称为静态作用域。它的定义可以理解为: 父函数被销毁的情况下，返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和作用域链，因此可以继续访问到父级的变量对象，这样的函数称为闭包。

闭包会产生一个很经典的问题: o 多个子函数的[[scope]]都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响。解决: o 变量可以通过函数参数的形式传入，避免使用默认的[[scope]]向上查找 o 使用 setTimeout 包裹，通过第三个参数传入 o 使用块级作用域，让变量成为自己上下文的属性，避免共享 6. script 引入方式： html 静态

除了以上的小部分题外，还包括了其他前端面试题(实在是太多了页面写不下)

大厂面试