# 面试基础

# Html

# 什么是`DOCTYPE`？

DOCTYPE 是 Document Type 的简写，在页面中，用来指定页面所用的HTML或者XHTML的版本。想要制作符合标注的页面，DOCTYPE声明是必不可少的组成部分。只有确定一个正确的DOCTYPE，XHTML 或者HTML里的标识和CSS才能正常生效。以XHTML 1.0为例： XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）

# 标准模式、准标准模式和混杂模式的区别？

不同文档模式主要影响CSS内容呈现，尤其是浏览器对于盒模型的解析，某些情况下也会影响到 JS的解析执行。目前文档模式有四种

混杂模式（quirks mode）让IE的行为与（包含非标准特性的）IE5相同
标准模式（standards mode）让IE的行为更接近标准行为
准标准模式（almost standards mode）这种模式下的浏览器特性有很多都是符合标准的，不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。
超级标准模式: IE8引入的一种新的文档模式，超级文档模式可以让 IE以其所有版本中最符合标准的方式来解释网页内容。

总的来看，混杂模式让IE像IE5，标准模式使用IE7的呈现引擎，而超级标准模式则是IE8的默认文档模式。 ** 触发混杂模式: 如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。触发标准模式:

触发混杂模式:
如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。
§ 触发标准模式:
§ <!-- HTML 4.01 严格型 -->
§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
§ 
§ <!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
§ 触发准标准模式:
§ <!-- HTML 4.01 过渡型 -->
§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
§ 
§ <!-- HTML 4.01 框架集型 -->
§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
§ 
§ <!-- XHTML 1.0 过渡型 -->
§ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
§ 
§ <!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
§ IE8中关闭超级标准模式：
§ <meta http-equiv="X-UA-Compatible" content="IE=7" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# HTML和 XHTML之间有什么区别?

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持
XHTML 元素是以 XML 格式编写的 HTML 元素。 XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。

# 页面类型为application/xhtml+xml会有什么问题？

答：application/xhtml+xml是XHTML系列文档的类型，会导致一些老的浏览器不支持。

# data- 属性的好处是什么？

data-属性是自定义数据属性，在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放;

使用attribute方法可以存取 data-* 自定义属性的值；
dataset属性存取data-*自定义属性的值；
data-属性选择器是很有用的一个选择器，可以根据自定义的 data- 属性选择相关的元素

# 谈谈cookie, sessionStorage 和localStorage之间的区别.

localStorage 持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储
cookie Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。 HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话， Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。 Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。Cookie在客户端是由浏览器来管理的，浏览器能够保证 Google只会操作Google的Cookie而不会操作Baidu的Cookie，从而保证用户的隐私安全。除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是 Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而 Web Storage仅仅是为了在本地“存储”数据而生

# script, script async 和 script defer之间的区别？

defer使得browsers延迟脚本的执行，直到文档的载入和解析完成，并可以操作（在onload事件触发前），加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活！
async 属性规定一旦脚本可用，则会异步执行。所以async使得browsers可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析（异步）。在不支持async的browsers中，通过动态创建script元素并把它插入文档中，来实现脚本的异步载入和执行。 若两个属性同在，会忽略defer而遵从async。

# 为什么css样式的位置一般在head中而js的样式则是在body中？那有没有其他例外情况？

因为这和需要的加载顺序有关，CSS放在头部会先被加载，因为css样式表规定了网页总体样式，而js一般是在其他内容加载完成之后起作用的，所以一般加载在尾部。head 内的 JavaScript 需要执行结束才开始渲染 body，如果有多个外连接脚本放在head中，那么，当加载脚本时会阻塞页面的渲染，也就是常说的空白。而 CSS 应当写在 head 中，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。例外是：

个别特殊JS，比如用于调试的基础脚本（部署时未必有）、性能日志之类，必须放在尽量最前的位置。
一些需要在body之前加载的js文件，html5-shim脚本必须在body之前加载。
渐进式渲染中也需要先加载js。

# html5中有哪些新的标签

首先HTML5的特点是更加简洁以及更加语义化，html5中新增的标签有如：nav，header，footer，artical，section，aside，canvas， details，mark，audio，video。

# iframe有那些优缺点

只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改。

缺点：阻塞页面onload事件

搜索引擎无法检索这种页面，不利于SEO

会影响页面的并行加载

解决方案：使用JS动态给iframe的src加载页面内容

# CSS

# CSS 中类 (classes) 和 ID 的区别。

书写上的差别：class名用“.”号开头来定义，id名用“#”号开头来定义；
调用上的区别：在同一个html网页页面中class是可以被多次调用的（在不同的地方）。而id名作为标签的身份则是唯一的，id在页面中只能出现一次。在js脚本中经常会用到id来修改一个标签的属性
id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上。
在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。
在实际应用时，class更多的被应用到文字版块以及页面修饰等方面，而id更多地被用来实现宏伟布局和设计包含块，或包含框的样式。

# 请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？

Normalize 相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。
Reset 相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。
Normalize.css是一种CSS reset的替代方案。它们的区别有：

Normalize.css 保护了有价值的默认值，Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
Normalize.css 修复了浏览器的bug，它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
Normalize.css 不会让你的调试工具变的杂乱
Normalize.css 是模块化的
Normalize.css 拥有详细的文档选择Normalize.css ，主要是 reset.css为几乎所有的元素施加默认样式，所以需要对所有公共的排版元素重新设置样式，这是一件很麻烦的工作。

# 请解释浮动 (Floats) 及其工作原理。

float属性定义了元素是否浮动及在哪个方向浮动，在CSS中任何元素都可以浮动，且浮动元素会生成一个块级框，而不论它本身是何种元素。并且盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。浮动属性会使得浮动的元素脱离文档流，所以文档的普通流中的块框会表现的像浮动框不存在一样。

# block，inline和inline-block的概念以及区别

首先这是display中的三个属性值，不是元素指类型，元素类型在HTML5之前分为两种分别是块级元素（ block-level elements）和内连元素（ inline elements）。

但是当display的属性值被设置为block时，元素会以块级元素（ block-level elements）显示，而设置为inline时会以内连元素（ inline elements）显示。 display:block block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 block元素可以设置margin和padding属性。

display:inline inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。 inline元素设置width,height属性无效。 inline元素的margin和padding 属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素） inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。即对 inline-block元素可以设置宽度和高度，同时inline-block元素又可以在同行进行排列。备注：属性为inline-block元素之间的空格或者换行在浏览器上会是一个空白的间隙。且IE6和7是不支持这个属性的，需要通过*display:inline;*zoom:1做hack处理。

# 请解释 CSS sprites，以及你要如何在页面或网站中实现它。

通常被意译为“CSS图像拼合”或“CSS贴图定位”。 CSS Sprites就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position” 的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。优点：当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。缺点：做图像拼合的时候很麻烦。

# link @import两者之间区别?

@import只能加载css 最好是@import:url(index.css)
加载顺序的差别，最后加载import
老浏览器不兼容

# :before和::before区别?

单冒号(:)是css2的写法

双冒号(::)用于CSS3。作用是一样的。

加分项：

配合content一起使用，不会出现在DOM中，所以不能JS控制，仅仅用于css渲染，通常用于 hover激活

8.如何让一个div上下左右居中？（1）position:absolute;left:50%;top:50%; transform:translate(-50%,-50%);

（2）position:absolute;left:0;top:0;bottom:0;right:0; margin:auto;

（3）width:200px;height:200px;border: 1px solid red;background:#99f;position:absolute;left:50%;top:50%; margin-left:-100px;margin- top:-100px;

# JS

# js单线程,为什么？

js单线程，原因避免dom渲染冲突

# 数据类型

基本类型：Undefined，Boolean，String，Number，Null，Symbol,BigInt
引用类型：Object (Array,Date,RegExp,Function)

# 什么是模块化？

模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。
让开发者便于维护,同时也让逻辑相同的部分可复用
模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

# 谈一谈JavaScript作用域链

当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。

作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

# 如何理解JavaScript原型链

JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。

原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined

# 创建对象的四种方法

var o1 = {name:'abcd01'};
    var o2 = new Object({name:'abcdo2'});
    function M(name) {
        this.name=name;
    }
    var o3 = new M('abcdo3');
    var p={name:'abcdp'};
    var o4 = Object.create(p);
    ps:o4创建了一个原型，o4.__proto__===p

1
2
3
4
5
6
7
8
9

# 请解释一下 JavaScript 的同源策略。

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

# websocket

是一种协议，可以让我们建立客户端到服务器端的全双工通信，这就意味着服务器端可以主动推送数据到客户端

# 介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

# null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

undefined：

变量被声明了，但没有赋值时，就等于undefined。
调用函数时，应该提供的参数没有提供，该参数等于undefined。
对象没有赋值的属性，该属性的值为undefined。
函数没有返回值时，默认返回undefined。

null：

作为函数的参数，表示该函数的参数不是对象。
作为对象原型链的终点。

# new操作符具体干了什么呢?

（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

（2）属性和方法被加入到 this 引用的对象中。

（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

# dom事件

dom0 onclick
dom2 window.addEventListener('click',function(){},false)
dom3 window.addEventListener('keyup',function(){},false)

# dom事件类

捕获（上到下）顺序 window=>document=>html(document.documentElement获得html标签)>body>...

dom.addEventListener('click',function () { //dom为上一行捕获的对象
    console.log(123);//上一行每一个对象所捕获
},true); //为true才可以捕获

1
2
3

冒泡（下到上）和上面相反
- Event对象常见应用：

event.preventDefault();

event.stopPropagation();

event.stopImmediatePropagation() ; //一个对象有多个事件，添加这句话，其他的不会在执行

event.currentTarget； //当前所绑定的事件，父级对象

event.target

1
2
3
4
5
6
7
8
9

自定义事件

//var eve = new Event('custome');
    
    //var eve = new Event('custome');
    var eve = new CustomEvent('custome', {
        detail: {
            username: "davidwalsh"
        }
        });//可以增加参数
    dom.addEventListener('custome',function (e) {
        console.log(e.detail)
    });
        dom.dispatchEvent(eve);//触发自定义事件

1
2
3
4
5
6
7
8
9
10
11
12

# 获得元素的宽高

var dom =document.getElementById('test') ;
    console.log(dom.style)
    console.log(dom.currentStyle);//ie
    console.log(window.getComputedStyle(dom));// 非ie
    console.log(dom.getBoundingClientRect())

1
2
3
4
5

# 浏览器缓存

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下：

先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；

当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些 request header验证这个资源是否命中协商缓存，称为 http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；

强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源；

区别是，强缓存不对发送请求到服务器，但协商缓存会。

当协商缓存也没命中时，服务器就会将资源发送回客户端。

当 ctrl+f5 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；

当 f5 刷新网页时，跳过强缓存，但是会检查协商缓存；

# ==和===

if(obj.a==null){
        //相当于obj.a===null||obj.a===undefined
        //jq源码是这样写的，
        //其他地方都用===
    }

1
2
3
4
5

# 实现一个promise

https://github.com/Liyuk/code-repertory/blob/master/promise/promise.js

# 安全

XSS(Cross Site Scripting)跨站请求攻击

eg:写博客偷偷插入一段《script》,攻击代码，获取cookie，发送到自己的服务器

发布博客，有人查看博客内容，会把查看着的cookie发送到攻击者的服务器

预防：前端替换关键字，例如替换 < 为 &lt ;，后端替换，一般都为后端处理，前端js执行能力低

CSRF（Cross-site request forgery）跨站请求伪造

eg:你已经登录一个购物网站，正在浏览商品，付费接口是xxx.com/pay?id=100但是没有任何验证

然后你收到一封邮件，隐藏着《img src=xxx.com/pay?id=100》,你查看邮件的时候，就已经悄悄付费购买了

依赖用户登录后去执行一个漏洞接口

预防：增加验证流程（token,referer,隐藏令牌），输入指纹。密码。短信验证码

插入脚本（js代码）获得他想到的东西

# 开源工具

1）是否了解开源的工具 bower、npm、yeoman、grunt、gulp，有无用过，有无写过，一个 npm 的包里的 package.JSON 具备的必要的字段都有哪些（名称、版本号，依赖）

2）fiddle、charles 有没有用过，什么时候用

3）会不会用 ps 扣图，png、jpg、gif 这些图片格式解释一下，分别什么时候用。是否了解webp

4）说一下你常用的命令行工具

5）会不会用git，说上来几个命令，说一下git和svn的区别，有没有用git解决过冲突

# 考察学习能力和方法

1）你每天必须登录的网站（前端技术相关）是什么？

2）前端技术方面看过哪些书，有无笔记，都有哪些收获。

3）收藏了哪些代码片段？

4）怎么理解前端技术的大趋势？自己再做哪方面的知识储备？

5）是否了解或精通其他（后端）的编程语言？

6）做过的项目有没有什么（视觉、交互）美感？什么是美？你觉得让你自己赏心悦目的网站或应用有哪些？

7）做项目有没有遇到哪些印象深刻的技术攻关，具体遇到什么问题，怎么找答案的，最后怎么解的

# 性能优化

# 页面性能

资源合并压缩
非核心代码异步加载
动态脚本加载
defer,在html解析完成后才会执行，如果是多个安装顺序依次执行
async，加载完成后立即执行，如果是多个，执行顺序与加载顺序无关
利用浏览器缓存

强缓存
- expires Http1.0 中的标准，表明过期时间，注意此处的时间都是指的是服务器的时间。可以看到过期时间被设定为了：Thu, 28 Sep 2017 06:38:37 GMT存在的问题：服务器时间与客户端时间的不一致，就会导致缓存跟期待效果出现偏差。
- Cache-Control Http1.1 中的标准，可以看成是 expires 的补充。使用的是相对时间的概念。简单介绍下Cache-Control的属性设置。max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires
协商缓存在这个阶段，服务器一般会将Cache-control、expires 、last-modified、date、etag (hash值)等字段在response header 中返回，便于下次缓存。当然具体的场景，也是看服务器的约定规则设定。

使用CDN
cdn预解析

<meta http-equiv="x-dns-prefetch-control" content="on" />   //页面中的a标签一般会自动预解析，若是https协议，默认关闭dns预解析，这里强制预解析
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

1
2

# dom性能优化

缓存dom
暂存dom
事件节流
尽早操作 DOMContentLoaded

# 错误监控

错误分类
1. 及时运行错误：代码错误 try...catch window.onerror
2. 资源加载错误（不会冒泡）

object.onerror         
performance.getEntries()   (获得页面所有加载的资源，根据已经加载的资源间接判断加载失败的资源)                    
Error事件捕获

1
2
3

    <script type="text/javascript">
        window.addEventListener('error', function (e) {
            console.log('捕获', e);
        }, true);//这里一定是true表示要捕获
    </script>

1
2
3
4
5

跨域的js能捕获到错误吗？
- 错误信息：script:error
- 出错行号和出错列拿不到为0 解决：
  1. 第一步，在客户端script增加crossorign属性，
  2. 第二步，在服务端设置js响应头Access-Control-Allow-Orign:*(或者指定域名)
上报错误
1. 利用ajax通信进行上报
2. 利用image对象上报（大多数都用这个,简单，不用借助其他的库，一行代码解决所有）

eg:(new Image()).src = 'http://baidu.com/tesjk?r=tksjk';

主动抛出错误: throw new Error("错误信息")鄙视:

js中共有几种错误类型: 6种:

SyntaxError 语法错误
ReferenceError 引用错误T
ypeError 类型错误RangeError
范围错误
参数超范围
EvalError URIErro

# 知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp,Apng。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。 Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。
Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。

# 打开一个网页经历了那些过程？

# 浏览器加载白屏是什么原因？

https://github.com/Mountain-Buzhou/Interview-Book/blob/master/docs/Collection/WhiteScreen.md

# 千万访问量的项目，前端需要注意些什么？

https://github.com/Mountain-Buzhou/Interview-Book/blob/master/docs/Collection/DozensOfVisits.md

# HTTP

# 特点

简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记
无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

# 报文

请求报文：请求行，请求头，空行，请求体

响应报文：状态行，响应头，空行，响应体

# 请求方法

GET 请求指定的页面信息，并返回实体主体。
HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
PUT 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE 请求服务器删除指定的页面。
CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS 允许客户端查看服务器的性能。
TRACE 回显服务器收到的请求，主要用于测试或诊断。

# get和post的区别

get在浏览器回退时是无害的，post会再次提交请求

get的url可以收藏，post不可以

get请求会主动缓存，post不会，除非手动设置

# 状态码

1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求

# 持久连接管线化

持久连接
什么是持久连接？对于HTTP协议而言，它是基于请求响应模型，Client向Server发请求时，先建立一条HTTP连接，Server给Client响应数据后，连接关闭。
当Client发送下一个请求时，需要重新再建立HTTP连接，这种方式就是：一个请求响应需要占用一条HTTP连接。而持久连接就是：只需要建立一条连接，然后在这条连接上传输多个请求和响应。
与持久连接相关的字段
HTTP1.0中有一个Connection首部字段，它是一个逐跳首部字段。Connection:Keep-Alive，表示希望将此条连接作为持久连接。
HTTP1.1中，建立的HTTP请求默认是持久连接的。当Client确定不再需要向Server发送数据时，它可以关闭连接，即在发送首部中添加Connection:Closed字段。
管线化
①管线化机制通过持久连接完成，仅HTTP/1.1支持此技术
②只有GET和HEAD请求可以进行管线化，而POST会有所限制
③初次创建连接时不应启动管线机制，因为对方服务器不一定支持HTTP/1.1版本的协议
持久连接的时候，某个连接消息传递类似于
持久连接的一个最大的好处是：大大减少了连接的建立以及关闭时延。
“缺点”，请求响应是顺序执行的。只有在请求1的响应收到之后，才会发送请求2，这就是持久连接与管道化连接不同的地方。
请求1=>响应1=>请求2=>响应2
管线化后
请求1=>请求2=>响应1=>响应2
管道化连接是需要持久连接支持的。管道化连接是在持久连接的基础上，以“流水线”的方式发送请求：不需要等到请求1的响应到达Client，就可以发送请求2....

# HTTP 2.0与HTTP 1.1区别

https://www.cnblogs.com/frankyou/p/6145485.html

# Vue

# Vue router 跳转和 location.href 有什么区别？

router 是 hash 改变 location.href 是页面跳转，刷新页面

# 你能实现一下双向绑定吗？ vdom snabbdom

数据和视图的分离，解耦（开放封闭原则）
以数据驱动视图，只关心数据变化，dom操作被封装
MVVM：model(模型数据) view（视图模板） ViewModel(DOM listeners,Date Bingings)一种创新

三要素：响应式、模板引擎、渲染

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：

1.diff算法是linux的基础命令，是git基本工具

2.vdom使用diff算法是为了找出需要更新的节点

3.diff实现，patch(container,vnode)(初次创建),patch(vnode,newVnode)（后面进行diff算法更新）

4.核心逻辑：下面的createElement和updateChildren

# 其他

# 一年半经验，百度、有赞、阿里面试总结

https://juejin.im/post/5befeb5051882511a8527dbe

# 前端技术清单

https://github.com/alienzhou/frontend-tech-list

# 美团技术团队

https://tech.meituan.com/

# 更多

https://github.com/Mountain-Buzhou/Interview-Book
https://github.com/brickspert/blog/issues/16
前端9种图片格式基础知识在新窗口打开
反向面试在新窗口打开

# 面试基础

# Html

# 什么是DOCTYPE？

# 标准模式、准标准模式和混杂模式的区别？

# HTML和 XHTML之间有什么区别?

# 页面类型为application/xhtml+xml会有什么问题？

# data- 属性的好处是什么？

# 谈谈cookie, sessionStorage 和localStorage之间的区别.

# script, script async 和 script defer之间的区别？

# 为什么css样式的位置一般在head中而js的样式则是在body中？那有没有其他例外情况？

# html5中有哪些新的标签

# iframe有那些优缺点

# CSS

# CSS 中类 (classes) 和 ID 的区别。

# 请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？

# 请解释浮动 (Floats) 及其工作原理。

# block，inline和inline-block的概念以及区别

# 请解释 CSS sprites，以及你要如何在页面或网站中实现它。

# link @import两者之间区别?

# :before和::before区别?

# JS

# js单线程,为什么？

# 数据类型

# 什么是模块化？

# 谈一谈JavaScript作用域链

# 如何理解JavaScript原型链

# 创建对象的四种方法

# 请解释一下 JavaScript 的同源策略。

# websocket

# 介绍一下你对浏览器内核的理解？

# null和undefined的区别？

# new操作符具体干了什么呢?

# dom事件

# dom事件类

# 获得元素的宽高

# 浏览器缓存

# ==和===

# 实现一个promise

# 安全

# 开源工具

# 考察学习能力和方法

# 性能优化

# 页面性能

# dom性能优化

# 错误监控

# 知道的网页制作会用到的图片格式有哪些？

# 打开一个网页经历了那些过程？

# 浏览器加载白屏是什么原因？

# 千万访问量的项目，前端需要注意些什么？

# HTTP

# 特点

# 报文

# 请求方法

# get和post的区别

# 状态码

# 持久连接 管线化

# HTTP 2.0与HTTP 1.1区别

# Vue

# Vue router 跳转和 location.href 有什么区别？

# 你能实现一下双向绑定吗？ vdom snabbdom

# 其他

# 一年半经验，百度、有赞、阿里面试总结

# 前端技术清单

# 美团技术团队

# 更多

# 什么是`DOCTYPE`？

# 持久连接管线化