2019前端面试题准备

作者: Frio_ | 来源:发表于2019-11-24 23:08 被阅读0次

题目来源来自：https://xiedaimala.com/tasks/e67878e4-ef45-4545-9cad-a1946c6e21f1

HTML

1.如何理解 HTML 语义化的？

1.让页面内容结构化，易于理解
2.利于搜索引擎的爬虫和SEO
3.在没有css的情况下也一样方便阅读和理解
4.便于维护
比如，
标题可以用 <h1> ~ <h6>；
边栏用 <aside>；
头部用 <header>；
主体内容用 <main>；
页脚用 <footer>；

2.meta viewport 是做什么用的，怎么写？

meta viewport主要是用来适配移动端的，写法如下：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0/>

3.你用过哪些 HTML 5 标签？

<header>定义一个页面或是区域的头部</header>
<div>
        <section>定义一个区域</section>
        <aside>定义页面内容的侧边框部分</aside>
</div>
<footer>定义一个页面或是区域的底部</footer>

4.H5 是什么？

因为H5不仅指HTML5，一般客户所说的H5涉及到的技术范围太广了，所以
可以理解为通过前端开发实现一种市面上可以有比较炫酷动效或者功能的手机端网页

CSS

1.说一下两种盒模型

W3C标准盒子模型

W3C标准盒子模式包括内容(content)、填充(padding)、边框(border)、边界(margin)

image.png

IE盒子模型

width和height把padding和border包括进去了。

image.png

2.如何垂直居中？

有好几种方式，这里我主要记三种

flex实现

<div class="parent">
    <div class="child"></div>
</div>

.parent{
    width:300px;
    height:300px;
    display:flex;
    align-items:center;
}
.child{
    width:100px;
    height:100px;
}

利用绝对定位实现

.parent{
    width:300px;
    height:300px;
    position:relative;
}
.child{
    width:100px;
    height:100px;
    position:absolute;
    top: 50%;
    margin-top: -50px;/*如果不确定元素的高度,可以使用transform:translateY(-50%)*/
}

利用display:table-cell实现
给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。

.parent{
    width:300px;
    height:300px;
    display:table;
}
.child{
    width:100px;
    height:100px;
    display:table-cell;
    vertical-align:venter;
}

原生JS

1.必考：ES 6 语法知道哪些，分别怎么用？

let关键字，可以声明一个块级作用域的变量
let与var的区别，let声明一个块级作用域的变量，而var声明一个函数作用域的变量。简单来说，let声明的变量只作用在它所在的花括号内
const关键字：声明一些不允许改变的量
模板字符串：
在ES6之前，我们往往这么处理模板字符串：
通过“\”和“+”来构建模板
而对ES6来说
基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定；
ES6反引号(``)直接搞定；
箭头函数(Arrow Function)：
箭头函数有几个使用注意点。
（1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。
（3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
函数的参数默认值
在ES6之前，我们往往这样定义参数的默认值：

// ES6之前，当未传入参数时，text = 'default'；
function printText(text) {
    text = text || 'default';
    console.log(text);
}

// ES6；
function printText(text = 'default') {
    console.log(text);
}

printText('hello'); // hello
printText();// default

类
我们知道，javascript和其他语言不同，它不是传统的面向对象的语言，我们通常使用function来模仿对象，以下是最常用的方法：

function people(身高, 体重) {
            //people对象的属性
            this.身高 = 身高;
            this.体重 = 体重;
        }
        //people对象的方法
        people.prototype.说话 = function () {
            alert("我很帅")
        };

代码看着不是很直观，刚接触js的程序员很难想到这是一个对象，而且方法和属性没有写在一起，代码整洁性很差。

在ES6我们引入CLASS，这样写：

class people {
        //属性写这里
    constructor(身高, 体重) {
        this.身高 = 身高;
        this.体重 = 体重;
    }
        //方法写这里
    speak() {
        alert("我很帅")
    }
}

类的继承
既然ES6中我们的类用class写，那么类的继承又该怎么实现呢？还是之前的例子，在ES5中，我们要写一个继承是很麻烦的。我们用对象冒充/call/apply方法继承对象属性，用原型链继承对象的方法。就好像这样：

function man(身高, 体重){
    people.call(this,身高,体重) //call()继承属性
}
man.prototype = new people()//原型链继承方法

ES6中我们实现类的继承更为方便，先看下面例子：

class man extends people{
    constructor(身高,体重){
        super(身高,体重)
    }
}

我们使用extends people()来实现原型链继承，继承了父类原型中的方法；super()参数填写需要继承的父类属性；constructor()中填写子类的所有属性。
在作用上，class继承与传统的“function继承”没有任何区别。实际上，class就是语法糖，它大大简化了继承所需要的代码。

2.必考 Promise、Promise.all、Promise.race 分别怎么用？

3.必考：手写函数防抖和函数节流

//外卖配送接单，js防抖举例子
  function debounce(fn,wait) {
    var timerId = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
  };


  //js节流，例如游戏技能cd
  //节流throttle代码：
  function throttle(fn, delay) {
    let canRun = true; // 通过闭包保存一个标记
    return function() {
      // 在函数开头判断标记是否为true，不为true则return
      if (!canRun) return;
      // 立即设置为false
      canRun = false;
      // 将外部传入的函数的执行放在setTimeout中
      setTimeout(() => {
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
        fn.apply(this, arguments);
        canRun = true;
      }, delay);
    };
  }

4.必考：手写AJAX

function ajax(type, url, success) {
    var req = new XMLHttpRequest();
    req.open(type, url, true);
    req.send();
    req.onreadystatechange = function() {
      if (req.readyState == 4 && req.status == 200) {
        var result = req.responseText;
        success(result);
      }
    };
  }
  ajax("GET", "http://xxxx", function(result) {
    console.log(result);
  });

5.必考：这段代码里的 this 是什么？

this的指向：

fn()
this=> window/global
obj.fn()
this=>obj
fn.call(xx)
this=>xx
fn.bind(xx)
this=>xx
fn.apply(xx)
this=>xx
new Fn()
this=>新对象
fn=()=>{}
this=>外面的this

6.必考：闭包/立即执行函数是什么？

闭包：由于在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之回收，但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数——也就是闭包，便拥有了访问上级作用域中的变量的权限，即使上级函数执行完后作用域内的值也不会被销毁。

7.必考：什么是 JSONP，什么是 CORS，什么是跨域？

什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
同源又是什么呢？
所谓同源是指，域名，协议，端口均相同。
如：
http://www.abc.com/index.html 调用 http://www.abc.com/server.php （非跨域）
http://www.abc.com/index.html 调用 http://www.bcd.com/server.php （主域名不同:abc/bcd，跨域）
http://abc.123.com/index.html 调用 http://bcd.123.com/server.php （子域名不同:abc/bcd，跨域）
http://www.abc.com:8080/index.html 调用 http://www.abc.com:8081/server.php （端口不同:8080/8081，跨域）
http://www.abc.com/index.html 调用 https://www.abc.com/server.php （协议不同:http/https，跨域）
什么是CORS？
查阅mdn关于CORS可知，跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
什么是JSONP？
JSONP就可以解决跨域问题。JSONP是网页通过动态创建<script>元素向服务器发起请求，当服务器接收到请求后，将数据放在一个指定名字的回调函数里传回来。而正因此<script>只能GET不能POST，JSONP也只能GET不能POST。
解决跨域问题
JSONP
代理
例如www.abc.com/index.html需要调用www.bcd.com/server.php，可以写一个接口www.abc.com/server.php，由这个接口在后端去调用www.bcd.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。
PHP端修改header（XHR2方式）
在php接口脚本中加入以下两句即可：

header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

8.实现一个new操作：

新生成了一个对象
新对象隐式原型链接到函数原型
调用函数绑定this
返回新对象

new Person("John") = {
    var obj = {};
    obj.__proto__ = Person.prototype; // 此时便建立了obj对象的原型链： obj->Person.prototype->Object.prototype->null
    var result = Person.call(obj,"John"); // 相当于obj.Person("John")
    return typeof result === 'object' ? result : obj; // 如果无返回值或者返回一个非对象值，则将obj返回作为新对象
}

常考：async/await 怎么用，如何捕获异常？
常考：如何实现深拷贝？
常考：如何用正则实现 trim()？
常考：不用 class 如何实现继承？用 class 又如何实现？
常考：如何实现数组去重？
放弃：== 相关题目（反着答）
送命题：手写一个 Promise

HTTP

1.cookie,sessionStorage,localStorage的区别？

相同点：
cookie，localStorage，sessionStorage都是在客户端保存数据的，存储数据的类型：都是字符串。

不同点：
1、生命周期：
1）cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。
2）localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
3）sessionStorage仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、网络流量：cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，所以，webstorage更加节约网络流量。
3、大小限制：cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M
4、安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。
5、使用方便性上：WebStorage提供了一些方法，数据操作比cookie方便；
setItem (key, value) —— 保存数据，以键值对的方式储存信息。
　　 getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
　　removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
　　clear () —— 删除所有的数据
　　key (index) —— 获取某个索引的key

2.HTTP缓存图解

HTTP缓存图解

3.Http 请求的整个过程

1.域名解析 --> 2.发起 TCP 的 3 次握手 --> 3.建立 TCP 连接后发起 http 请求 --> 4.服务器响应 http 请求，浏览器得到 html 代码 --> 5.浏览器解析 html 代码，并请求 html 代码中的资源（如 js、css、图片等） --> 6.浏览器对页面进行渲染呈现给用户