前端面试汇总
1.你所了解的Web攻击技术
(1) XSS (Cross-Site Scripting，跨站脚本攻击）
指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
(2) SQL注入攻击
(3) CSRF ( Cross-Site Request Forgeries，跨站点请求伪造)
指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
2.浏览器是如何渲染页面的？
渲染的流程如下：
1) 解析HTML文件，创建DOM树
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2) 解析CSS
优先级：浏览器默认设置<用户设置 < 外部样式<内联样式<HTML中的style样式
3) 将CSS与DOM合并
构建渲染树（Render Tree)。
4) 布局与绘制
重绘（repaint) 和重排 (reflow)。
最全前端面试问题及答案总结：https://www.cnblogs.com/autismtune/p/5210116.html
3. CSS选择符有哪些？哪些属性可以继承？优化级算法如何计算？CSS3新增伪类有哪些？
1) 选择器
- id选择器（#myid)
- 类选择器 (.myclassname)
- 标签选择器 (div，h1，p)
- 相邻选择器 (h1 + p)
- 子选择器 (ul > li)
- 后代选择器 (li a)
- 通配符选择器 (*)
- 属性选择器 (a[rel="external"])
- 伪类选择器 （a:hover， li:nth-child)
2) 可继承的样式： font-size ， font-family，color，text-indent；
不可继承的样式： border，padding，margin，width， height；
4) 优先级就近原则，同权重情况下样式定义最近者为准；
载入样式以最后载入的定位为准；
5) 优先级
!important > id > class > tag
important 比 内联优化级高，但内联比 id 要高
6) CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
4. CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image
5. 对BFC规范的理解？
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC的两个相邻的块级盒在
垂直方向（和布局方向有关系）的margin会发生折叠。
(W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）
6.html5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML 和 HTML5 ？
1) HTML5现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
2) 拖拽释放(Drag and drop) API
语义化更好的内容标签（header，nav， footer，aside， article， section)
音频、视频API（audio， video)
画布( Canvas) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
7.ajax过程
1) 创建XMLHttpRequest对象，也就是创建一个异步调用对象
2) 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
3) 设置响应HTTP请求状态变化的函数
4) 发送HTTP请求
5) 获取异步调用返回的数据
6) 使用javascript 和 DOM实现局部刷新
8.HTTP状态码
1) 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2) 200 OK 正常返回信息
3) 201 Created 请求成功并且服务器创建了新的资源
4) 202 Accepted 服务器已接受请求，但尚未处理
5) 301 Moved Permanently 请求的网页已永久移动到新位置
6) 302 Found 临时性重定向
7) 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
8) 304 Not Modified 自从上次请求后，请求的网页未修改过。
9) 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
10) 401 Unauthorized 请求未授权。
11) 403 Forbidden 禁止访问。
12) 404 Not Found 找不到如何与 URI 相匹配的资源。
13) 500 Internal Server Error 最常见的服务器端错误
14) 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）
9. CommonJS、AMD、CMD
JS中的模块规范（CommonJS、AMD、CMD），如果你听过js模块化这个东西，那么你就应该听过CommonJS或AMD已经CMD
这些规范。
1) CommonJS 定义了很多普通应用程序（主要指非浏览器的应用）使用的API。
可以使用CommonJS API编写应用程序，然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。
在兼容CommonJS的系统中，可以使用JavaScript开发以下程序：
(1) 服务器端JavaScript应用程序
(2) 命令行工具
(3) 图形界面应用程序
(4) 混合应用程序（如，Titanium 或 Adobe AIR)
NodeJS是CommonJS规范的实现，webpack也是以CommonJS的形式来书写。
Node.js的模块系统，就是参照CommonJS规范来实现的。
在CommonJS中，有一个全局性方法require()，用于加载模块。
var math = require('math');
而浏览器不兼容CommonJS的根本原因，在于缺少四个Node.js环境的变量。
(1) module
(2) exports
(3) require
(4) global
只要能够提供这四个变量，浏览器就能加载CommonJS模块。
2) AMD
由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。
因为require是同步的。
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。
但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，
浏览器处于"假死"状态。
因此，浏览器端的模块，不能采用"同步加载" (synchronous)，只能采用"异步加载"(asynchronous)。这就是AMD规范诞生的背景。
CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD（异步模块定义）出现了，它就主要为前端JS的表现制定规范。
AMD 是 "Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。
所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require(['math'], function (math) { math.add(2,3); });
math.add() 与 math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。目前，主要有两个javascript库实现了AMD规范：
require.js 和 curl.js
Require.js就是实现AMD规范的呢。
require.js的诞生，就是为了解决两个问题：
(1) 实现js文件的异步加载，避免网页失去响应；
(2) 管理模块之间的依赖性，便于代码的编写和维护；
3) CMD
CMD也是用在浏览器端的。
CommonJS是用在服务器端的，同步的，如nodeJS
AMD，CMD是用在浏览器端的，异步的，如Require.js 和 Seajs
其中，AMD先提出，CMD是根据CommonJS 和 AMD基础上提出的。
CMD是SeaJS在推广过程中对模块定义的规范化产出
CMD 和 AMD的区别有以下几点：
(1) 对于依赖的模块AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行。
(2) CMD推崇依赖就近， AMD推崇依赖前置。
10. require 和 import 的区别
1) 遵循规范
- require 是 AMD规范引入方式
- import 是 ES6 的一个语法标准，如果要兼容浏览器的话必须转化成 ES5的语法
2) 调用时间
- require是运行时调用，所以require理论上可以运用在代码的任何地方
- import 是编译时调用，import 命令具有提升效果，会提升到整个模块的头部，最好放在文件开头
3) 本质
- require 是赋值过程，import 是解构过程，在import 遇到default的时候，和 require完全不同。
- require('jquery') 和 import $ from 'jquery' 是两种完全不一样的。
11. webpack中hash、chunkhash 和 contenthash 三者的区别
参考： https://blog.csdn.net/bubbling_coding/article/details/81561362
12. Vue的服务器渲染
什么是Vue的服务器端渲染（SSR)
SSR，英文全称叫 Server side rendering， 国人叫它服务器端渲染。
SSR的定义：
Vue.js 可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将静态标记"混合"
为客户端上完全交互的应用程序。这种在服务器和客户端都可以运行的代码程序，也可以叫做"同构"。
为什么要使用服务端渲染？
1) 因为我们公司的站点很注重SEO，页面又是异步获取内容。
2) 同时也希望用户更快速的看到完整渲染的页面，从而提高用户体验。
先要用webpack创建一个配置文件来打包server端的代码。
可以利用 vue-server-renderer 插件更简单的构建SSR。
参考：
https://blog.csdn.net/sinat_17775997/article/details/83574750
https://www.imooc.com/article/28337
https://www.cnblogs.com/zhuzhenwei918/p/9266407.html
https://www.cnblogs.com/tiedaweishao/p/6644267.html
13. Vue的常见面试题
1) v-show 与 v-if 区别
(1) v-show只是CSS级别的 display: none； 和 display: block；之间的切换，而v-if 决定是否会选择代码块的内容（或组件）
(2) 什么时候用v-show ， 什么时候用v-if ?
频繁操作时，使用v-show。 一次性渲染完的，使用v-if 。
(3) 使用v-if 在性能优化上有什么经验？
因为当v-if="false"时，内部组件是不会渲染的，所以在特定条件才渲染部分组件（或内容）时，可以先将条件
设置为false，需要时（或异步，比如 $nextTick) 再设置为true，这样可以优先渲染重要的其他内容，合理利用，
可以进行性能优化。
参考：https://blog.csdn.net/sinat_17775997/article/details/89486519
参考： https://blog.csdn.net/fabulous1111/article/details/73431382
