前端基础面试题

2019-03-15  本文已影响0人  啃香菜的花萝萝
1. 跨域问题

同源：两个文档需满足：协议相同，域名相同，端口相同。
跨域通信 ：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法：

2. call 和 apply 方法是做什么的？有什么区别？
3. 箭头函数的 this

箭头函数 不是function关键字定义的函数; 箭头函数中的 this 在函数被定义的时候就已经 绑定 好了，而 不是 取决于谁调用这个函数，this就指向谁。箭头函数的this取决于最近的一个非箭头父级函数的this指向。

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c: function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b(); 
obj.c();
4. css 盒子模型
盒子的组成： margin + border + padding + content css 盒子模型
5. css 优先级；浏览器是如何解析的？

浏览器解析css选择器的规则是从右向左的。

6. 什么是闭包， 应用场景？

当内部函数被保存到外部时，将会生成闭包。
由于JavaScript的垃圾回收机制，普通函数执行完之后，变量就会被直接回收。但是，闭包的方式可以让变量一直存在，不被回收。

  1. 实现公有变量。 e.g.： 函数累加器
function add () {
  var count = 0;
  function demo() {
    count ++;
    console.log(count);
  }
  return demo;
}
var counter = add();
counter();
counter();
... ...

function test() {
  var num = 100;
  function a() {
    num++;
    console.log(num);
  }
  function b() {
    num --;
    console.log(num);
  }
  return [a, b];
}
var myArr = test();
myArr[0](); // 101
myArr[1](); // 100
  1. 模块化开发，防止污染全局变量。
  2. 可以实现封装，实现私有化。

闭包应用场景：实现购物车的结账按钮，只点一次。

var something= (function() {
  var executed = false;
  return function() {
    if(!executed) {
      executed = true;
      // do something
    }
  }
})();

something();  // do something
something();  // nothing happens
7. 什么是 IIFE， 应用场景？

IIFE：立即执行函数
IIFE中定义的任何变量和函数，都会在执行结束时被销毁。适合做初始化工作。

(function() {
  var a = 123;
  var b = 234;
  console.log(a+b);
})()
8. constructor 和 prototype 的区别

任何一个prototype对象都有一个constructor属性,指向它的构造函数。

9. 如何实现继承
// Person.prototype --原型
function Person() {};
Person.prototype.name = 'sun';
var ppp  = new Person();

function Father() {}
function Child() {}
Father.prototype = Child.prototype;

function Father() {
  this.name = 'sun';
  this.age = 18;
}
// 父类方法
Father.prototype.getName = function () {
  return this.name;
}
function Child() {
  Father.call(this); // call father constructor
}
// 子类继承父类
Child.prototype = Object.create(Father.prototype);
Child.prototype.constructor = Child;
10. 输入url到渲染的过程
  1. 在浏览器地址栏输入URL
  2. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤：
    如果资源未缓存，发起新请求； 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
  1. 浏览器解析URL获取协议，主机，端口，path
  2. 浏览器组装一个HTTP（GET）请求报文
  3. 浏览器获取主机ip地址，过程如下：
    1. 浏览器缓存
    2. 本机缓存
    3. hosts文件
    4. 路由器缓存
    5. ISP DNS缓存
    6. DNS递归查询（可能存在负载均衡导致每次IP不一样）
  4. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
    1. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
    2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
    3. 客户端发送ACK=Y+1， Seq=Z
  5. TCP链接建立后发送HTTP请求
  6. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
  7. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
  8. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
  9. 服务器将响应报文通过TCP连接发送回浏览器
  10. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
  1. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
  2. 如果资源可缓存，进行缓存
  3. 对响应进行解码（例如gzip压缩）
  4. 根据资源类型决定如何处理（假设资源为HTML文档）
  5. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
  6. 构建DOM树：
  1. 解析过程中遇到图片、样式表、js文件，启动下载
  2. 构建CSSOM树：
  1. 根据DOM树和CSSOM树构建渲染树
  2. js解析
  3. 显示页面（HTML解析过程中会逐步显示页面）
11. sessionStorage,localStorage,cookie区别
12. css画三角形
div1{
  border-style: solid;
  border-width: 0px 0px 100px 100px;
  border-color: transparent transparent blue transparent;
  width: 0px;
  height: 0px;
}
13. offsetHeight， scrollHeight， clientHeight 的区别
14. 右边固定宽度，左边自适应
<style>
  body {
    display: flex;
  }
  .left{
    background-color: pink;
    height: 200px;
    flex: 1;
  }
  .right{
    background: orange;
    height: 200px;
    width: 100px;
  }
</style>
...
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

<style>
  div {
    height: 200px;
  }
  .left{
    background-color: pink;
    margin-right: 200px;
  }
 .right{
   background: orange;
   width: 200px;
   float: right;
  }
</style>

<body>
    <div class="right"></div>
    <div class="left"></div>
</body>
15. 垂直水平居中
 <style>
  .center {
    width: 400px;
    height: 300px;
    border: 1px solid black;
    margin: 0 auto;
  }
</style>
... ...
<body>
  <div class="center"></div>
</body>

<style>
  .container {
    height: 100vh;
    position: relative;
  }
  .center {
     width: 500px;
     height: 300px;
     position: absolute;
     top: 50%;
     left: 50%;
     border: 1px solid red;
     margin: -150px 0 0 -200px;
  }
</style>
...
<body>
    <div class="container">
        <div class="center"></div>
    </div>
</body>

.container {
  height: 100vh;
  position: relative;
}
.center {
  width: 500px;
  height: 300px;
  border: 1px solid orange;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.center {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}
16. 清除浮动
设置添加的子元素为空，为块级元素，高度为0，子元素看不见，并且设置clear属性。
.box1::after{
  content: "";
  height: 0;
  display:block;
  clear: both;
}

兼容问题：IE6 并不支持。但是设置以下代码，IE6就能支持。

.box1{
  *zoom:1;  
}
17. 前端需要注意的SEO
18. get 和 post 的区别

如果什么前提都没有，只考虑语法来说，这两个方式没什么区别。
如果是基于RFC规范的，那么 GET 和 POST 有不同的语义：

19. 如何优化网站的性能

content方面:

css/ js方面：

20. 什么是渐进增强？

渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:

21. arguments 是数组吗？怎么转为数组

arguments是类数组。长得像数组，也可以当数组用，但是它 不是 数组。因为数组有的方法它全没有。类数组本身是个对象。

类数组的组成：

  1. 属性要为索引属性
  2. 必须有length属性，最好加上push方法
  3. 如果加上了 splice方法，这个对象就看上去长得和数组一样了 Array.prototype.splice

题目： obj最后长啥样？

var obj = {
  "2" : "a",
  "3" : "b",
  "length" : 2,
  "push": Array.prototype.push
}
obj.push('c');
obj.push('d');

答案：{ "2" : "c", "3" : "d", "length": 4 }
原理：

Array.prototype.push = function(target) {
  arr[arr.length] = target;
  arr.length ++;
}
22. 事件委派

指的就是js事件冒泡：事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发；

23. https/ http2/ http状态码/ OSI七层协议 / cdn及cdns
24. 主流浏览器及其内核

部分答案出自：https://github.com/qiu-deqing/FE-interview

上一篇 下一篇

猜你喜欢

热点阅读