共计 6595 个字符，预计需要花费 17 分钟才能阅读完成。
css 相干
1. 万能居中
1.margin: 0 auto; 程度
2.text-align: center; 程度
3. 行高，垂直
4. 表格，center,middle；程度垂直
5.display:table-cell；模仿表格，all
6. 相对定位，50% 减本身宽高
7. 相对定位，上下左右全 0，margin:auto
8. 相对定位加绝对定位。不须要晓得宽高
9.IE6，IE7：给父元素设一个 font-size: 高度 /1.14,vertical-align:middle
2. BFC 优化
块格式化上下文, 个性:
使 BFC 外部浮动元素不会到处乱跑；
和浮动元素产生边界。
3. 盒模型哪两种模式？什么区别？如何设置
规范模式: box-sizing: content-box; 宽高不包含内边距和边框
怪异模式: box-sizing: border-box
4. 罕用革除浮动的办法，如不革除浮动会怎么？
当父元素不给高度的时候，外部元素不浮动时会撑开, 而浮动的时候，父元素变成一条线, 造成塌陷.
额定标签法（在最初一个浮动标签后，新加一个标签，给其设置 clear：both；）（不举荐）
父元素增加 overflow:hidden; (触发 BFC)
应用 after 伪元素革除浮动（举荐应用）
应用 before 和 after 双伪元素革除浮动
5. 删格化的原理
比方 antd 的 row 和 col, 将一行等分为 24 份, col 是几就占几份, 底层按百分比实现; 联合媒体查问, 能够实现响应式
6.CSS 选择符有哪些？
（1）id 选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后辈选择器（h1p）
（5）相邻后辈选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel=”external”]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
7. 伪类与伪元素的区别
css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来润饰不在文档树中的局部，比方，一句
话中的第一个字母，或者是列表中的第一个元素。
伪类用于当已有的元素处于某个状态时，为其增加对应的款式，这个状态是依据用户行为而动态变化的。比如说，当用户悬停在指定的
元素时，咱们能够通过:hover 来形容这个元素的状态。
伪元素用于创立一些不在文档树中的元素，并为其增加款式。它们容许咱们为元素的某些局部设置款式。比如说，咱们能够通过::be
fore 来在一个元素前减少一些文本，并为这些文本增加款式。尽管用户能够看到这些文本，然而这些文本实际上不在文档树中。
有时你会发现伪元素应用了两个冒号（::）而不是一个冒号（:）。这是 CSS3 的一部分，并尝试辨别伪类和伪元素。大多数浏览
器都反对这两个值。依照规定应该应用（::）而不是（:），从而辨别伪类和伪元素。然而，因为在旧版本的 W3C 标准并未对此进行
特地辨别，因而目前绝大多数的浏览器都反对应用这两种形式示意伪元素。
8.CSS 中哪些属性能够继承？
每一个属性在定义中都给出了这个属性是否具备继承性，一个具备继承性的属性会在没有指定值的时候，会应用父元素的同属性的值来作为本人的值。
个别具备继承性的属性有，字体相干的属性，font-size 和 font-weight 等。文本相干的属性，color 和 text-align 等。
表格的一些布局属性、列表属性如 list-style 等。还有光标属性 cursor、元素可见性 visibility。
当一个属性不是继承属性的时候，咱们也能够通过将它的值设置为 inherit 来使它从父元素那获取同名的属性值来继承。
9.CSS 优先级算法如何计算？
判断优先级时，首先咱们会判断一条属性申明是否有权重，也就是是否在申明前面加上了!important。一条申明如果加上了权重，那么它的优先级就是最高的，前提是它之后不再呈现雷同权重的申明。如果权重雷同，咱们则须要去比拟匹配规定的特殊性。
一条匹配规定个别由多个选择器组成，一条规定的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性能够分为四个等级，第一个等级是行内款式，为 1000，第二个等级是 id 选择器，为 0100，第三个等级是类选择器、伪类选择器和属性选择器，为 0010，第四个等级是元素选择器和伪元素选择器，为 0001。规定中每呈现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位。选择器特殊性值的比拟是从左向右排序的，也就是说以 1 结尾的特殊性值比所有以 0 结尾的特殊性值要大。
比如说特殊性值为 1000 的的规定优先级就要比特殊性值为 0999 的规定高。如果两个规定的特殊性值相等的时候，那么就会依据它们引入的程序，后呈现的规定的优先级最高。
10.display 有哪些值？阐明他们的作用。
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，能够设置宽高，同行显示。
list-item 像块类型元素一样显示，并增加款式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。
JavaScript 相干
1. 介绍 js 的根本数据类型。
js 一共有六种根本数据类型，别离是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 类型，代表创立后举世无双且不可变的数据类型，它的呈现我认为次要是为了解决可能呈现的全局变量抵触的问题。
2. JavaScript 有几种类型的值？你能画一下他们的内存图吗？
js 能够分为两种类型的值，一种是根本数据类型，一种是简单数据类型。
简单数据类型指的是 Object 类型，所有其余的如 Array、Date 等数据类型都能够了解为 Object 类型的子类。
两种类型间的次要区别是它们的存储地位不同，根本数据类型的值间接保留在栈中，而简单数据类型的值保留在堆中，通过应用在栈中保留对应的指针来获取堆中的值。
3. 外部属性 [[Class]] 是什么？
所有 typeof 返回值为 “object” 的对象（如数组）都蕴含一个外部属性 [[Class]]（咱们能够把它看作一个外部的分类，而非传统的面向对象意义上的类）。这个属性无奈间接拜访，个别通过 Object.prototype.toString(..) 来查看。例如：
Object.prototype.toString.call([1,2,3] );
// "[object Array]"
Object.prototype.toString.call(/regex-literal/i);
// "[object RegExp]"4. 介绍 js 有哪些内置对象？
js 中的内置对象次要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其余对象的构造函数对象。个别咱们常常用到的如全局变量值 NaN、undefined，全局函数如 parseInt()、parseFloat() 用来实例化对象的构造函数如 Date、Object 等，还有提供数学计算的单体内置对象如 Math 对象。
5.undefined 与 undeclared 的区别？
已在作用域中申明但还没有赋值的变量，是 undefined 的。相同，还没有在作用域中申明过的变量，是 undeclared 的。
对于 undeclared 变量的援用，浏览器会报援用谬误，如 ReferenceError: b is not defined。然而咱们能够应用 typeof 的平安防备机制来防止报错，因为对于 undeclared（或者 not defined）变量，typeof 会返回 “undefined”。
6.null 和 undefined 的区别？
首先 Undefined 和 Null 都是根本数据类型，这两个根本数据类型别离都只有一个值，就是 undefined 和 null。
undefined 代表的含意是未定义，null 代表的含意是空对象。个别变量申明了但还没有定义的时候会返回 undefined，null 次要用于赋值给一些可能会返回对象的变量，作为初始化。
undefined 在 js 中不是一个保留字，这意味着咱们能够应用 undefined 来作为一个变量名，这样的做法是十分危险的，它会影响咱们对 undefined 值的判断。然而咱们能够通过一些办法取得平安的 undefined 值，比如说 void 0。
当咱们对两种类型应用 typeof 进行判断的时候，Null 类型化会返回“object”，这是一个历史遗留的问题。当咱们应用双等号对两种类型的值进行比拟时会返回 true，应用三个等号时会返回 false。
7. 如何获取平安的 undefined 值？
因为 undefined 是一个标识符，所以能够被当作变量来应用和赋值，然而这样会影响 undefined 的失常判断。
表达式 void _ 没有返回值，因而返回后果是 undefined。void 并不扭转表达式的后果，只是让表达式不返回值。
按常规咱们用 void 0 来取得 undefined。
8. 说几条写 JavaScript 的根本标准？
在平时我的项目开发中，咱们恪守一些这样的根本标准，比如说：
（1）一个函数作用域中所有的变量申明应该尽量提到函数首部，用一个 var 申明，不容许呈现两个间断的 var 申明，申明时
如果变量没有值，应该给该变量赋值对应类型的初始值，便于别人浏览代码时，可能高深莫测的晓得变量对应的类型值。（2）代码中呈现地址、工夫等字符串时须要应用常量代替。
（3）在进行比拟的时候吧，尽量应用 ’===’, ‘!==’ 代替 ’==’, ‘!=’。
（4）不要在内置对象的原型上增加办法，如 Array, Date。
（5）switch 语句必须带有 default 分支。
（6）for 循环必须应用大括号。
（7）if 语句必须应用大括号。
9.JavaScript 原型，原型链？有什么特点？
在 js 中咱们是应用构造函数来新建一个对象的，每一个构造函数的外部都有一个 prototype 属性值，这个属性值是一个对象，这个对象蕴含了能够由该构造函数的所有实例共享的属性和办法。当咱们应用构造函数新建一个对象后，在这个对象的外部将蕴含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说咱们是不应该可能获取到这个值的，然而当初浏览器中都实现了 proto 属性来让咱们拜访这个属性，然而咱们最好不要应用这个属性，因为它不是标准中规定的。ES5 中新增了一个 Object.getPrototypeOf() 办法，咱们能够通过这个办法来获取对象的原型。
当咱们拜访一个对象的属性时，如果这个对象外部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有本人的原型，于是就这样始终找上来，也就是原型链的概念。原型链的止境一般来说都是 Object.prototype 所以这就是咱们新建的对象为什么可能应用 toString() 等办法的起因。
特点：
JavaScript 对象是通过援用来传递的，咱们创立的每个新对象实体中并没有一份属于本人的原型正本。当咱们批改原型时，与之相干的对象也会继承这一扭转。
10.js 中整数的平安范畴是多少？
平安整数指的是，在这个范畴内的整数转化为二进制存储的时候不会呈现精度失落，可能被“平安”出现的最大整数是 2^53 – 1，即 9007199254740991，在 ES6 中被定义为 Number.MAX_SAFE_INTEGER。最小整数是 -9007199254740991，在 ES6 中被定义为 Number.MIN_SAFE_INTEGER。
如果某次计算的后果失去了一个超过 JavaScript 数值范畴的值，那么这个值会被主动转换为非凡的 Infinity 值。如果某次计算返回了正或负的 Infinity 值，那么该值将无奈参加下一次的计算。判断一个数是不是有穷的，能够应用 isFinite 函数来判断。
浏览器网络相干
1. reflow(回流)和 repaint(重绘)优化
浏览器渲染过程: DOM tree, CSS tree –> Render tree –> Paint
DOM tree 根节点为 html
渲染从浏览器左上角到右下角
第一次关上页面至多触发一次重绘和回流, 构造如宽高地位变动时, 触发 reflow 回流; 非构造如背景色变动时, 触发 repaint 重绘. 二者都会造成体验不佳
2. 如何缩小重绘和回流?
通过 classname 或 cssText 一次性批改款式, 而非一个一个改
离线模式: 克隆要操作的结点, 操作后再与原始结点替换, 相似于虚构 DOM
防止频繁间接拜访计算后的款式, 而是先将信息保留下来
相对布局的 DOM, 不会造成大量 reflow
p 不要嵌套太深, 不要超过六层
3. 一个页面从输出 URL 到页面加载显示实现，这个过程中都产生了什么？
浏览器依据申请的 URL 交给 DNS 域名解析，找到实在 IP，向服务器发动申请；
服务器交给后盾解决实现后返回数据，浏览器接管文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS 等）进行语法解析，建设相应的外部数据结构（如 HTML 的 DOM Tree）；
载入解析到的资源文件，渲染页面，实现。
4.localStorage 与 sessionStorage 与 cookie 的区别总结
共同点: 都保留在浏览器端, 且同源 localStorage 与 sessionStorage 统称 webStorage, 保留在浏览器, 不参加服务器通信, 大小为 5M
生命周期不同: localStorage 永恒保留, sessionStorage 以后会话, 都可手动革除
作用域不同: 不同浏览器不共享 local 和 session, 不同会话不共享 session
Cookie: 设置的过期工夫前始终无效, 大小 4K. 有个数限度, 各浏览器不同, 个别为 20 个. 携带在 HTTP 头中, 过多会有性能问题. 可本人封装, 也可用原生
5. 浏览器如何阻止事件流传，阻止默认行为
阻止事件流传 (冒泡): e.stopPropagation()
阻止默认行为: e.preventDefault()
6. 虚构 DOM 计划绝对原生 DOM 操作有什么长处，实现上是什么原理？
虚构 DOM 可晋升性能, 毋庸整体从新渲染, 而是部分刷新.
JS 对象, diff 算法
7. 浏览器事件机制中事件触发三个阶段
事件捕捉阶段: 从 dom 树节点往下找到指标节点, 不会触发函数
事件指标处理函数: 达到指标节点
事件冒泡: 最初从指标节点往顶层元素传递, 通常函数在此阶段执行.
addEventListener 第三个参数默认 false(冒泡阶段执行),true(捕捉阶段执行).
阻止冒泡见以上办法.
8. 什么是跨域？为什么浏览器要应用同源策略？你有几种形式能够解决跨域问题？理解预检申请嘛？
跨域是指一个域下的文档或脚本试图去申请另一个域下的资源
避免 XSS、CSFR 等攻打, 协定 + 域名 + 端口不同
jsonp; 跨域资源共享（CORS）(Access control); 服务器正向代理等
预检申请: 需预检的申请要求必须首先应用 OPTIONS 办法发动一个预检申请到服务器，以获知服务器是否容许该理论申请。” 预检申请“的应用，能够防止跨域申请对服务器的用户数据产生未预期的影响
9. 理解浏览器缓存机制吗？
浏览器缓存就是把一个曾经申请过的资源拷贝一份存储起来，当下次须要该资源时，浏览器会依据缓存机制决定间接应用缓存资源还是再次向服务器发送申请.
from memory cache ; from disk cache
作用: 缩小网络传输的损耗以及升高服务器压力。
优先级: 强制缓存 > 协商缓存; cache-control > Expires > Etag > Last-modified
10. 为什么操作 DOM 慢?
DOM 自身是一个 js 对象, 操作这个对象自身不慢, 然而操作后触发了浏览器的行为, 如 repaint 和 reflow 等浏览器行为, 使其变慢
11. 什么状况会阻塞渲染？
js 脚本同步执行
css 和图片尽管是异步加载, 但 js 文件执行需依赖 css, 所以 css 也会阻塞渲染
