前端妹子总结的面试题

HTML以及CSS篇，集中在CSS

1. 说下你常用的几种布局方式，集中往盒模型、flex布局说(至于grid布局，这个我看过没有用到过)
　　答：flex布局、父相子绝、盒模型box-sizing:border-box


2. 实现水平居中的几种方法？
　　答：text-align:center; position:absolute; position:relative;
　　position:absolute; left:0; right:0; //拉伸
　　margin:0 auto; //水平垂直居中

 

3. animate和translate有没有用过，一些常见的属性说下？
　　答：animation:动画名称 执行时间 运动曲线 延迟时间 循环次数 执行方向
　　animation:dh 1s ease-in-out 0s infinite
　　transfrom: translate(x轴,y轴)

 

4. CSS实现宽度自适应100%，宽高16:9的比例的矩形。

　　先想想

5. 如何实现左边两栏一定比例，左栏高度随右栏高度自适应？

　　先想想

 

JavaScript篇(重要)

1. 变量提升遇到的一些简单code题
　　

for(var i = 0; i < 5; i++) {

}

//等同于
var i;
for(i = 0; i < 5; i++) {

}

 

2. 说一下对闭包的理解，以及你在什么场景下会用到闭包？
　　闭包是访问另一个函数作用域里变量。
　　

function foo() {
　　　var i = 0;
　　　return function() {
　　　　//对上一级的操作
　　　　console.log(i);
　　　} 
　　}

　　let f = foo();
　　f();

 


3. 说下你对原型与原型链的了解度，有几种方式可以实现继承，用原型实现继承有什么缺点，怎么解决？

　　答：原型是共享的,一般方法都定义在原型上。
　　原型链是寻找一个方法,在本函数体体内不存在,就会到原型上找,
　　直到Object.prototype为止,这样就形成一个链条
　　

 1 function foo() {
 2 
 3 　　}
 4 　　foo.prototype.sayHello = function() {
 5 　　　　console.log(1);
 6 　　}
 7 
 8 　　function bar() {
 9 
10 　　}
11 　　//bar.prototype = foo.prototype; //实现继承原型
12 　　bar.prototype = new foo();
13 
14 　　let b = new bar();
15 　　console.log(b.__proto__);

 

4. iframe的缺点有哪些？
　　iframe的缺点是：过多的HTTP请求、产生多个页面,不易管理、浏览器后退按钮失效

　　Ajax的原生写法
　　

 1 let xhr = null;
 2 　　if(window.XMLHttpRequest) {
 3 　　　　xhr = new XMLHttpRequest();
 4 　　}else {
 5 　　　　xhr = new ActiveX("Microft.XMLHTTP");
 6 　　}
 7 
 8 　　xhr.onreadystatechange = function() {
 9 　　　　if(xhr.readyState == 4) {
10 　　　　　　if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
11 
12 　　　　　　}
13 　　　　}
14 　　}
15 
16 　　xhr.open("get",url,true);
17 　　xhr.send(null);
18 
19 　　　　//POST请求
20 
21 　　xhr.open("post",url,true);
22 　　xhr.setRequestHeader("Content-type","from-xxx-")
23 　　xhr.send(params);

 


5. 为什么会有同源策略？
　　答：为了服务器的安全,如果其他服务器和客户端能够随便请求自己服务器的资源
　　就会造成用户信息漏泄

6. 前端处理跨域有没有遇到过，处理跨域的方式有哪几种方式去解决
　　jsonp实现,img:src实现,使用php get_file_contents();
　　CORS:跨域资源共享


7. 怎么判断两个对象是否相等
　　Object.is(); 　　 obj === obj

8. 代码实现一个对象的深拷贝
　　Object.assign(); //浅拷贝


9. 从发送一个url地址到返回页面，中间发生了什么
　　答：先使用dns翻译域名
　　请求对应的ip地址服务器
　　服务器返回相应页面
　　浏览器渲染页面
10. 说下工作中你做过的一些性能优化处理
　　减少定时器
　　减少HTTP请求
　　验证表单,减轻服务器压力
　　减少DOM操作
　　减少事件对象,统一使用事件委托,事件冒泡处理各种事件。
　　使用变量存储相应的对象
　　减少循环中的对象
　　不使用eval、Function

 

ES6篇(引导篇，相对重要)

这块面试官主要是问你哪块用的比较多，你可以引导性地把面试官往你会的地方说

1. 箭头函数中的this指向谁？
　 答：箭头函数没有this,所以箭头函数里的this指向上一个花括号this


2. 如何实现一个promise，promise的原理，以及它的两个参数是什么？

function foo() {
return new Promise((resolve,reject) => {

})
}

 

promise原理：通过Promise对象,监听内部状态,内部状态变化的时候,触发相应的回调
回调执行完返回this,移除数组第一个then,再重新监听内部状态

两个参数：一个异步请求成功方法回调函数、一个异步请求失败回调函数

 

3. promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的，分别这么写有什么区别，什么情况下会两个都同时用到？

　　答：暂时不知道。　　

4. map和set有没有用过，如何实现一个数组去重，map数据结构有什么优点？

　　答：暂时不知道。

 

计算机网络题

1. http、https、以及websocket的区别
答：http是超文本传输协议、https就是超文本传输协议+SSL、webscoket就是ws://....
用来传输非常小的数据,通常用于聊天室。

 

2. http常见的状态码，400,401,403状态码分别代表什么？
答：304(重定向)、200(成功)、404(没有找到页面)、500(服务器错误)、
400(语义有误|请求参数错误)、401(当前请求需要用户验证)、403(接收请求,拒绝执行)

 

3. 协商缓存和强缓存的区别

 

4. 说下计算机网络的相关协议？
FTP协议、HTTP协议、TCP/IP协议、

 

浏览器兼容性

rgba IE8不支持,使用opacity和filter:alpha(opacity=20);

CSS3前缀：-webkit
-moz
-ms-
-o-

 

兼容性策略：

 offsetLeft和offsetTop：offsetParent对象必须无边框有宽度或高度，offsetLeft属性对象中必须设置定位。

offsetWidth和offsetHeight：兼容性好。

clientWidth和clientHeight：IE6标准版有问题

 

posted @ 2018-07-13 16:24  Visionarie  阅读(174)  评论(0)  编辑  收藏  举报