前段面试汇总

面试汇总
CSS相关：
1.
介绍一下CSS的盒子模型

1. 

标准盒模型：content+border+padding+margin

宽度=内容的宽度+ border + padding + margin
1.
怪异盒模型：content+border+padding+margin

宽度=内容宽度+ margin（内容宽度包含了border + padding）
1.
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, height3.CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
1.
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

div：
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;
1.
如何垂直居中一个浮动元素

①已知元素的高宽（父元素设置相对定位）：
top:50%;
left:50%;
width:mpx;
height:n px;
margin-top:-m/2 px;
margin-left:-n/2 px;
②未知元素的高宽（父元素设置相对定位）：
margin:auto;l
eft:0;
right:0;
top:0;
bottom:0;
1.
CSS3有哪些新特性？

RGBA和透明度
文字阴影：text-shadow：水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
1.
用纯CSS创建一个三角形的原理是什么？

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
1.
常见的兼容性问题？

CSS：
①图片间隙==》img: display:block;
②双倍外边距==》给浮动元素设置 display:inline;
③默认高度12px ==》给元素设置 font-size:0; 或 overflow:hidden;
④表单元素在一行高度不一致 ==》给元素设置 float:left;
⑤鼠标指针Bug ==》cursor:pointer;
⑥IE自带3像素问题。使用float，使用dis6play：inline-3px
⑦Hover点击失效，正确的书写顺序：link、visited、hover、active
⑧z-index给父元素添加position：relative
JS:
事件对象 e || event
阻止浏览器默认事件：e.preventDefault || e.returnValue = false
阻止事件冒泡：e.stopPropagation || e.cancelBubble = true
事件监听：obj.addEventListener || obj.attachEvent
事件源：e.srcElement || e.target
1.
对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC规定了内部的Block Box如何布局。
定位方案：
1.内部的Box会在垂直方向上一个接一个放置。
2.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻 Box的margin会发生重叠。
3.每个元素的margin box 的左边，与包含块border box的左边相 接触。
4.BFC的区域不会与float box重叠。
5.BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响 到外面的元素。
6.计算BFC的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发BFC
1.
根元素，即html
2.
float的值不为none（默认）
3.
overflow的值不为visible（默认）
4.
display的值为inline-block,table-cell,table-caption
5.
position的值为absolute或fixed

1. 

清除浮动的方式？

1.使用带clear属性的空元素 clear:both
2.Css的overflow：hidden
3.使用css的：after {content:””;display:block;clear:both}
1.
移动端的布局用过媒体查询吗？

通过媒体查询可为不同大小和尺寸的媒体定义不同的CSS，适应相应设备的显示
1.

里边

2.CSS : @media only screen and (max-device-width:480px) {/css样式/}
1.
CSS优化、提高性能的方法有哪些？

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字
避免！important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则
1.
margin和padding分别适合什么场景使用？

何时使用margin：
1.需要在border外侧添加空白
2.空白处不需要背景色
3.上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：
1.需要在border内侧添加空白
2.空白处需要背景颜色
3.上下相连的两个盒子的空白，希望为两者之和。
1.
怎么让Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
1.
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度？

外层div使用position：relative；
高度要求自适应的div使用：
position: absolute;
top: 100px;
bottom: 0;
left: 0
1.
CSS隐藏几种元素的方法：

Opacity：0 仍占据空间
Visibility：hidden 仍占据空间
Display：none 不占据空间
z-index
1.
一个200*200的div在不同分辨率上下左右居中，用CSS实现

div {
width: 200px;height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
1.
怎么把一个盒子放在底部，内容不够的时候在底部，内容超过的时候在内容下边？

1. 

Flex的属性及用法
2.
多个div怎么都向左排列，说出尽可能多的方法
3.
选择器有哪些？现有三个li，我想选择第二个，用什么方法（哪个选择器）
4.
HTML页面加载的顺序是什么
5.
rem布局原理
6.
移动端适配
7.
CSS3动画（animation）
8.
H5新特性？
9.
优化：https://mp.weixin.qq.com/s/piLgf1uaz1cTZ8bHTQ1hjA

JS面试题：
1.
$（function（）{}）的含义
2.
jQuery的动画怎么写
3.
活动页秒杀怎么做
4.
自动登录怎么写，利用jQuery cookie
5.
Ajax的过程
6.
Git 怎么创建分支 上传下载文件的命令
7.
Swiper版本 做过3d效果的swiper
8.
Js基本数据类型，复杂类型，如何判断数据类型
9.
判断基本数据类型
10.
es6 promise

es6小结： https://mp.weixin.qq.com/s/TmtZBe38dFU-_AqLFd7t0g
1.
链式调用
2.
对象的深浅拷贝
3.
this理解
4.
瀑布流，懒加载
5.
Webpack原理
6.
如何理解闭包？变量的作用域？使用闭包的注意点？
7.
跨域问题及解决办法?
8.
怎么进行项目优化的？
9.
前后端如何交互的？
10.
前后端联调？
11.
前端测试
12.
浏览器缓存？
13.
JS中如何检测一个变量是否是string类型？请写出函数实现
14.
如何判断数据类型为数组？

1.使用instanceof方法instanceof 用于判断一个变量是否某个对象的实例，
var arr=[];
console.log(arr instanceof Array) //返回true
2.Object.prototype.toString.call(arr) === '[object Array]
console.log([].constructor == Array)
1.
Array.isArray([])
2.
Constructor

var arr = [];
arr.constructor === Array //ruturn true
1.
Js中数组迭代：

every() :　对数组中的每一项执行函数，如果每一项都返回 true ,则 该方法返回 true。
some(): 对数组中的每一项执行函数，只要有一项返回了 true , 则该方法返回 true。
filter(): 对数组中的每一项执行函数，把里面返回 true 的项， 组成一个数组返回。
forEach() 对数组中的每一项执行函数，没有返回值。类似于for循 环。
map() 对数组中的每一项执行函数，返回（处理后的）每一项。
1.
jQuery动画对列怎么控制
2.
数组去重
3.
单例模式
4.
手写二级菜单和三级菜单
5.
事件冒泡，事件委托
6.
动态创建的元素绑定事件绑不上怎么解决
7.
移动端事件和？
8.
移动端300ms延迟？
9.
继承
10.
原型链的原理？

框架 ：
Vue常见面试题：https://mp.weixin.qq.com/s/U2mf-e2mm4fpMvIehUyvbQ
Vue的坑：https://mp.weixin.qq.com/s/VFTkLXLuPbMemdGL-C5pQA
React常考面试题：
https://mp.weixin.qq.com/s/Q4tVWxACmw1Rd8fQHfC-ow
路由原理：
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。
改变浏览器地址而不向服务器发出请求有两种方式：
在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页 内导航
使用H5的window.history功能，使用URL的hash来模拟 一个完整的URL
ES6知道哪些
新增的let，const等声明变量的关键字：
let：
不带变量提升
不可重复声明
块级作用域
暂时性的死区
const：和let相同，区别在于const定义的是一个常量，值类型时值不可变，引用类型时指针不可变
…：展开运算符/剩余操作符
箭头函数：es6新增的一种函数形式，和之前相比最大的特点在于函数内部this会指向函数外部的this，也就是说基于箭头函数的上下文环境，可以防止this丢失
1，bind,call,apply的区别？
都是用来改变函数的this对象的指向的；
第一个参数都是this要指向的对象；
都可以利用后续参数传参；
bind是返回对应函数，便于稍后调用，apply、call是立即调用；
cookie，localStorage，sessionStorage用法及区别，
cookie：条数限制（50？），大小限制（4k？）、每次存储读取都会向服务器发送请求、???
localStorage：条数无限制，大小无限制、永久有效
代码如何进行版本管理
git版本管理？
有哪些方法优化加载
A. 图片懒加载，滚动到相应位置才加载图片。原理是这个可以用js监控滚动的位置，当初图片位置出现或者即将出现在可视区域时，进行加载。
B. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
C. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
合并脚本和样式表
D.图片是用Base64编码减少页面请求数
E.异步路由/分片打包
怎么防止页面表单多次提交
设置提交标识false，通过if条件判断提交标识是否为false如果是则可以提交，并将提交标识改为true，否则不提交并返回false.
快速找出某个字符在字符串的位置
str.indexOf（“a”）
8,数组去重方法
去看利用对象属性不能重复的方法，把数组里数字取出当做属性，如果不存在则把它的属性值设为1，存在的话则把属性值++. 最后通过for in 循环，用一个新数组 把 属性值push到新的空数组里
9，怎么判断一个对象是不是有这个属性
var xiaoming = {name: ‘小明’};
xiaoming.hasOwnProperty(‘name’); // true
可以用hasOwnProperty()方法
如果用in操作符的话不能判断这个属性是不是继承来的
因为所有对象最终都会在原型链上指向object
参数数组转化为数组？
方法一：
var args = Array.prototype.slice.call(arguments);
方法二：
var args = [].slice.call(arguments, 0);
方法三：
var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push(arguments[i]);
}
或者es6新增了扩展运算符(…)以及Array.from()方法，可以直接将类数组转换为真正的数组。
12，怎么遍历Set?
For in , for of , forEach
13,如何判断数组类型为数组
使用instanceof方法instanceof 用于判断一个变量是否某个对象的实例，
var arr=[];
console.log(arr instanceof Array) //返回true
Object.prototype.toString.call(arr) === '[object Array]
console.log([].constructor == Array)
Array.isArray([])
14,Js中对数组迭代有哪些方法
every() :　对数组中的每一项执行函数，如果每一项都返回 true ,则该方法返回 true。
some(): 对数组中的每一项执行函数，只要有一项返回了 true ,则该方法返回 true。
filter(): 对数组中的每一项执行函数，把里面返回 true 的项，组成一个数组返回。
forEach() 对数组中的每一项执行函数，没有返回值。类似于for循环。
map() 对数组中的每一项执行函数，返回（处理后的）每一项。
15,Js中如何检测一个变量是string类型
function a(obj){
return typeof(obj)==“string”;
}
16,写出3个使用this的典型应用
作为对象方法调用
作为函数调用
作为构造函数调用
使用 apply 或 call 调用
17,New操作符里进行了哪些操作
1、创建一个空对象
varobj=new Object();
2、设置原型链
obj.proto= Func.prototype;
3、让Func中的this指向obj，并执行Func的函数体。
var result =Func.call(obj);
4、判断Func的返回值类型：
如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。
if (typeof(result) == “object”){ func=result;}else{func=obj;;
18,存储值的方法
Cookie ,localstorage sessionStorage websql indexDB
19, 如何解决跨域
jsonP插件 ，使用后端cors中间件允许访问
Js如何实现懒加载
懒加载优势:
(1) 节省网络资源 – 一次性加载所有资源很慢
(2) 对用户体验 – 节省流量, 使用友好
(3) 对服务器而言 – 减轻负载压力
在可视区域外的图片延迟加载，当图片即将进入可视区域时加载图片
Ajax是什么，ajax的交互模型
原型继承与类继承的区别
1、类式继承中：使用构造函数初始化对象的属性，通过调用父类的构造函数来继承这些属???new ???prototype???
2、原型式继承中：去掉了构造函数，但需要将对象的属性和方法写一个{}里申明。准确的???prototype???
引用传递和值传递的区别
引用传递的传递的指针，内存是栈内存里面，
值传递传递的值，内存是在堆里。
一个数组如何扁平化输出
git使用方法
ssh-keygen -t rss -C user.name zhangsan@abc.com
拷贝公钥到github
git config --global user.name zhangsan + git config -global user.email zhangsan@abc.com
git clone git@lab.com:org/project.git
git checkout -b project-20170227-zhangsan-bugfix
修改代码
git status
git add .
git commit -am “bugfix”
git push --set-upstream origin project-20170227-zhangsan-bugfix
怎么优化webpack?
生产环境去掉热加载，devtool(false), logger(如redux-logger)等，
CommonsChunkPlugin提取第三方代码
Externals=》告诉webpack无需打包哪些库文件，然后从外部用 CDN 引入。
.UglifyJsPlugin高质量js压缩

如果没有webpack怎么模块化管理
State庞大怎么分块
可以按功能（控制显隐）、按类型（数据、按钮）等去把state分成几个小的state，最后集合在一起导出
平时怎么维护你的项目？
先期团队必须确定好全局样式（global.css），编码模式(utf-8) 等；
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如 页面 模块 开始和结束）；
CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
JS 分文件夹存放 命名以该JS功能为准的英文翻译。
图片采用整合的 images.png png8 格式文件使用 - 尽量整合在一起使用方便将来的管理
平常怎么压缩代码的？
gulp-uglify压缩js
gulp-clean-css压缩css
gulp-imagemin压缩图片
一个页面三个请求怎么做
https://blog.csdn.net/qtfying/article/details/79667505
一次http请求的过程
域名dns解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户