前端面试题整理二

CSS

1、垂直居中的方法

文本内容：使用line-height
flex布局
扩展：flex常用属性
1、flex-direction 容器内元素的排列方向(默认横向排列)
2、flex-wrap 容器内元素的换行(默认不换行)
3、justify-content 元素在主轴（页面）上的排列
4、align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
5、align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
tips：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
绝对定位和负边距
transform: translate定位
绝对定位和0，然后margin:auto
display: table-cell

2、CSS选择器和优先级

浏览器默认属性 < 继承自父元素的属性 < 通配符选择器 < 标签选择器 < 类选择器 < 结构伪类选择器 < id选择器 < 行内样式 < !important

3、关于BFC

BFC 全称为块格式化上下文 (Block Formatting Context) 。

如何创建BFC

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

BFC的作用：

利用BFC避免margin重叠
属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC
自适应两栏布局
清楚浮动
当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动

4、盒模型

标准盒模型
页面所占实际宽高 = 内容 + 左右内边距 + 左右边框
IE盒模型（怪异盒模型）
设置的宽高就是页面所占实际宽高，只会挤压内容宽高。

JS

1、立即执行函数

声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行

(function (){
//code
})()

作用：立即执行函数会形成一个单独的作用域，我们可以封装一些临时变量或者局部变量，避免污染全局变量

2、JS事件循环机制

原因：JavaScript 是一门单线程语言。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，用户引擎必须使用 event loops。Event Loop 包含两类：一类是基于 Browsing Context ，一种是基于 Worker ，二者是独立运行的。下面本文用一个例子，着重讲解下基于 Browsing Context 的事件循环机制。

任务队列
同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入 Event Queue 。主线程内的任务执行完毕为空，会去 Event Queue 读取对应的任务，推入主线程执行。上述过程的不断重复就是我们说的 Event Loop (事件循环)。
1、整体 script 作为第一个宏任务进入主线程，遇到 console.log，输出 script start
2、遇到 setTimeout，其回调函数被分发到宏任务 Event Queue 中
3、遇到 Promise，其 then函数被分到到微任务 Event Queue 中,记为 then1，之后又遇到了 then 函数，将其分到微任务 Event Queue 中，记为 then2
4、遇到 console.log，输出 script end

3、get和post的区别

get是从服务器上获取数据，post是向服务器传送数据
对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB
get安全性非常低，post安全性较高。但是执行效率却比Post方法好

4、HTTP状态码

常用：
200("OK")
一切正常。实体主体中的文档（若存在的话）是某资源的表示。
400("Bad Request")
客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。
500("Internal Server Error")
服务期方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。
301("Moved Permanently")
当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码。
404("Not Found") 和410("Gone")
当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。
409("Conflict")
当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。
系列：
1XX：通知
2XX：成功
3XX：重定向
4XX：客户端错误
5XX：服务端错误

5、关于ES6的类

ES6引入了Class（类）这个概念，通过class关键字可以定义类。该关键字的出现使得其在对象写法上更加清晰，更像是一种面向对象的语言

6、关于打包效率的提高

1、减少打包体积：

（1）对于用的比较少的库，可以去掉（我去掉了jquery以及lodash），用到的地方，参考源码自己写

（2）非用不可的又比较大的库（我这里用了monaco-edit），使用cdn方式引入（配置externals）

（3）按需加载

（路由懒加载配合webpack'的require.ensure实现：其实总的体积并没变，但是会提高首页加载速度）
2、加快打包速度
（1）升级webpack版本
（2）HappyPack插件
（3）用dll剥离第三方库

7、webpack常用插件

compression-webpack-plugin（服务器端渲染）
vconsole-webpack-plugin（用于移动端模拟开发者工具的插件)

8、服务器端渲染

定义：简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示
解决痛点：难以SEO和首屏加载缓慢。
最新的实现方式：NodeJS配合Jade

9、VUE按需加载的方式

vue的异步组件加载
vue-router import()——动态加载ES模块

{
      path: '/index',
      component: () => import('@/page/index/index'),
      name: '首页'
 },

webpack提供的require.ensure()

{ path: '/index', component: r => require.ensure([], () => r(require('@/pages/index/index')),
 'index'), meta: { title: '首页' } }

按需加载的远离
1.首先.vue文件最终经过vue-loader处理之后也是js文件，所以最终也是通过script加载
2.父子组件是由vue框架来维护的，也就是js来维护的抽象的父子组件
3.vue-router确实是通过hash也就是路由去匹配到需要加载哪个组件，然后通过script加载这个组件打包出来的js文件

10、视口单位

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

vw：1vw等于视口宽度的1%。
vh：1vh等于视口高度的1%。
vmin：选取vw和vh中最小的那个。
vmax：选取vw和vh中最大的那个。