上汽大通内部前端面试题（纯干货）（一）

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方。

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-grow     属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink   属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

相同点: 都保存在浏览器端，且是同源的（浏览器同源：域名、协议、端口号相同）
不同点
存储大小的不同：
localStorage的大小一般为5M
sessionStorage的大小一般为5M
cookies的大小一般为4K
有效期不同：
localStorage的有效期为永久有效，除非你进行手动删除。
sessionStorage在当前会话下有效，关闭页面或者浏览器时会被清空。
cookies在设置的有效之前有效，当超过有效期便会失效。
localStorage和sessionStorage的作用域的区别
不同浏览器无法共享localStorage或sessionStorage中的信息。
相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），
但是不同页面或标签页间无法共享sessionStorage的信息。

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
第一次页面加载会触发 beforeCreate, created, beforeMount, mounted
beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 
完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前） 
在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，
把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后） 
在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。
实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。
完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前）
 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。
 可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） 
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。
调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，
应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

定义和使用场景 : Vuex是通过全局注入store对象，来实现组件间的状态共享。
在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，
这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可
Vuex采用MVC模式中的Model层，规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。
再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，
可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。
在当前前端的spa模块化项目中不可避免的是某些变量需要在全局范围内引用，此时父子组件的传值，
子父组件间的传值，兄弟组件间的传值成了我们需要解决的问题。
虽然vue中提供了props（父传子）commit（子传父）兄弟间也可以用localstorage和sessionstorage。
但是这种方式在项目开发中带来的问题比他解决的问题（难管理，难维护，代码复杂，安全性低）更多。
vuex的诞生也是为了解决这些问题，从而大大提高我们vue项目的开发效率。

keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，
它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。
它提供了include与exclude两个属性，允许组件有条件地进行缓存。
<keep-alive include="componentName">
  <component></component>
</keep-alive>
将缓存name为componentName的组件。
<keep-alive exclude ="componentName">
  <component></component>
</keep-alive>
反之，exclude 则不会缓存该组件
keep-alive的两个钩子函数: activated与deactivated。用处 => 因为keep-alive会将组件保存在内存中，
并不会销毁以及重新创建，所以不会重新调用组件的created等方法，
需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息，
即 prop 向下传递，事件向上传递。

transform 和 translate
transform指变换、变形，是css3的一个属性，和其他width，height属性一样
translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，
元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少
例如：
transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离
transform：translate(-20px,0) 表示从元素的当前位置延x轴方向，向左移动20px
transform 有很多其它属性值，translate3D（3D变换）,scale（2D缩放）等其他的变换方式。
transition 
transition  在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性
语法 transition：需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行
transition属性写在最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。
只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式。
例如：
transition:width 2s;
transition:translate 2s;
transtion:all 2s。

1、html和xhtml有什么区别?
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言。
1.XHTML 元素必须被正确地嵌套。
2.XHTML 元素必须被关闭。
3.标签名必须用小写字母。
4.空标签也必须被关闭。
5.XHTML 文档必须拥有根元素。
2、CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、
后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]      !important 比内联优先级高

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;
浮动元素的上下左右居中：
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
绝对定位的左右居中：
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
还有更加优雅的居中方式就是用flexbox
4、CSS3有哪些新特性？
(1）CSS3实现圆角（border-radius），阴影（box-shadow），
(2）对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
(3）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
(4）增加了更多的CSS选择器  多背景 rgba
(5） 在CSS3中唯一引入的伪元素是 ::selection.
(6）媒体查询，多栏布局
(7）border-image
5、html5有哪些新特性、移除了那些元素？
(1）拖拽释放(Drag and drop) API
(2)  语义化更好的内容标签
（header,nav,footer,aside,article,section）
(3）音频、视频API(audio,video)
(4）画布(Canvas) API
(5）地理(Geolocation) API
(6）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
(7）sessionStorage 的数据在浏览器关闭后自动删除
(8）表单控件，calendar、date、time、email、url、search  
(9） 新的技术webworker, websocket, Geolocation
移除的元素：
1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2. 对可用性产生负面影响的元素：frame，frameset，noframes；

(2) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，
不用请求，减少请求次数
(3) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
(4) 当需要设置的样式很多时设置className而不是直接操作style。
(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6) 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
(7) 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
(8) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
7、经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
(1) 在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，
发现字体小于12，可直接作为图片使用 
(2) a标签对里不能嵌套a标签对 
(3) 若给a标签内的内容样式加上样式，需要设置display:block;（在IE中如果设置宽高会自动变成块，在FF中则不会），
但如果设置了float属性，就不需要设置display:block。 
(4) ul，ol在FF默认情况下，有list-style-type样式和padding值，dl在IE和FF默认情况下，
有padding值，所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。 
(5) 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应 
(6) 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 
(7) css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；
对于IE这样设定就已经可以了。但在mozilla中不能居中。 
解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是，
如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里， 
你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。 
(8) 浮动ie产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离，
这时需要设置display:inline; //使浮动忽略 
(9) 透明度：IE:filter:alpha(opacity=100) 非IE：opacity：1 
(10) IE行间自定义属性有效，非IE无效。 

1、请用Css写一个简单的幻灯片效果页面，要用css3。使用animation动画实现一个简单的幻灯片效果。 
2、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
1)图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，
如果前者小于后者，优先加载。
2)如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
3)如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
4)如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
5)如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
3、sessionStorage和localstroage与cookie之间有什么关联, cookie最大存放多少字节
三者共同点：都是保存在浏览器端，且同源的。
区别:
1、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
2、存储大小限制也不同，cookie数据不能超过4k，sessionStorage和localStorage 但比cookie大得多，可以达到5M
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，
即使窗口或浏览器关闭
4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面(即数据不共享)；
localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的( 即数据共享 )。
4、用纯CSS创建一个三角形的原理是什么？
把上、左、右三条边隐藏掉（颜色设为 transparent） #demo { width: 0; height: 0; border-width: 20px;
 border-style: solid; border-color: transparent transparent red transparent; }

简单的方式： 上面的div宽100%， 下面的两个div分别宽50%， 然后用float或者inline使 其不换行即可

readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，
当表单元素在使用了disabled后，当我们将表单以POST  或GET的方式提交的话，这个元素的 值不会被传递出去，
而readonly会将该值 传递出去。

console.log()
 console.alert()
 console.show()
 console.msg ()

A、null instanceof Object
 B、null ===undefined
C、NaN===NaN
D、null====undefined

A、 ！（3<=1）
B、 （2<3）‖(3<2)
C、”a”==”a”)&&(“c”!=”d”)
D、（4>=4）&&(5<=2)