2019前端面试题准备

题目来源来自：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.浏览器对页面进行渲染呈现给用户

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343