web前端⾯试题总结（包括京东、科⼤讯飞、软通动⼒⼀些公
司）
前端⾯试总结（红⾊题为必考，其他为常考）
⼀、关于css⾯试题
1、css垂直居中的集中⽅式？
html结构如下：
<div class="box">
<div>垂直居中</div>
</div>
⽅法1：display:flex
.box{
display: flex;
justify-content:center;
align-items:Center;
}
⽅法2：绝对定位和负边距
.box{position:relative;}
.box div{position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center; }
⽅法3：translate
.box{position:relative;}
.box childdiv{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
⽅法4：table-cell
.box{
display: table-cell;
vertical-align: middle;
text-align: center;
}
⽅法5：偏移量0+margin:auto
.wrap{
positon:relative;
}
.center{
positon:absolute;
top:0;bottom:0;left:0;right:0;
margin:auto;
}
2、对于移动端的布局⽅式?
答：1.【采⽤display:flex布局兼容ie10+（推荐地址）】
2.采⽤百分⽐布局；
3.采⽤rem、em、或者vh vw来写宽⾼布局
3、对于移动端使⽤rem，em、px、vw/vh区别
答：px ：绝对单位，页⾯按像素计算，其值固定不变
em : 相对定位，相对于⽗节点的值来计算，缺点：相对于⽗节点的font-size（默认为16px）值来计算，出现层层嵌套问题，计算⿇烦
rem：相对定位，相当于em的升级版，区别在于rem相对于根元素html来计算，不会出现em的层层嵌套问题，可以作为弹性布局，其浏览器兼容性也⽐较好；（缺点：1.和根元素的font-size耦合性 强，系统字体⽅法缩⼩时，会出现布局混乱的情况，2，html头部需要插⼊⼀段js代码
vw vh：浏览器视窗⼤⼩（viewport）即：100vw = window.innerwidth 100vh = window.innerHeiht
%：百分⽐
vw 和 % 的区别：1.%是根据⽗元素的宽⾼来计算的，⽽vw则是以viewport来计算
2.100vw包括了页⾯滚动条宽度（页⾯滚动条属于viewport范围内，100vw当然包括了页⾯滚动条宽度）
4、css3的兼容问题（⼀般简单的答⼀些常⽤的兼容问题就好，不常⽤的就说碰到了百度解决的）
5、盒⼦模型（标准盒⼦模型、ie盒⼦模型）
答：盒⼦模型由 html元素的内容content+内边距padding+边框border+外边距margin组成，标准盒⼦模型（box-sizing:content-box）元素的所设宽度就是内容content宽度⽽ie盒⼦模型（box-sizing:border-box）所设宽度由content+padding+border组成
⼆、关于html5、css3⾯试题
1、html5的新属性有哪些？（列举⼀些新增常⽤的语义化标签nav、footer、section、article、aside，以及input新增属性type:date、email、time、color等，以及媒体标签(video、audio)，canvas,svg，本地存储(localstorage、sessionstorage)，websocket以及实现原理)
2、css3新增属性以及动画? ①border-radius：圆⾓边框；
②border-image：图⽚边框；
③background-size：背景的尺⼨
④background-origin：背景图⽚的定位区域
⑤text-shadow：⽂本阴影效果
个人网站源码java ⑥word-wrap：单词太长的话就可能⽆法超出某个区域，允许对长单词进⾏拆分，并换⾏到下⼀⾏
⑦transform:translate(平移)/rotate(旋转)/scale(缩放)/skew(扭曲);
⑧transition：background 2s;
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
⑨@media媒体查询
@media screen and (max-width: 300px) {
body { //写专属该媒体查询内的专属css
margin: 0px; padding: 0px;}
}
⑩animation:
3、前端seo优化有哪些？
（推荐地址：）
4、Localstorage、sessionstorage、cookie三者各个的区别，及特点，优点，本地存储使⽤场景具体怎么使⽤?
（推荐地址：）
三、关于js/jq⾯试题
1、http请求过程有哪些？
（推荐地址：）
1. 对⽹址进⾏DNS域名解析，得到对应的IP地址
2. 根据这个IP，到对应的服务器，发起TCP的三次握⼿
3. 建⽴TCP连接后发起HTTP请求
4. 服务器响应HTTP请求，浏览器得到html代码
5. 浏览器解析html代码，并请求html代码中的资源（如js、css、图⽚等）（先得到html代码，才能去这些资源）
6. 浏览器对页⾯进⾏渲染呈现给⽤户创建一个名为user的user类
7. 服务器关闭关闭TCP连接
2、原⽣ajax请求过程？
//第⼀步，创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
//第⼆步，注册回调函数
if (adyState == 4)
if (xmlHttp.status == 200) {
//取得返回的数据
var data = sponseText;
}
}
}
//第三步，配置请求信息，open(),get
//get请求下参数加在url后，.ashx?methodName=GetAllComment&str1=str1&str2=str2
xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
//post请求下需要配置请求头信息
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//第四步，发送请求,post请求下，要传递的参数放这
xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
3、post请求以及get请求的优缺点？
（1）post更安全（不会作为url的⼀部分，不会被缓存、保存在服务器⽇志、以及浏览器浏览记录中）
（2）post发送的数据更⼤（get有url长度限制）
（3）post能发送更多的数据类型（get只能发送ASCII字符）
（4）post⽐get慢
（5）post⽤于修改和写⼊数据，get⼀般⽤于搜索排序和筛选之类的操作（淘宝，⽀付宝的搜索查询都是get提交），⽬的是资源的获取，读取数据
4、对array数组处理以及string处理的⼀些常⽤⽅法?
（推荐地址：）
5.js对数据类型检测，例如：如何检测数据类型为string/number/array等
（推荐地址：）
6、如何遍历⼀个数组⾥的每个数据?（主要考遍历的⼀些⽅法 for循环，forEach()，map()⽅法，filter()）
7、js中排序的⼏种⽅式？
（推荐地址：）
php程序设计智慧树8、JavaScript中捕获/阻⽌捕获、冒泡/阻⽌冒泡，事件流
（推荐地址：）
9、怎样进⾏深拷贝及浅拷贝？他们的区别？
（推荐地址：）
web前端基础面试题10、关于this指向问题，在不同的场景下this的指向？
11、关于闭包，如何创建闭包，闭包的⽤处及缺点？
（推荐地址：）
12、怎样理解原型、原型链？
答：每个对象都会在其内部初始化⼀个属性，就是prototype(原型)，当我们访问⼀个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype⾥这个属性，这个prototype⼜会有⾃⼰的prototype，于是就这样⼀直下去，也就是我们平时所说的原型链的概念。关系：structor.prototype = obj.__proto__ ，特点：JavaScript对象是通过引⽤来传递的，我们创建的每个新对象实体中并没有⼀份属于⾃⼰的原型副本。当我们修改原型时，与之相关的对象也会继承这⼀改变。
13、数组去重的⽅法？
（推荐地址：
14、为什么会有跨域、跨域的⼏种解决⽅式？
答：（从同源策略⽅⾯进⾏回答、跨域⽅式 jsonp，设置请求头，nginx代理 vul-cli的proxyTable反向代理解决跨域）
（jsonp解决跨域推荐地址：）
15、js的⾯向对象编程特性，以及继承⽅式有哪些？（推荐地址：）
（推荐地址：）简书⼤⽜讲解通俗易懂；
16、js执⾏顺序。
async function async1(){
console.log('async1 start'); // 2
await async2();
console.log('async1 end') //5
}
async function async2(){
console.log('async2') //3
}
console.log('script start'); //1
async1();
console.log('script end') //4
console.log('script start'); // 1
setTimeout(function(){
console.log('settimeout')//6
});
let promise1 = new Promise(function (resolve) {
图片生成svg代码console.log('promise1')//2
resolve()
console.log('promise1 end') //3
}).then(function () {
console.log('promise2')//5
});
console.log('script end');//4
17、嵌套数组进⾏扁平化。（js五种扁平化数组处理）（推荐地址：
18、算法题：JavaScript实现超⼤整数相加
function add(a, b){
// 把字符串转为数组并倒序，且把每位数转为number型，为了让数组下标为0的值为个位，符合⼈的思维var arrA = a.split('').reverse().map(i => parseInt(i))
var arrB = b.split('').reverse().map(i => parseInt(i))
// 获取最长数组的长度，为了创建⼀个结果数组在最长数组的长度加1
// 符合进位思想
var maxLen = arrA.length>=arrB.length?arrA.length:arrB.length
// 这⾥的⽬的是为了让两个数组的长度相同，为长度⼩的数组缺少的元素
// 都赋值为1
for(var i = 0;i < maxLen; i++){
arrA[i] = arrA[i] !== undefined?arrA[i]: 0
}
for(var i = 0;i < maxLen; i++){
arrB[i] = arrB[i] !== undefined?arrB[i]: 0
}
// 创建指定长度的数组，并且⽐最长位数多1，⽬的是有可能进位
var resultArr = new Array()
for(var i = 0;i <= maxLen;i++ ){
resultArr[i] = 0
}
// 开始循环结果数组，然后到arrA和arrB中对应元素相加
for(var i = 0;i < maxLen;i++){
// 计算对应位数的和
var temp = resultArr[i]
temp += arrA[i]
temp += arrB[i]screenx影厅坐什么位置
// 判断对应位数的值是否是⼗位数，是则为下位数加1
if(temp >=10){
temp -= 10
// 因为resultArr⽐arrA和arrB多⼀位
resultArr[i+1] = 1
}
// 把获取到的结果赋值给对应结果数组的对应下标
resultArr[i] = temp
}
// 到这⾥说明获取到了每位相加，并且⾥⾯的值是数值型和倒序
// 判断结果数组中的最后⼀位是否为0，说明没有进位，则删除
if(resultArr[resultArr.length - 1] === 0){
resultArr.pop()
}
// 把结果数组转为倒序排列
resultArr = verse()
//把结果数组转为字符串
return resultArr.join('')
}
19、什么是防抖与节流，分别的作⽤，怎么实现？
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论