转载：
　　一篇文章搞定前端面试

TCP
UDP
套接字socket
HTTP协议
DNS解
HTTP请求发起和响应
页面渲染的过程
页面的性能优化

评论和共享

一行代码实现数组去重？
[...new Set([1,2,3,1,'a',1,'a'])]
怎么判断两个对象相等？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

obj={
    a:1,
    b:2
}
obj2={
    a:1,
    b:2
}
obj3={
    a:1,
    b:'2'
}


JSON.stringify(obj)==JSON.stringify(obj2);//true
JSON.stringify(obj)==JSON.stringify(obj3);//false

CommonJS 中的 require/exports 和 ES6 中的 import/export 区别？

CommonJS 模块的重要特性是加载时执行，即脚本代码在 require 的时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。
ES6 模块是动态引用，如果使用 import 从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
import/export 最终都是编译为 require/exports 来执行的。
CommonJS 规范规定，每个模块内部，module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即 module.exports ）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性。
export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

浏览器缓存
浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下：

先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；
当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，称为http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；
强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源；
区别是，强缓存不对发送请求到服务器，但协商缓存会。
当协商缓存也没命中时，服务器就会将资源发送回客户端。
当 ctrl+f5 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；
当 f5 刷新网页时，跳过强缓存，但是会检查协商缓存；

强缓存

Expires（该字段是 http1.0 时的规范，值为一个绝对时间的 GMT 格式的时间字符串，代表缓存资源的过期时间）
Cache-Control:max-age（该字段是 http1.1 的规范，强缓存利用其 max-age 值来判断缓存资源的最大生命周期，它的值单位为秒）

协商缓存

Last-Modified（值为资源最后更新时间，随服务器response返回）
If-Modified-Since（通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存）
ETag（表示资源内容的唯一标识，随服务器response返回）
If-None-Match（服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）

页面渲染的完整流程是怎样的？

图片里的 alt 属性是做什么的？

查看答案
如果用户看不到图像，alt 属性可以提供替代信息。alt 属性应该用于描述，而那些仅仅是装饰目的图像，可以为空

小贴士
装饰性的图像应该有一个空的 alt 属性
web 爬虫可以通过 alt 属性理解图像的信息，因此认为它对于搜索引擎优化（SEO）非常重要
在 alt 末尾加 . 可以提高访问性

不采用缓存的目的是什么，你如何实现它？

查看答案
浏览器有一个临时的存储网站文件的缓存，所以他们不需要在切换或重新加载同一个页面时再次重新下载。服务器设置发送头信息告诉浏览器在给定的一段时间内使用存储文件。这极大加快了网站的速度和节省了带宽

然而，当开发人员网站更新时，因为用户的缓存依然指向旧的文件，这会造成问题。如果缓存的 CSS 和 JavaScript 文件引用的元素不再存在，已移除或已重命名时，它会保留原有功能或破坏网站

禁用缓存是一个强制浏览器下载新文件的过程。通过命名来区分于旧文件

一个常用的强制浏览器重新下载文件的技术是在文件的结尾处增加一个查询字符串

src=”js/script.js” => src=”js/script.js?v=2”
浏览器认为这是一个不同的文件但是避免了修改文件名的必要

一个页面里是否可以包含多个

元素，

查看答案
都可以。W3C 文档声明这些标签代表离它们最近祖先区域的页眉（

小贴士
W3C 推荐你想用多少就用多少，但是每一个页面的区域只能有一个，即，body，section 等等

<script> 标签的 defer 和 async 是什么？

查看答案
如果两个属性都没有的话，脚本将同步下载和执行，并且会阻塞 document 解析，直到脚本执行完成（默认行为）。脚本下载和执行按它们书写的顺序进行

defer 属性在 document 解析的过程中下载脚本，但是在 document 解析完成之前执行，等价于执行了一个内置的事件监听器 DOMContentLoaded。defer 脚本顺序执行

async 属性在 document 解析过程中下载脚本，但是会暂停解析器，直到脚本解析执行完成。async 不一定按顺序执行

注意：两个属性必须在脚本拥有 src 属性时才起作用（即，在内联脚本不起作用）

小贴士
请用 中放置一个 defer，允许浏览器在页面还在解析过程中下载脚本，因此把脚本放到 body 之前是更好的选择
如果脚本之间相互依赖，请用 defer.
如果脚本是独立的，请用 async.
如果 DOM 必须加载完并且内容还未放置到 DOMContentLoaded 监听器中时，请用 defer

相比 HTML，XHTML 有哪些不同？

查看答案
有一些关键区别：

一个 XHTML 元素必须要有一个 XHTML
属性值必须用引号包裹
禁止属性简写（例如，checked=”checked” 不能简写为 checked）
元素必须正确的被嵌套
元素必须闭合
特殊字符必须被转义
小贴士
任何被标签都是自闭合
标签和属性区分大小写，通常小写

你能说出 @media 属性的四种类型吗？

查看答案
all，适用于所有媒体设备
print，仅适用于打印机
screen，仅适用于屏幕设备（台式电脑、平板电脑、移动设备等）
speech，仅适用于屏幕阅读器

如何统计网页里出现多少种html标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 获取所有标签
var doms = document.getElementsByTagName("*")

#去重
var obj = {}
var ret = []
for (var j = 0; j < doms.length; i++) {
  var name = doms[j].nodeName
  if(!obj[name]) {
    ret.push(name)
    obj[name] = true
  }
}
console.log(ret.length);

# ES6方法
const names = [...document.getElementsByTagName("*")].map(v=>v.nodeName)

console.log(new Set(names).size);

手写bind call

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Function.prototype.call = function(context) {
  context = context || window
  context.fn = this
  const args = [...arguments].slice(1)
  const result = context.fn(...args)
  delete context.fn
  return result
}

Function.prototype.bind = function(context) {
  const _this = this
  const args = [...arguments].slice(1)
  // 返回一个高阶函数
  return function F() {
    if(this instanceof F) {
      return new _this(...args, ...arguments)
    }
    return _this.apply(context, args.concat(...arguments))
  }
}

如何提升渲染性能
服务端渲染
为什么要进行服务端渲染

JS
回收机制
String、Array类型的方法使用
原型与原型链
构造函数模型/原型模型
闭包/递归
BOM
操作BOM结构
事件冒泡/捕获
AJAX请求

评论和共享

vue 生命周期 详解

评论和共享

Mvvm响应式原理？

原型链？
闭包？应用场景？
Es6的新特性？
Html大纲？
Js数据类型，堆和栈的区别？
Vue的diff算法？怎么样才算samenode（源码相关）？比较子节点的时候顺序比较行不行？
用defineProperty进行数据劫持的缺点？怎么办（考察vue3.0数据劫持的方式proxy）？
手写二分查找
Css盒子模型？
Express中间件？
Symbol？作用？
三面约的19：10，结果前面面试的同学太多了，到19：45才面上
腾讯三面（电话，20min左右）：

1. 从输入url到显示页面的过程？
   dns域名解析
   建立连接 三次握手
   发送 http请求
   服务器处理请求
   返回相应结果
   页面渲染
2. 这个过程中有哪些会影响性能？
3. Es6有哪些了解？
   2.做过什么项目？
   3.了解es6吗
   4.promise原理
   5.了解什么算法？
   6.堆排序过程，时间复杂度（nlogn,他还让我再想一下？？），应用场景（没答出来，哭）。
   7.用过的技术栈
   8.怎么学习前端
   9.问题：公司主要用react，vue哪个，为什么用它呢？

什么时候开始学习的前端？
==和===的区别
JS 继承（ES6 extends、ES5 各种继承）
怎么判断参数是数组还是对象？（Array.isArray、toString、instanceOf）
问项目，技术方案，话题转 Vue
Vue 生命周期有哪些？（Create、Mount、Active、Update、Deactive、Destory）
DOM 结点在什么时候挂载？
Vue 能不能挂载到body或html标签上，为什么？
项目开发联调方式？

写一个两边定宽，中间自适应的布局（dispaly: flex、双飞翼/圣杯、position: absolute）
垂直居中方案（line-height、transform）
JS 怎么对象的属性是数组还是对象（参考一面第 8 问），
解释下每个方法怎么判断（数组 Object.prototype.toString.call之后是[object, Array]，对象toString之后是[object, object]，instanceOf就是返回true还是false）
JS 继承（ES6 extends、原型链、构造），
解释下原型链和构造哪个好，好在哪里，原型链继承的时候，可不可以直接A.prototype = B()，而不是A.prototype = new B()，为什么
构造继承为什么用call，而不是apply？（参数不同，一个数组，一个不定参数），追问哪个参数是数组？（apply）
实现一个数组去重（Array.from(new Set(arr))），不用 ES6 实现一个对所有数组有可以调用的去重（forindexOf，添加到Array.prototype），面试官说i

跨域的方式
websocket和Http的区别
长轮询
cookie和session，没有cookie的话session能不能使用
浏览器缓存机制，304是协商缓存还是强缓存
类数组变成数组
let和var的区别
CSRF以及Token验证的Token放在哪里
TCP三次握手，如果没有三次握手会怎样
Vue用watch实现数据双向绑定
重绘和重排，什么操作会造成重排
LESS怎么遍历一个列表
await语法
JS继承有哪几种，具体的实现及原理
常见的HTTP状态码各个是什么意思
介绍浏览器缓存？各个响应头优先级？以及之间的区别，可以取的值，分别是什么意思
介绍浏览器时间
介绍一下跨域，各个跨域的具体实现方法？以及JSONP实现方式中服务器是怎样交互的
介绍一下网络安全（xss以及csrf具体防范方法）

行内元素和块级元素二者区别
css选择器有哪些，怎么样计算
JS面向对象的理解
盒子模型，box-sizing
常用的设计模式，
封装一个函数判断数据类型，数组还是对象
状态码404 400 502 304
http底层协议
http协议用在tcp还是udp
三次握手，四次握手，两次握手，
time wait 2ml 的原因
浏览器缓存，硬盘（持久化）
数据结构，快速排序，稳定的还是不稳定的。最差的时间复杂度
内存存不下，很多个数据，找出最大的10个或者100个
哈希
操作系统 nio, i/o操作
计算机组成原理，数据用什么码储存的，正负数的储存，负数的源码补码
基址寻址和变址寻址
get，post请求最本质的区别
多路复用
事件代理。常规做法的优势体现在哪里
session。分布式集群，如何保障session可以保持相同
浏览器cookie禁掉session是哪一端session特别多怎么办

进程和线层的区别
内存分配
闭包、作用域链
vue生命周期
css3动画，怎么做
单行文本溢出，多行文本溢出代码实现
bfc布局
js类型，封装一个类型鉴定函数
闭包，哪里用到立即执行函数解决闭包中访问变量的问题
时间轮询机制
原生js实现bind函数
一个函数，然后让你说他们的值是多少，为什么
预编译、严格模式、作用域链
算法 快排 选择排序
浏览器渲染原理

实现一个构造函数new的时候每次加一
css性能优化

js作用域链怎么来的
this
cdn有存在的必要吗

2019/5/16

1、不定高盒子水平垂直居中
2、跨域
3、meta标签
4、jsonp
5、同源
6、闭包
7、深浅拷贝
8、HTTP状态码401
9、cookie、session、本地缓存
10、stylus

评论和共享