HTTP
HTTP 状态码？
RFC 规定 HTTP 的状态码为三位数，被分为五类:
1xx：表示目前是协议处理的中间状态，还需要后续操作。2xx：表示请求成功。3xx： 重定向，表示要完成请求，需要进一步操作。4xx：请求错误。5xx：服务器错误。
常用
304 （资源未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
401 （ 请求未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
http缓存方式（强缓存和协商缓存）
一、什么是缓存？
浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力
http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。
浏览器缓存分为强缓存和协商缓存
二、强缓存
强缓存：强缓存是当我们访问URL的时候，不会向服务器发送请求，直接从缓存中读取资源，但是会返回200的状态码。
如何设置强缓存？
通过设置请求头： Cache-Control
三、协商缓存
协商缓存: 协商缓存就是强缓存失效后，向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；
如何设置协商缓存？
通过设置请求头
- Last-Modified（响应头） / If-Modified-Since（请求头）
- Etag（响应头） / If-None-Match（请求头）
四、强缓存与协商缓存的区别
- 强缓存不发请求到服务器，所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器，所以资源是否更新，服务器肯定知道。
- 大部分web服务器都默认开启协商缓存。
五、HTTP缓存的步骤
首先通过 Cache-Control 验证强缓存是否可用
- 如果
强缓存可用，直接使用 - 否则进入协商缓存，即发送 HTTP 请求，服务器通过请求头中的
If-Modified-Since或者If-None-Match这些条件请求字段检查资源是否更新- 若资源更新，返回资源和200状态码
- 否则，返回304，告诉浏览器直接从缓存获取资源
谈谈三次握手和四次挥手？
一条视频讲清楚TCP协议与UDP协议-什么是三次握手与四次挥手.
跨域问题，怎么解决？
一、什么是跨域？
浏览器的同源策略：同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
二、跨域解决方案
1.jsonp
利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。
JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。
2.cors
CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。
3.nginx反向代理
实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。
使用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。
实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。
HTML
标准盒模型和怪异盒模型区别？
通过box-sizing的取值来切换盒模型，它的取值可以为content-box(标准)、border-box(怪异)；
box-sizing的默认属性是content-box。
标准盒模型（content-box）
盒子总宽度 = margin + border + padding + width
怪异盒模型（border-box）
在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border
盒子总宽 = margin + width
HTML5 有哪些新特性？
- 拖拽释放(Drag and drop) API；
- 语义化更好的内容标签（header,nav,footer,aside,article,section）；
- 音频、视频 API (audio,video)；
- 画布 (Canvas) API、矢量图SVG；
- 地理 (Geolocation) API；
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除；
- 表单控件，calendar、date、time、email、url、search…；
- 新的技术 Web Worker, WebSocket…；
什么是渐进增强和优雅降级？
- 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
CSS
元素水平垂直居中方法？
行内元素和块级元素的区别？
- 行内元素会在一条直线上排列，都是同一行的，水平方向排列。块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
- 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
- 行内元素设置 width 无效，height 无效(可以设置 line-height)，margin、padding 上下无效。
CSS3 有哪些新增属性？
box-shadow、text-shadow、animate、transfrom、 transition 、border-radius等等。
animate、transfrom 和 transition 有什么区别？
css中关于transform、transition、animate的区别.
重绘和回流？哪些情况重绘，哪些回流？
- 回流：Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。
- 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），这些属性只是影响元素的外观，风格，而不会影响布局的，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
回流必将引起重绘，而重绘不一定会引起回流。
区别：
- 引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。
- 只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会便随回流。
何时发生回流
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
- 页面一开始渲染的时候（这肯定避免不了）
- 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
如何画一条0.5px的线？
-
tansform -
渐变
#line1 {
border-bottom: 1px solid black;
transform: scaleY(0.5);
}
选择器的优先级？
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
若是行内选择符，则加1、0、0、0
若是ID选择符，则加0、1、0、0
若是类选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符，则分别加0、0、0、1
伪类和伪元素的区别？
- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
- 伪元素本质上是创建了一个有内容的虚拟容器；
- CSS3中伪类和伪元素的语法不同；伪类 :link :hover ，伪元素 ::before ::after
- 可以同时使用多个伪类，而只能同时使用一个伪元素；
flex 和 grid 介绍？
- Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
- 网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
区别
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
介绍下BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
- 16.7ms.
- 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
JavaScript
JavaScript 的基本数据类型有哪些？
- JS 中分为
七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。 - 基本类型有六种： null，undefined，boolean，number，string，symbol。
从输入url 到看到页面发生了什么？
- DNS解析
- 发起TCP链接
- 发送HTTP请求
- 服务器响应请求并返回HTTP报文
- 浏览器解析渲染页面
- 连接结束
0.1 + 0.2 === 0.3 吗？为什么？
JavaScript 使用 Number 类型来表示数字（整数或浮点数），遵循 IEEE 754 标准，通过 64 位来表示一个数字。
- 1 符号位，0 表示正数，1 表示负数 s
- 11 指数位（e）
- 52 尾数，小数部分（即有效数字）
最大安全数字：Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1，转换成整数就是 16 位，所以 0.1 === 0.1，是因为通过 toPrecision(16) 去有效位之后，两者是相等的。
在两数相加时，会先转换成二进制，0.1 和 0.2 转换成二进制的时候尾数会发生无限循环，然后进行对阶运算，JS 引擎对二进制进行截断，所以造成精度丢失。
所以总结：精度丢失可能出现在进制转换和对阶运算中
requestAnimationFrame 比起 setTimeout、setInterval的优势？
- requestAnimationFrame不需要设置时间间隔
- requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
- 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
- requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销
new 操作做了什么事情？
- 创建了一个全新的对象；
- 让this 指向新创建的对象；
- 执行构造函数里面的代码，给这个新对象添加属性和方法；
- 返回这个新的对象（所以构造函数里面不需要return）。
什么是闭包？有什么作用？
1.什么是闭包
- 定义：闭包是指有权访问另一个函数作用域中的变量的一个函数。简单的说，你可以认为闭包是一个特别的函数，他能够读取其他函数内部变量的函数。
- 自由变量：在当前作用域没有定义，在父作用域及以上定义了，他会一层一层的往上找。闭包的中那个没有被回收的变量就是自由变量。自由变量是在函数定义的那里一层层的往上找。
- 闭包产生的本质s：当前环境中存在指向父级作用域的引用
2.作用
- 希望变量长期驻扎在内存当中（一般函数执行完毕，变量和参数会被销毁）；
- 避免全局变量的污染。
- 私有化变量
- 创建模块
3.一般如何产生闭包
- 返回函数
- 函数当做参数传递
什么是作用域链？
首先要了解作用域链，当访问一个变量时，编译器在执行这段代码时，会首先从当前的作用域中查找是否有这个标识符，如果没有找到，就会去父作用域查找，如果父作用域还没找到继续向上查找，直到全局作用域为止，而作用域链，就是有当前作用域与上层作用域的一系列变量对象组成，它保证了当前执行的作用域对符合访问权限的变量和函数的有序访问。
箭头函数与普通函数的区别
this指向问题：箭头函数的this指向的是父级作用域的this,是通过查找作用域链来确定 this 的值也就是说，看的是上下文的this，指向的是定义它的对象，而不是使用时所在的对象；普通函数this 指向的是它的直接调用者。- 箭头函数没有 prototype (原型)，所以箭头函数本身没有this
- 不能直接修改箭头函数的this指向
- 箭头函数不能作为构造函数使用
- 箭头函数不绑定arguments，取而代之用rest参数…代替arguments对象，来访问箭头函数的参数列表
- 语法更加简洁、清晰
- 箭头函数不能用作Generator函数，不能使用yield关键字
深拷贝和浅拷贝的区别？怎么实现一个深拷贝？
- 浅拷贝是创建一个新对象，这个新对象有着原始对象属性值的一份精确拷贝，如果是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以其中一个对象改变了这个地址，就会影响到另一个对象
- 深拷贝是将一个对象从内存中完整的拷贝出来一份，从堆内存中开辟一个新的区域存放对象，且修改新对象不会影响原对象。
深拷贝的实现方式
- JSON.parse(JSON.stringify()) ，这种方法虽然可以实现数组或对象深拷贝,但不能处理函数和正则
- 函数库lodash的_.cloneDeep方法
- 手写递归方法
bind，call，apply 的区别？
事件委托
原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点。
作用：我们只操作了一次dom，提高了程序的性能。
js执行机制
同步和异步
为了解决js是单线程语言的问题，利用多核CPU的计算能力，HTML5提出 Web Worker 标准，允许javascript脚本创建多个线程。于是，js中出现了同步和异步
同步任务：
同步任务都在主线程上执行，形成一个执行栈。
异步任务：
js的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型：
- 普通事件，如click、resize等
- 资源加载，如load、error等
- 定时器，包括setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。
ES6 有哪些新特性？
- 新增symbol类型 表示独一无二的值，用来定义独一无二的对象属性名;
- const/let 都是用来声明变量,不可重复声明，具有块级作用域。存在暂时性死区，也就是不存在变量提升。(const一般用于声明常量);
- 变量的解构赋值(包含数组、对象、字符串、数字及布尔值,函数参数),剩余运算符(…rest);
- 模板字符串(${data});
- 扩展运算符(数组、对象);
- 箭头函数;
- Set和Map数据结构;
- Proxy/Reflect;
- Promise;
- async函数;
- Class;
- Module语法(import/export)。
JavaScript设计模式
Vue
v-if和v-for的那个优先级更高，如果两个同时出现，应该怎么优化得到更好的性能
2.x 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
3.x当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。
谈谈对vue生命周期的理解？
vue2总共11个生命周期
v-for中key的作用
- key的作用主要是为了更高效的对比虚拟DOM中每个节点是否是相同节点;
- 从源码中可以知道，Vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key,它的值就是undefined，则可能永 远认为这是两个相同的节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。
vue组件的通信方式
- props / $emit
- $children / $parent
- provide / reject
- ref
- eventBus
- Vuex
- $attrs 与 $listeners
Vue 中的methods 与computed的区别？
- 在computed中的函数，是在dom加载后马上执行的；在methods中的函数，必须要有一定的触发条件，才会执行。
- 调用方式不同：computed直接以对象属性方式调用，不需要加括号，而methods必须要函数执行才可以得到结果。
computed计算属性是基于它们的依赖进行缓存的。如果你进行多次访问的时候（在不改变值的情况下），计算属性会立即返回数据，而不必再次执行函数。并且他还可以自动执行。- 而
methods只要发生重新渲染，就必定执行该函数，他必须有一定的触发条件才能执行。
路由的两种模式及区别
hash 模式和 history 模式
hash 模式
- 浏览器兼容性较好，连 IE8 都支持
- 路径在井号 # 的后面，比较丑
history 模式
- history API 是 H5 提供的新特性
- 路径比较正规，没有井号 #
- 兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了
watch 和计算属性有什么区别？
- watch 监听的是已经在data 中定义的变量，当该变量变化时，会触发watch 中的方法。
- computed 计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量 改变时，计算属性也会跟着改变；
- 使用场景 computed：当一个属性受多个属性影响的时候使用，例：购物车商品结算功能 watch：当一条数据影响多条数据的时候使用，例：搜索数据
Vue 双向绑定原理
Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。
你对虚拟DOM原理的理解
虚拟dom是对dom的抽象，本质上是JavaScript对象
优点？
- 减少 JavaScript 操作真实 DOM 的带来的性能消耗（我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢,更因为频繁变动DOM会造成浏览器的回流或者重回,这些都是性能的杀手）
- 无须手动操作DOM，可以大大提高开发效率.
- 可以更好的跨平台,因为Virtual DOM本身是JavaScript对象，可以在多平台运用
vue组件data为什么必须是个函数，而vue根实例则没有此限制？
- data必须是个函数是保证在多实例的时候，为了保护相互之间的状态不干扰，不污染。
- 每次在创建根实例的时候，使用new的方式，全局的范围内只创建一个，不会创建多个，不会存在污染的问题，因此可以不使用函数
- 不使用return包裹的数据会在项目的全局可见，会造成变量的污染
- 使用return包裹后的数据只在当前组件中生效，不会影响其它组件
vue设计原则的理解
vue是一个渐进式的javscript框架 易用，高效，灵活
渐进式javascript框架：
跟其他大型框架不同的是，vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库活既有的项目整合，另一方面，当现代的工具链以及各种支持类库结合使用的时候。vue也完全能够为复杂的单页面提供驱动
核心库就是一些声明是的渲染，组件系统 只关注视图层
可以作为一个库在其他项目中去用，也能作为一个大型的框架去搭建项目，这就是渐进式
学习过程也是渐进式的，只学习模板语法，基础功能也能开发，后期才学习工程化，
易用性：
vue提供数据响应式，声明式模板语法和基于配置的组件系统等核心特性，这些使我们只需要关注应用的核心业务即可，只要会写js。html和css就能轻松编写vue应用
灵活性：
渐进式框架最大的优点就是灵活性，如果应用足够小，我们可能仅仅需要vue的核心特性就能去完成功能了，随着应用规模的不断扩大，我们才可能追歼引入路由，状态管理，vue-cli等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线
高效性：
超快的虚拟DOM和diff算法使我们的应用有最佳的性能表现， 追求更高效的过程还在继续，vue3中引入proxy对数据响应式的改进以及编译器中对于静态内容的改进都会让vue更加高效
你了解哪些vue的性能优化方法？
- 路由懒加载
- 使用CDN链接
- 第三方插件按需导入
- keep-alive缓存页面
- 使用v-show复用DOM
- v-for遍历避免同时使用v-if
- 变量本地化
- 事件销毁
- 长列表性能优化
- 图片懒加载
- 无状态组件标记为函数式组件
- 服务端渲染。
前端工程化
常见的Webpack Loader
- file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
- url-loader： 与file-loader类似，区别是用户可以设置一个阈值，大于阈值会交给file-loader处理，小于阈值时返回文件base64 形式编码 (处理图片和字体)
- image-loader：加载并且压缩图片文件
- babel-loader：把 ES6 转换成 ES5
- sass-loader：将SCSS/SASS代码转换成CSS
- css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
- style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
- postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合
- eslint-loader：通过 ESLint 检查 JavaScript 代码
- autoprefixer 插件自动补齐 CSS3 前缀
常见的Webpack Plugin
plugin:本质是插件，基于事件流框架 Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
html-webpack-plugin简化 HTML 文件创建 (依赖于 html-loader)clean-webpack-plugin：目录清除
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
