HTML 基础

1、什么是HTML语义化？

表示选择合适的标签（语义化标签）便于开发者阅读和写出更优雅的代码

2、为什么要使用语义化标签？

在没有CSS样式的情况下，页面整体也会呈现很好的结构效果
更有利于用户体验
更有利于搜索引擎优化
代码结构清晰，方便团队开发与维护

3、 HTML5新特性有哪些？

语义化标签
音视频处理
canvas / webGL
history API
requestAnimationFrame
地理位置
webSocket

4、行内元素与块级元素

1、行内元素的特点？

元素排在一行
只能包含文本或者其他内联元素
宽高就是内容宽高、设置宽高无效

2、块级元素的特点？

元素单独占一行
元素的宽高都可以设置
可以包含内联元素和其他块元素
为设置宽度时，默认宽度是它容器的100%

3、常见行内元素标签：
a、br、code、em、img、input...
常见块级元素标签：
div、p、dl、dt、form、h1~h6...

5、渐进增强与优雅降级的理解及区别

渐进增强（Progressive Enhancement）：
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
两者区别？
1、广义：
其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级
2、狭义：
渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。
例子：

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

6、cookie、sessionStorage、localStorage区别

相同点：
存储在客户端
不同点：
1、cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+
2、cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除
3、cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地

CSS3

CSS盒模型

盒子由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
box-sizing: content-box(默认)----指的是标准模型（本身内容宽高度+边框和内边距）
box-sizing: border-box-----指的是IE模型（本身内容的宽高度）

Flex布局

想详细了解Flex布局知识点的小伙伴，请查看 Flex布局详解

CSS常见选择器

1、CSS选择器：

id选择器(#myid)
类选择器(.myclass)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
属性选择器(a[rel="external"])
伪类选择器(a:hover, li:nth-child)

2、CSS3属性选择器：

a[href$='.pdf']：选择href属性中以.pdf结尾的元素
a[href^='www']：选择href属性中以www开头的元素
a[href*='tmc']：选择href属性中包含tmc的元素

3、CSS3常见伪类选择器：

:nth-of-type()：

可以通过参数来选择表格中的奇数行和偶数行，odd表示奇数行，even表示偶数行

:nth-child()：

参数n时选中所有行
参数为n+i时表示从第i行开始下面的都被选中，如n+3，从第3行开始下面全部选中
2n表示2的倍数行被选中，选中偶数行
2n+1表示选中奇数行
3n表示每个3行选中一次

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [id > class > tag]

!important比内联优先级高

BFC

一、BFC的概念？

BFC（块级格式上下文）：它是页面中的一块渲染区域，有自己的渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用

二、BFC的原理？

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算

三、如何创建BFC？

根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

四、BFC的使用场景？

去除边距重叠现象
清除浮动（让父元素的高度包含子浮动元素）
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行

浮动与定位

一、清除浮动的方法

方式一、使用overflow 属性来清除浮动

.parent {
    overflow: hidden;
}

缺点：离开这个元素所在区域的会被隐藏（overflow: hidden将超出的分布隐藏起来）

方式二、使用额外标签法

.clear {
    clear: both;
}

缺点：会增加页面的标签，造成结构的紊乱

方式三、使用伪元素来清除浮动【推荐使用】

.clearfix:after {
    content: "";  // 设置内容为空
    height: 0;  // 高度为0
    line-height: 0;  // 行高为0
    display: block; // 将文本转为块级元素
    visibility: hidden; // 将元素隐藏
    clear: both; //清除浮动
}
.clearfix {
    zoom: 1;  // 为了兼容IE
}

二、定位 posiiton的值：

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

常见的页面布局

水平居中布局
左侧固定右侧自适应
流式布局
弹性布局
圣杯布局
双飞翼布局

CSS3新特性

过渡
动画
形状转换
选择器
阴影

文字阴影: text-shadow: 2px 2px 2px #000;(水平阴影，垂直阴影，模糊距离，阴影颜色) 盒子阴影: box-shadow: 10px 10px 5px #999
边框
背景
文字
渐变
弹性布局、栅格布局、多列布局
媒体查询

文字、盒子水平垂直居中

一、行内元素水平垂直居中方法:

方式1：

text-align:center /*水平居中*/  
height = 100px;  /*垂直居中  */
line-height = 100px;

方式2:

text-align:center 水平居中  
display:table-cell; 垂直居中  
vertical-align:middle;

二、块级元素水平居中方法:

margin:0 auto;只能设置水平居中，而margin:auto 0 不能设置垂直居中，因为margin垂直塌陷问题

方法1：定位+margin

父级元素设置position:relative;
儿子元素设置
width: 100px;  
height: 100px;  
position:absolute;  
top:50%;  
left:50%;  
margin-top:-50px;  
margin-right:-50px;

方法2：定位方法

父级元素设置position:relative;
儿子元素设置
position:absolute;  
top:0;  
bottom:0;  
left:0;  
right:0;  
margin:auto;

方式3：单元格方法（加分）

父级元素
display:table-cell;  
text-align:center;  
vertical-align:middle; 
子元素
display:inline-table

CSS预处理器

什么是CSS预处理器（Sass、Less、Stylus...）?

CSS预处理器是一种语言用来为CSS增加一些变成的特性，无需考虑浏览器兼容问题，例如你可以在CSS中使用变量，简单的程序逻辑、函数等在编程语言中的一些基本技巧，可以让CSS更加简洁，适应性更强，代码更直观等诸多好处

预处理器一般都有：嵌套、运算符、颜色函数、导入、继承、混入。Stylus还有一些高级特性。例如循环、判断等

display: none与visibility: hidden的区别

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

* tips：回流重绘：（说到回流重绘时可深入讨论下）

浏览器加载HTML时做了什么

在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体
DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。我自己简单的理解就是DOM Tree和我们写的CSS结合在一起之后，渲染出了render tree。

什么是回流，什么是重绘，有什么区别？

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。

每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

区别：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

优化：
尽可能改变一些写法减少回流和重绘
回流比重绘的代价要更高
例如：不要1个1个改变元素的样式属性，最好直接改变className，
利用documentFragment和requestanimationframe浏览器机制减少回流重绘次数
等等随意扩展

JS

js基本数据类型

5个简单数据类型（基本数据类型）+ 1个复杂数据类型

undefined、number、string、null、boolean+object ES6新增Symbol

几种判断数据类型的优缺点

一、typeof

console.log(typeof 1);               // number
console.log(typeof true);            // boolean
console.log(typeof 'mc');           // string
console.log(typeof function(){});    // function
console.log(typeof []);              // object 
console.log(typeof {});              // object
console.log(typeof null);            // object
console.log(typeof undefined);       // undefined

优点：能够快速区分基本数据类型缺点：不能将Object、Array和Null区分，都返回object

二、instanceof

console.log(1 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象缺点：Number，Boolean，String基本数据类型不能判断

三、Object.prototype.toString.call()

var toString = Object.prototype.toString;

console.log(toString.call(1));                      //[object Number]
console.log(toString.call(true));                   //[object Boolean]
console.log(toString.call('mc'));                  //[object String]
console.log(toString.call([]));                     //[object Array]
console.log(toString.call({}));                     //[object Object]
console.log(toString.call(function(){}));           //[object Function]
console.log(toString.call(undefined));              //[object Undefined]
console.log(toString.call(null));                   //[object Null]

优点：精准判断数据类型缺点：写法繁琐不容易记，推荐进行封装后使用

对象深浅拷贝

一、深拷贝

1.1 最简单的方法就是JSON.parse(JSON.stringify())
    但是这种拷贝方法不可以拷贝一些特殊的属性（例如正则表达式，undefine，function）
1.2 用递归去复制所有层级属性
function deepCopyTwo(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj == 'object') {
        for (const key in obj) {
            //判断obj子元素是否为对象，如果是，递归复制
            if (obj[key] && typeof obj[key] === "object") {
                objClone[key] = deepCopyTwo(obj[key]);
            } else {
                //如果不是，简单复制
                objClone[key] = obj[key];
            }
        }
    }
    return objClone;
}

二、浅拷贝
Object.assign(target, ...sources)

function simpleClone(obj) {
    var result = {};
    for (var i in obj) {
        result[i] = obj[i];
    }
    return result;
}

谈谈你对Promise的理解

想详细了解，请点击查看一步步教你实现Promise/A+ 规范完整版

this的理解

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写

全局环境： this始终指向的是window对象

局部环境：在全局作用域下直接调用函数，this指向window 对象函数调用，哪个对象调用就指向哪个对象使用new实例化对象，在构造函数中的this指向实例化对象使用call或apply改变this的指向

总结：this始终指向最后一个调用它的函数的对象

ES6常用功能

1\. let/const
2\. 多行字符串/模板变量
3\. 解构赋值
4\. 块级作用域
5\. 函数默认参数
6\. 箭头函数
...

js的执行机制

单线程，只有一个线程，只能做一件事
原因：避免DOM渲染的冲突
解决方案：异步
实现方式：event-loop

什么是event-loop

事件轮询-----JS异步的解决方案
JS实现异步的具体解决方案
1、同步代码，直接执行
2、异步代码先放在异步队列中
3、待同步函数执行完毕，轮询执行异步队列中的函数

介绍宏任务和微任务 (上面问到js执行机制时可引申至此比较深入）

js异步挂起任务

内容比较多详细点击

目前JS解决异步的方案有哪些

回调函数
事件监听
发布-订阅
Promise
Generator
Async/Await

创建对象有几种方法

// 第一种：字面量
var o1 = {name: "o1"}
var o2 = new Object({name: "o2"})
// 第二种：通过构造函数
var M = function(name){this.name = name}
var o3 = new M("o3")
// 第三种：Object.create()
var p = {name: "p"}
var o4 = Object.create(p)
复制代码

Vue

MVC & MVVM的理解

想详细了解的，请查看MVVM详解

Virtual DOM的理解

一、什么是vdom？
Virtual DOM 用JS模拟DOM结构

二、为何要用vdom？

DOM操作非常非常“昂贵”，将DOM对比操作放在JS层，提高效率
DOM结构的对比，放在JS层来做（图灵完备语言：能实现逻辑代码的语言）

三、vdom核心函数有哪些

核心函数：
    h('标签名', {...属性名...}, [...子元素...])
    h('标签名', {...属性名...}, '.........')
    patch(container, vnode)
    patch(vnode, newVnode)

Vue 路由懒加载

Vue项目中实现路由按需加载（路由懒加载）的方式：

1. vue异步组件
2. es6提案的import()
3. webpack的require.ensure()

一、Vue异步组件技术：
    {
        path: '/home',
        name: 'Home',
        component: resolve => reqire(['path路径'], resolve)
    }
二、es6提案的import()
    const Home = () => import('path路径')
三、webpack提供的require.ensure()
    {
        path: '/home',
        name: 'Home',
        component: r => require.ensure([],() =>  r(require('path路径')), 'demo')
    }

自己搭建过vue开发环境吗

简单说一下搭建vue工程的步骤

Proxy与Object.defineProperty()的对比

Proxy的优点：

 1. 可以直接监听对象而非属性,并返回一个新对象
 2. 可以直接监听数值的变化
 3. 可以劫持整个对象，并返回一个新对象

Proxy的缺点：

Proxy是es6提供的新特性，兼容性不好，所以导致Vue3一致没有正式发布让让广大开发者使用

Object.defineProperty的优点：

E9以下的版本不兼容

Object.defineProperty的缺点：

只能劫持对象的属性，我们需要对每个对象的每个属性进行遍历，无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应

Vue 组件间的通信

props 和 $emit

父组件向子组件传递数量通过props传递

子组件向父组件传递通过$emit派发事件
中央数据总线EventBus
ref 和 refs
Provide 和 inject
Vuex
...

谈谈你对生命周期的理解

生命周期：Vue实例从开始创建、初始化数据、编译模板、挂载DOM-》渲染、更新-》渲染、卸载等一系列过程，称为Vue的生命周期

vue.js的生命周期一共有10个：
        beforeCreate：实例初始化之后，this指向创建实例，不能访问到data、computed、watch、method上订单方法和数据
        created：实例创建完成，可访问data、computed、watch、method上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组
        beforeMount：在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数
        mounted：实例挂载到DOM上，此时可以通过DOMAPi获取到DOM节点，$ref属性可以访问
        beforeUpdate：响应式数据更新时调用，发生在虚拟DOM打补丁之前
        updated：虚拟DOM重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作
        activated：keep-alive开启时调用
        deactivated：keep-alive关闭时调用
        beforeDestroy：实例销毁之前调用。实例仍然完全可用，this仍能获取到实例
        destroy：实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

vue的diff算法

问题：渲染真实的DOM开销是很大的，修改了某个数据，如果直接渲染到真实dom上会引起整个DOM树的重绘和重排。

Virtual Dom 根据真实DOM生成的一个Virtual DOM，当Virtual DOM某个节点的数据改变后生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode.

注意：在采取diff算法比较的时候，只会在同层级进行，不会跨层级比较。

当数据发生改变时，set方法会让调用Dep.notify()方法通知所有订阅者Watcher，订阅者就会调用patch函数给真实的DOM打补丁，更新响应的试图。

Vuex的理解及使用场景

Vuex 是一个专为 Vue 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。

Vuex 的状态存储是响应式的；当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation，这样使得我们可以方便地跟踪每一个状态的变化

Vuex主要包括以下几个核心模块：
1. State：定义了应用的状态数据
2. Getter：在 store 中定义“getter”（可以认为是 store 的计算属性），就像计算
属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值
发生了改变才会被重新计算
3. Mutation：是唯一更改 store 中状态的方法，且必须是同步函数
4. Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作
5. Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中

Vue底层实现原理 (基础的原理）

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

Vue是一个典型的MVVM框架，模型（Model）只是普通的javascript对象，修改它则试图（View）会自动更新。这种设计让状态管理变得非常简单而直观

Vue实现这种数据双向绑定的效果，需要三大模块:

Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者.
Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
Watcher：链接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应的回调函数，从而更新试图。

Observer（数据监听器）
Observer的核心是通过Object.defineProprtty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者，订阅者就是Watcher
Watcher（订阅者）
Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：
1.在自身实例化时往属性订阅器(dep)里面添加自己
2.自身必须有一个update()方法
3.待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调
Compile（指令解析器）
Compile主要做的事情是解析模板指令，将模板中变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新试图

Http协议与数据请求

HTTP发展史：（简单了解）

一、HTTP/0.9

只有一个命令GET
没有HEADER等描述数据的信息
服务器发送完毕，就关闭TCP连接

二、HTTP/1.0

增加了很多命令
增加status code和header
多字符集支持、多部分发送、权限、缓存等

三、HTTP/1.1

持久连接
pipeline
增加host和其他命令

四、HTTP2

所有数据以二进制传输（以前是以字符串）
同一个连接里面发送多个请求不再需要按照顺序来
头信息压缩以及推送等提高效率的功能

HTTP工作原理

HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。

客户端向服务器发送一个请求报文，请求报文：【请求方法、URL、协议版本、请求头部和请求数据】

服务器以一个状态行作为响应，响应的内容：【协议的版本、成功或失败代码、服务器信息、响应头部和响应数据】

HTTP请求/响应的步骤

客户端连接到Web服务器
发送HTTP请求
服务器接受请求并返回HTTP响应
释放连接TCP连接
客户端（浏览器）解析HTML内容

HTTP主要特点

简单快速
灵活
无连接
无状态
支持B/S、C/S模式

HTTP报文的组成成分

请求报文{ 请求行、请求头、空行、请求体 } 请求行：{http方法、页面地址、http协议、http版本} 响应报文{ 状态行、响应头、空行、响应体 }

HTTP方法

GET---获取资源
POST---传输资源
PUT---更新资源
DELETE---删除资源
HEAD---获取报文首部

POST和GET方法（基础）

GET在浏览器回退时时无害的，而POST会再次提交请求
GET请求会被浏览器主动缓存，而POST不会，除非手动设置
GET请求参数会被完整的保留在浏览器历史记录里，而POST中的参数不会被保留
GET请求在URL中传送的参数是有长度的限制，而POST没有限制
GET请求参数会暴露，不安全
GET参数通过URL传递，POST放在Requset Body中

HTTP状态码（基础）

1xx：指示信息类，表示请求已接受，继续处理
2xx：指示成功类，表示请求已成功接受
3xx：指示重定向，表示要完成请求必须进行更近一步的操作
4xx：指示客户端错误，请求有语法错误或请求无法实现

5xx：指示服务器错误，服务器未能实现合法的请求

常见状态码

200 OK：客户端请求成功
206 Partial Content：客户发送了一个带有Range头的GET请求，服务器完成了它（当时音频或视频文件很大时返回206）
301 Moved Permanently：所请求的页面已经转移至新的URL
302 Found：所请求的页面已经临时转移至新的URL
303 Not Modified：客户端有缓冲的文档并发出看一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用
403 Forbidden：对请求页面的访问被禁止
404 Not Found：请求资源不存在
500 Internal Server Error：服务器发生不可预期的错误原来缓冲的文档还可以继续使用
503 Server Unavailable：请求未完成，服务器临时过载或宕机，一段时间后可恢复正常

什么是持久连接

HTTP协议采用”请求-应答“模式，当使用普通模式，既非Keep-Alive模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）
当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的链接持续有效，当出现对服务器的后续请求时，Keep-Alive功能避免了建立或者重新建立连接
注意：keep-alive是1.1版本才有

请描述 HTTP 握手过程？

当建立协议的时候，TCP进行了3次握手

1、客户端请求连接服务器

2、服务器响应成功

3、客户端回应服务器准备开始连接

当终止协议的时候，tcp进行了4次握手

1、客户端向服务器发送，断开请求

2、服务器向客户端发送，还有数据没有传输完毕，请稍等

3、服务器向客户端发送，传输完毕，可以随时断开请求了

4、客户端向服务器发送，你断开请求吧，不用回复了

然后各自断开请求

5、服务器断开请求

6、客户端等待2秒后没有收到消息，断开请求

image.png

更多的知识点
引申问题HTTP与TCP/IP区别？详细点击

常见浏览器及其内核

-webkit-：webkit核心浏览器，Chrome
-moz-：Gecko核心浏览器，fixfox
-o-：Opera核心浏览器，Opera
-ms-：微软的IE浏览器

跨域通信的几种方式

JSONP（只支持GET请求）
window + hash
window + domain
window + name
postMessage
WebSocket
CORS(Cross-origin resource sharing) 跨域资源共享（所有的HTTP请求）
nginx反向代理

性能与安全

提升页面性能的方法有哪些（太详细了）

资源压缩合并、减少HTTP请求

非核心代码异步加载---------》异步加载的方式---------》异步加载的区别

利用浏览器缓存------------》缓存的原理【可以问一问可深可浅，我也没整太明白】
浏览器缓存机制详见

利用CDN

预解析DNS

等等

安全类

CSRF：（称为跨站请求伪造）（Cross-site request forgery）缩写CSRF
CSRF预防措施：Token验证、Refer验证（页面来源）、隐藏令牌
XSS缩写（cross-site scripting）跨域脚本攻击

什么是同源策略及限制

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制
源======协议+域名+端口（默认为80）源不一样就是跨域了
不同源之间不能执行以下情况，以下情况都是同源时执行：

Cookie、LocalStorage和indexDB无法读取
DOM无法获得
AJAX请求不能发送（最常见）

初中级前端面试题整理