前端面试汇总

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)。

---

最全前端面试问题及答案总结：http://www.javashuo.com/article/p-dmngwevj-g.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。

 

参考：

http://www.javashuo.com/article/p-alimeqgr-z.html 

https://www.imooc.com/article/28337

http://www.javashuo.com/article/p-sgmbdwzs-t.html

http://www.javashuo.com/article/p-etdbeape-v.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