前端面试（2）

前端面试（2）
我们在上文也说了 今天呢我又面了一家 基本上都是基础题 大家看完以后记得自己私下也要背背哦

1.如何区分html和html5?

1、在文档声明上，html有很长的一段代码，并且很难记住这段代码，都是靠工具直接生成，而html5却是不同，只有简简单单的声明，也方便人们的记忆，更加精简。

2、在结构语义上；html4.0没有体现结构语义化的标签，这样表示网站的头部。html5在语义上却有很大的优势。提供了一些新的html5标签。

2.常用的浏览器有哪些 内核是什么？

1、360浏览器：Chrome内核和IE内核。

2、百度浏览器：IE和Webkit双内核。

3、QQ浏览器：Chromium内核+IE双内核。

4、猎豹浏览器：Trident和WebKit。

5、搜狗浏览器：chromium内核。

3.cookies sessionStorage和localStorage的区别？

cookie的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。
会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie，不同的浏览器有不同的处理方式session机制。
当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含session id，则为客户端创建一个session并且生成一个与此session相关联的session id，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应中返回给客户端保存。保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。

4.css3有哪些新特征？

简单来说，css就是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。而css3就是最新的CSS标准。只要我们能掌握了css、css3的各种样式属性，相信大家随心制作漂亮大方的页面都是不在话下的。下面我们结合简单代码示例，为大家总结几个重要的新特性即新增属性！
1.RGBA和透明度
RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个alpha通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中RGB值分别表示红色、绿色、蓝色，而alpha取值则为0到1（小数位一位）。
2.background属性
       background-image：设置元素的背景图像。
　　background-origin：规定背景图片的定位区域。
　　background-size：规定背景图片的尺寸。
　　background-repeat：设置是否及如何重复背景图像。
3.word-wrap属性
       word-wrap属性允许长单词或URL地址换行到下一行。
       注：所有主流浏览器都支持word-wrap属性。
　　基础语法：
　　word-wrap:normal|break-word;
4.text-shadow属性
     text-shadow属性：向文本设置阴影。
     text-shadow基础语法：
　 text-shadow：5px5px5px#FF0000;
　参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；
5.font-face属性
       font-face属性：定义自己的字体
　　在新的@font-face规则中，您必须首先定义字体的名称（比如myFirstFont），然后指向该字体文件。
6.border-radius属性
border-radius属性：是一个简写属性，用于设置四个border-*-radius属性。
　　基础语法：
　　border-radius:1-4length|%/1-4length|%;
　　注：该属性允许您为元素添加圆角边框！
7.border-image属性
      border-image：将图片规定为包围div元素的边框
　　border-image基础语法：
　　border-image:url(border.png)3030round
8.box-shadow属性
       box-shadow属性：向框添加一个或多个阴影。（盒阴影）
　　box-shadow基础语法：
　　boxshadow:10px10px5px#888888
9.媒体查询
　　媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。

5.解释一下弹性盒布局模型及适用场景？

弹性盒模型是c3规范的新的布局方式，该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间。在传统的布局中，block布局是把块级元素在垂直方向从上向下一次排列的，而inline布局则是在水平方向来排列。弹性盒布局没有这样的内在限制，操作比较自由。

6.keep-alive组件有什么作用？

能在组件切换过程中将状态保留在内存中， 防止重复渲染DOM 。 避免反复渲染影响页面性能，同时也可以很大程度上 减少接口请求 ， 减小服务器压力 。 能够进行 路由组件缓存 和 组件缓存

7.vue-router有哪些模式？

vue-router 路由模式有几种？
　　实际上存在三种模式：
　　1.Hash: 使用URL的hash值来作为路由。支持所有浏览器。
　　2.History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
　　3.Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API， 路由会自动强制进入这个模式。

8.介绍一下es6的新语法

1.函数默认值
2.箭头函数
3.对象初始化
4.解构，与对象初始化是逆向操作
5.spreadOperator 扩展运算符
6.Babe转换器安装与配置（由于node8版本不支持部分es6语法，所以要下载转换器）
7.模块导入导出
8.promise

9.git常用命令

1、获取远端库项目
　　git clone/pull
2、团队开发的基本流程（多分支合并一个分支）
　　git add . #添加改动的文件
　　git commit #（提交至本地）
　　git pull --rebase #（将服务器项目与本地项目合并）
　　git push #（将本地项目上传至远端库）
　　（在提交前要git pull --rebase 一下，确保当前的本地的代码为最新。）
3、向git库添加修改
　　git add [path］ #会把对应目录或文件，添加到stage状态
　　git add . #会把当前所有的untrack files和changed but not updated添加到stage状态
实际上是为修改内容添加index索引。
4、向版本库提交修改
　　git commit –m “XXXX” #提交修改,添加注释
5、查看当前代码库的状态
　　git status
6、创建git库
　　git init #在当前目录中生成一个.git 目录（含有.git目录的目录即是git仓库）
7、向远端库推送修改（提交修改）
　　git push origin 分支名

10.谈谈你对webpack的理解？

WebPack是一个模块打包工具，你可以使用 WebPack
管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的 HTML、JavaScript、CSS
以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源， webpack
有对应的模块加载器。 webpack
模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。