零碎补充面试题

自己看的提纲

HTML

1.HTML语义化

• 易修改、维护。无障碍阅读支持。

• 搜索引擎友好，利于 SEO。

• 面向未来的 HTML，浏览器在未来可能提供更丰富的支持。

2.meta标签

 1. http-equiv属性  可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容
 2. name属性  主要用于描述网页，对应属性值为content，主要是便于搜索引擎机器人查找信息和分类信息用的。

1.<meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/”>
    如果网页过期，那么存盘的cookie将被删除。必须用GMT的时间格式。
2.<meta http-equiv='expires' content='时间' >
    用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
3.<meta http-equiv=”Refresh” content=”5;URL”>
    告诉浏览器在【数字】秒后跳转到【一个网址】
4.<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″>
    设定页面用的字符集。
  <meta charset=”utf-8″>
    在HTML5中设定字符集的简写写法。
5.<meta http-equiv=”Pragma” content=”no-cache”>
    禁止浏览器从本地计算机的缓存中访问页面内容。访问者将无法脱机浏览。
6.<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> 
    强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染，如果是双核
浏览器就用chrome内核。

1.<meta name=”description” content=””>
告诉搜索引擎，当前页面的主要内容是xxx。
2.<meta name=”keywords” content=””>
告诉搜索引擎，当前页面的关键字。
3.<meta name=”author” content=””>
告诉搜索引擎，标注网站作者是谁。 
4.<meta name=”copyright” content=””>
标注网站的版权信息。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
在移动设备浏览器上，设置视口宽度，缩放比例。禁用缩放（zooming）功能，用户只能滚动屏幕。

<meta content="telephone=no" name="format-detection">
忽略将数字变为电话号码

<meta name="format-detection" content="email=no" />
忽略识别邮箱

<meta content="yes" name="apple-mobile-web-app-capable">
IOS中Safari允许全屏浏览

name属性最重要的：搜索引擎首先派出机器人自动检索页面中的**keywords**和**decription**，并将其加 入到自己的数据库，然后再根据关键词的密度将网站排序。

3.HTML5新特性

CSS

5.双飞翼布局的几种方式

手写两种

1\. header和footer占屏幕全部高度，高度固定
2\. 中间的contaier部分是一个三栏布局
3\. left和right宽度固定，middle自适应填满整个区域；高度为三栏中最大的高度；

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4）

圣杯+双飞翼+flex：juejin.cn/post/684490…

www.cnblogs.com/woodk/p/514…

6.css水平居中的方式有哪些

手写一两种

水平：

1. 父块子行内：text-align: center
2. 定宽 块：margin: 0 auto;    其实就是左右auto
3. 定宽 块：定位 + margin-left负数
4. 不定宽 块： 定位 +translateX(-50%)
5. 定宽 块：display: flex; justify-content: center;

垂直：同上

1. 行内 line-height

2. 定位2方法
3. flex布局：display: flex; align-items: center;

水平垂直：同上

1. 定位同上
2. flex同上
3. 定宽 块： position: absolute;width: 200px;top: 0;right: 0;bottom: 0;left: 0;margin:auto;}

7.display:none和 visibility：hidden区别

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

8.响应式布局？有哪些实现响应式的方法

1.实现不同屏幕分辨率的终端上浏览网页的不同展示方式

<meta name="viewport" content="width=device-width, initial-scale=1, 无缩放
maximum-scale=1, 最大最小缩放1，user-scalable=no"禁止页面缩放>

width:可视区域的宽度，值可为数字或关键词device-widthheight:同widthintial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。user-scalable:是否可对页面进行缩放，no 禁止缩放

2.通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。 它根据条件告诉浏览器如何为指定视图宽度渲染页面。

小于等于480px的时候广告隐藏

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}  

假如我们要设定兼容 iPad 和 iPhone 的视图，那么可以这样设置：

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
介于768和1024之间的时候
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

www.jianshu.com/p/927790abd…

9.单位em,rem,vh

**1.px：**绝对单位，页面按精确像素展示

**2.em：**相对单位，整个页面内1em不是一个固定的值。

• 如果自身定义了font-size按自身来计算

• 自身没定义，参照父元素字体

• 浏览器默认字体是16px，整个页面都没有规定font-size时，在全局1em = 16px

文字排版用em就比较方便，比如菜单、表格之类，一列表格最长显示4个字就可以把宽度设置为4em。

此外只要改变字体的大小就能很轻易的调整所有元素的大小

**3.rem：**相对单位， 相对根节点html的字体大小 root em

• 确定了body的font-size值之后，rem 可以当做绝对长度用

chrome强制最小字体为12号，设置成 10px 最终都会显示成 12px，当html的font-size设置成10px,子节点rem的计算还是以12px为基准，

**4.vw：**视窗宽度，1vw等于视窗宽度的1%。 viewpoint width

**5.vh：**视窗高度，1vh等于视窗高度的1%。 viewpoint height

6.vmin： vw和vh中较小的那个。

7.vmax： vw和vh中较大的那个。 

10.清除浮动

1.额外标签法 W3C推荐 

 2.父元素 加 overflow: hidden 

 3.父元素 加 after伪元素 

 4.父元素 加 双伪元素

.big::after{
    content: '';
    display: block;

    height: 0;           /* 高度0 */
    clear: both;         
    visibility: hidden;
}

.big::before,.big::after{
    content: '';
    display: table;     /* 一前一后像个表格 */
}
.big::after{
    clear: both;
}

11.BFC

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

人话：

BFC 内部浮动元素不会到处乱跑；
和浮动元素产生边界。

• 定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。

• 浮动不会影响其它块格式化上下文中元素的布局

• 清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

  创建BFC：

  根元素

  float: (不是 none)

  position: (为 absolute 或 fixed)

  display: inline-block table-cell (表格单元格HTML表格单元格默认属性) table-caption (表格标题,HTML表格标题默认属性)

  overflow: (不为visible的块元素)

JavaScript

1.基本数据类型、判断方法

Number，String，Boolean，Symbol

null，undefined

引用数据类型：Object：function，Array，Date

**typeof：**null显示为object，函数显示为function

instanceof： 准确判断[]、{}、function

                      基本类型不一定              

symbol

Symbol函数前不能用new命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。也就是说，由于 Symbol 值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

let s1 = Symbol('foo');let s2 = Symbol('bar');s1 // Symbol(foo)s2 // Symbol(bar)s1.toString() // "Symbol(foo)"s2.toString() // "Symbol(bar)"

let s1 = Symbol();let s2 = Symbol(); s1 === s2 // false // 有参数的情况let s1 = Symbol('foo');let s2 = Symbol('foo'); s1 === s2 // false

2.闭包 

3.定时器(两个区别)

window.setTimeout (function() {    			 
    到时了调用                 
}, [2000])
window .setInterval(function() {                 
    每隔xx调用                
},1000)

window.clearTimeout()
window.clearInterval()

4.堆内存、栈内存。说一下深浅拷贝

原生JS

• 浅：

  • for...in...

  • Object.assign(新对象, 要拷贝的旧的) ES6新增

    <!-- 修改新拷贝的，会影响原来被拷贝的-->
    

• 深：

  • 递归。如果是复杂数据类型，就进入它，重新按for in遍历这部分

    • 是不是数组 数组一定要放第一个。

    • 是不是对象

    • 其它：简单数据类型

  var d = {}; var d1 = {}; function deepCopy(newobj, oldobj) { for (var k in oldobj) { // 1.是不是数组 if (oldobj[k] instanceof Array) { newobj[k] = []; deepCopy(newobj[k], oldobj[k]); // 2.是不是对象 } else if (oldobj[k] instanceof Object) { newobj[k] = {}; deepCopy(newobj[k], oldobj[k]); // 3.简单数据类型 } else { newobj[k] = oldobj[k]; // 直接赋值，不进去递归了 } } }

5.ES6的各种新特性（promise注意）

zhuanlan.zhihu.com/p/102442557

let const var区别

zhuanlan.zhihu.com/p/113025497

**const，**不能修改 栈内存中 的值和地址。复杂类型的话，变量指向的那个内存地址不得改动

对于基本类型，string，number，boolean，这些变量值都是存在栈内存，赋值就是改变，所以不能再次赋值。
对于引用类型，object，array，这些变量的地址存储在栈内存，修改属性，不会改变栈内存的地址，所以可以修改属性。

const如果引用的是一个对象，只能保证引用对象的这个指针不变，但对象本身的数据结构是可以改变的。如：

const foo = {}; // 为 foo 添加一个属性，可以成功foo.prop = 123;foo.prop // 123 // 将 foo 指向另一个对象，就会报错foo = {}; // TypeError: "foo" is read-only

6.正则表达式

手写判断邮箱的

7.js动画事件

8.es6的几种异步处理 或者说怎么实现异步

juejin.cn/post/684490…

9.promise和async有什么区别

Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的。

async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。

两者的区别： Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。

而async await代码看起来会简洁些，异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。

 async await与Promise一样，是非阻塞的。 async await是基于Promise实现的，可以说是改良版的Promise。

10.defer和async

segmentfault.com/q/101000000…

Vue

1.Vue的生命周期

2.虚拟DOM和diff算法原理

3.双向数据原理

4.router原理等等

5.MVVM

6.vue一般用过哪些属性

computed

网络

1.HTTP、HTTPS

http的状态码.

3xx状态码出现的很多，304

2.五层模型

3.HTTP2

4.TCP

tcp的三次握手，如果没有第三次会怎么样？

5.UDP

6.http如何判断post 请求和get请求

Node

1.node和js的区别

node = ECMAScript + nodejs API
javascript = ECMAScript + webAPI

2.node的内核

工程

1.Webpack

2.git

3.设计模式

数据结构

1.了解哪些数据结构？

队列特点

算法题

1.不用set、sort、实现一万个数的去重升序排序 （不断优化时间复杂度）

www.jb51.net/article/461…

2.字符串操作题

3.各种排序算法、复杂度、稳定性、优缺点

手写快排

4.随机生成一个十万以内的数然后转为字符串，比如99999就是九万九千九百九十九

www.jb51.net/article/187…

5.生成一千个随机数，在1-100000之间，去重和排序。

用sort和Set

不用sort

其它补充

1.跨域的几种方式

2.了解哪些网络攻击方法，怎么防御

3.sql注入怎么防御

4.回流重绘

5.防抖和节流

6.js单线程是怎么异步的

宏任务和微任务哪个先执行

7.浏览器缓存的类型

缓存中的 Last-Modified / If-Modified-Since和Etag / If-None-Match

理解

1.你认为前端是做什么的

2.前端工程化

www.jianshu.com/p/88ed70476…

3.前后端分离

juejin.cn/post/687594…

包括在项目中怎么与后端沟通的

4.模块化

一、用JS进行开发的弊端: 
1.文件依赖     
	顺序问题，后引入的文件依赖前面的，但也不是每个文件都是相互依赖的

	<!-- 模块化开发中 文件和文件之间的依赖比较明确 -->

2.命名冲突导致代码覆盖

	JS语法不够严谨，其他文件声明同名变量不报错，会覆盖之前文件里的变量

	<!-- 模块化开发中代码是半封闭的，让需要 被其他文件访问的 代码开放，其它代码封闭 -->

二、Node.js模块化开发:

	一个功能就是一个模块，多个模块组成完整应用
	抽离一个模块不会影响其他功能

1.Node规定一个JavaScript文件就是一个模块。

    1)模块内部 定义的变量和函数，默认情况下外部无法得到
    2)被导出模块 内部用exports对象 进行成员导出，
      要用的模块，用require导入其他模块