前端面试知识点

作者: _旁观者_ | 来源:发表于2019-03-05 11:40 被阅读0次

2018 前端面试准备
分享一些前端的面试题、重要知识点等干货~~~
前端面试集锦（1）
前端开发面试知识点大纲
超全前端面试（全！全！全！！！）
最全前端开发面试问题及答案整理
web面试汇总
前端开发面试知识点大纲
前端面试(一)
前端面试梳理(一)：基础知识点

html

HTML5新特性，语义化
https://www.cnblogs.com/vicky1018/p/7705223.html
https://blog.csdn.net/qq_20726787/article/details/79849212
浏览器的标准模式和怪异模式
https://blog.csdn.net/qq_31059475/article/details/78010601
使用data-的好处
- 可以把所有自定义属性在dataset对象中统一管理，遍历啊神马的都哦很方便
  https://www.cnblogs.com/dolphinX/p/3348458.html
meta标签
https://www.cnblogs.com/wangyang108/p/5995379.html

css

盒模型，box-sizing
https://blog.csdn.net/huangpin815/article/details/76651680
隐藏元素的几种方法
https://blog.csdn.net/weixin_42160828/article/details/80980333
伪类伪元素区别
伪类是类名，伪元素是个元素可以设置宽高
https://www.cnblogs.com/ghost-xyx/p/3763669.html
https://www.cnblogs.com/ammyben/p/8012747.html
https://blog.csdn.net/zhouziyu2011/article/details/58605705
如何实现水平居中和垂直居中
https://zhuanlan.zhihu.com/p/34974332
less sass 相比较于 css 优缺点

JS

js的基本类型有哪些？引用类型有哪些？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
空值(null)、
未定义(undefined)、
布尔值(boolean)、
数字(number)、
字符串(string)、
对象(object)、
符号(symbol，ES6中新增)

https://www.cnblogs.com/cxying93/p/6106469.html
https://www.zhihu.com/question/349080864

JS常见的dom操作api
https://www.cnblogs.com/lrzw32/p/5008913.html
new set去重 https://blog.csdn.net/diwuyanting/article/details/78486499排序https://www.cnblogs.com/fanda/p/4767984.html
bom
https://www.cnblogs.com/2010master/p/5824215.html
https://www.cnblogs.com/hhw3/p/7089330.html
get post 区别
https://www.cnblogs.com/logsharing/p/8448446.html
前端跨域
https://www.jianshu.com/p/d442dcc14db7
用 http-proxy-middleware 跨域
https://www.jianshu.com/p/a248b146c55a
解释一下事件冒泡和事件捕获，事件委托（手写例子）
https://blog.csdn.net/zj950307/article/details/80390585
如何阻止冒泡？如何阻止默认事件？
https://blog.csdn.net/qq_41459038/article/details/81304155
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
https://blog.csdn.net/binlety/article/details/81288231
this有哪些使用场景？如何改变this的值？call，apply，bind区别
- 在全局环境中，this 永远指向 window
- 函数内的指向
  - 构造函数， this 就代表它即将 new 出来的对象
  - 作为对象内部时，方法中的 this 指向该对象。
  - 构造函数, this 代表的实例对象
- call、apply 或者 bind 调用时，this 的值就取传入的对象的值。
- DOM 操作时，this 指向 dom节点
- 箭头函数内部的 this 由上下文确定
- setInterval、setTimeout，函数中的this会指向window对象
call，apply，bind区别:
https://www.cnblogs.com/ly0612/p/6821124.html
原型链知识
https://www.cnblogs.com/liubinghaoJavaScript/p/7478432.html
https://www.jianshu.com/p/d3713f9485eb
创建对象的几种方式
https://www.cnblogs.com/yuxingyoucan/p/5797142.html
实现继承的多种方式和优缺点
https://www.cnblogs.com/linzaizai/p/7529890.html
new 一个对象具体做了什么
http://www.cnblogs.com/kevin2chen/p/6418327.html
手写Ajax，XMLHttpRequest
https://blog.csdn.net/flyingpig2016/article/details/72616764
数组字符串 api
https://blog.csdn.net/huangpb123/article/details/76861748
实现深拷贝的方法
https://blog.csdn.net/chentony123/article/details/81428803
如何将类数组对象转化为真正的数组
https://blog.csdn.net/keke_sir/article/details/80627870
如何判断一个对象为函数对象数组
https://blog.csdn.net/weixin_39181833/article/details/79686943
https://segmentfault.com/q/1010000017986207/a-1020000017992111
https://chen4342024.github.io/code-snippet/js/is.html
将多层数组转化为单层数组
https://www.cnblogs.com/bigsister/p/10558751.html
https://blog.csdn.net/xiao_spring/article/details/79262917
js 事件执行机制异步执行原理
https://www.cnblogs.com/sunidol/p/11301808.html
https://segmentfault.com/a/1190000020889508
语法糖
https://www.zhihu.com/question/20651624
js 原型链上的方法
Object.prototype.tostring.call() 判断是不是数组对象函数
Array.isArray 判断是不是数组
instanceof

// 主要用于检测引用类型(左边是对象，右边是函数.根据对象的原形链往上找，如果原形链上有右边函数.prototype，返回true;否则返回false)
var obj = {}; obj instanceof Object; //=> true; 
var arr = []; arr instanceof Array; //=> true;
var fn = function() {}; fn instanceof Function; //=> true;

hasOwnProperty() obj对象自身属性中是否具有某个属性
isPrototypeOf()

// 用于测试一个对象是否存在于另一个对象的原型链上。在obj对象原型链上搜寻
    function VFrank() {}
    VFrank.prototype.name = "vfrank";
    VFrank.prototype.age = 29;
    VFrank.prototype.job = "Web Engineer";
    var person = new VFrank();
    console.log(VFrank.prototype.isPrototypeOf(person));// true

foreach map 区别
1 都是循环每一项
2 foreach 更改原数组，没有返回值
3 map 不更改原数组，有返回值
浏览器运行机制
https://segmentfault.com/a/1190000020889508

ES6

let(可改变) const(不可改变)
箭头函数
http://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0
export export default import
http://es6.ruanyifeng.com/#docs/module
CMD AMD require import 区别
https://blog.csdn.net/qqhluckyi/article/details/83214540
1 commjs 是后端node 加载方式，同步加载
2 CMD AMD 为前端模块加载方式，异步加载，常见的库为requreJS(AMD) seajs(CMD)
3 module import 为 es6 规范设定的加载方式， import命令是编译阶段执行的，在代码运行之前,表达式和变量只有在运行时才能得到结果的语法结构。import命令会被 JavaScript 引擎静态分析，先于模块内的其他模块执行（叫做”连接“更合适）所以import中不能含有表达式或者变量,因此无法实现动态加载
https://segmentfault.com/a/1190000010913832
es5 6 7 异步操作
setTimeout、Promise、Async/Await
Async/Await 的理解
https://segmentfault.com/a/1190000007535316
http://www.ruanyifeng.com/blog/2015/05/async.html

es5 6 7 继承方式
es5的6中继承方式
es6 class继承
set map Symbol 数据格式有什么特性
项目中用的 es6
https://www.cnblogs.com/T888888/p/12770467.html

框架

简述 vue 工作流程

/**
* 1 数据劫持 2 编译模板
* 1 数据劫持就是 Object.defineProperty 方法，他有get set 方法，get取数据 set设置数据更新数据了会重新编译数据模板
* 2 编译作用是把 vue 模板转为浏览器的dom展示在页面上，主要做的那就是把模板上绑定的事件转化为一个个监听器，监视用户的动作，执行updata 方法
* 3 获取接口重置 data时就触发数据劫持的set 方法， set 方法调用监听器的 update 方法
* 4 页面用户输入操作时触发对应的事件，事件有对应的监听器可以调用监听器的 update 方法更新数据
*/

什么是MVVM，MVC，MVP

mvc（agular）
1 用户输入动作（指令），
2 指令触发，调用相应的函数方法逻辑，更改数据
3 数据更改后，通过某种方法（这里是脏治检测）告诉视图更新
mvvm(vue)
就是通过某种方法使视图(view) 和数据(model) 建立联系（这里是通过js Object.defineProperty()，方法建立双向关系）
view 改变通知vm ，然后vm 改变 model
model 改变通知vm, 然后vm 改变 view
https://blog.csdn.net/spring5530/article/details/65982198

vuex属性流程简述
https://vuex.vuejs.org/zh/guide/state.html
vuex 优势
统一公共属性方法方便维护
只提供单一的更改属性的方法保证维护溯源的方便（要是多个更改方法会难以维护溯源）
vuex 为为什么用 action 提交数据
vue 面试题
https://segmentfault.com/a/1190000016344599
https://www.cnblogs.com/sichaoyun/p/8406194.html
vue 路由生命周期函数
https://www.cnblogs.com/Zzbj/p/10073967.html
watch computed 的区别那个性能更好为啥
计算属性 方法 监听属性 都能实现
方法得主动调用
计算属性是 被动更新可以同时依赖多个属性 性能更好（能用计算属性做好用计算属性）
监听属性 只能监听一个属性是主动执行
https://www.jb51.net/article/138743.htm

https://blog.csdn.net/weixin_45213848/article/details/93231307
https://www.cnblogs.com/yiyiyurou/p/9881156.html

data 为啥是函数不是对象
第13个问题
angluar vue的区别
https://www.jianshu.com/p/7b7b195e0297
vue 和原生的区别
vuex 优势
统一公共属性方法方便维护
只提供单一的更改属性的方法保证维护溯源的方便（要是多个更改方法会难以维护溯源）
处理跨域

开发环境用热更新插件配置地址 node 代理
生产环境 ngix 配置
cors 配置
兄弟a b组件之间，点击a组件出发b的函数

a 触发 this.$emit 给父组件，父组件用ref.子组件的方法

vue 虚拟dom 概述
https://www.jianshu.com/p/af0b398602bc
this.$nextick 作用原理
https://zhuanlan.zhihu.com/p/26724001
导航路由生命周期函数
全局路由钩子：beforeEach进入之前、afterEach进去之后
组件路由钩子：beforeRouteEnter进去之前、beforeRouteUpdate更新、beforeRouteLeave离开之前
http://www.javashuo.com/article/p-srqzfeqh-bm.html
keep-alive 路由生命周期函数
页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
指令的周期
bind第一次绑定到元素上、inserted被绑定元素插入父节点时调用、update更新时调用、componentUpdated被绑定元素所在模板完成一次更新周期时调用、unbind指令与元素解绑时调用
solt 原理
简述 vue-router 工作流程
vue-router 本质上是展示不同的页面，有三种模式 hash History abstract(用于服务端模式)
https://www.jianshu.com/p/d59971198082
https://segmentfault.com/a/1190000018584560?utm_source=tag-newest
v-if v-show本质是什么
v-if 动态的向DOM树内添加或者删除DOM元素
v-show 本质就是标签display设置为none，控制隐藏
v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中
vue 脚手架怎么运行的
vue3 新特性
vue 路由传参方式
https://www.cnblogs.com/thinkguo/p/11319776.html
this.router.push 中 query param 传参区别
params 传参失效
建议用 query
路由重定向
https://blog.csdn.net/weixin_39168052/article/details/81325641
vue 面试题
路由传参
https://www.jianshu.com/p/5134fe4e784f
EventBus 使用
EventBus.$emit(channel: string, callback(payload1,…))

EventBus.$on(channel: string, callback(payload1,…))

EventBus.$off(channel, {})

组件注册
https://segmentfault.com/a/1190000015157007
指令注册
https://segmentfault.com/a/1190000014370906
v-model 语法实现原理
https://blog.csdn.net/yun_hou/article/details/86313212

前端优化

防抖节流

防抖:  规定一个期限时间，在首次触发事件时，不立即执行回调函数，而是在期限时间后再执行，如果期限时间内回调函数被重复执行，则期限时间重新计时。（100ms 内执行10次，按最后一次的的时间，在延时执行，函数执行需要 一段时间）
节流： 一段时间只执行一次，执行多次按最后一次计算（100ms 内执行10次，只执行最后一次）

https://www.jianshu.com/p/3b782abd27ed

重绘重排
重排 性能消耗大于 重会
https://www.cnblogs.com/ShuiNian/p/12098325.html
style-loader css-loader 区别
先是 cssloader 解析 .css 文件然后用styleloder 创建一个 style 标签
https://www.jianshu.com/p/cbd3375e2575
知道哪些设计模式
单例模式 工厂模式 策略模式 代理模式 观察者模式 模块模式 构造函数模式 混合模式
https://www.jianshu.com/p/4f3014fb8b8b
前端安全策略
浏览器运行机制
https://www.jianshu.com/p/e6252dc9be32
模块化的工作规范
前端缓存策略
+断点续传
webpack 配置笔记
https://www.jianshu.com/p/c614ecb500cc
前端安全问题
https://www.jianshu.com/p/2aa1ea6cdf22
http://www.imooc.com/article/296767
import和require的区别
https://www.cnblogs.com/sunshq/p/7922182.html

babel

https://www.jiangruitao.com/babel/quick-start/

移动端

移动端 1px 像素

// border
:after{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      background: #cccccc;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
// 按钮边框
:after{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      border: 1px solid #cccccc;
      border-radius: 26px;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }

参考

移动端rem适配

(function (doc, win) {
  // 以苹果6 375px为标准  1rem为10px
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 2 * (clientWidth / 75) + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

300 毫秒的点击延时

const str = navigator.userAgent.toLowerCase()
const ver = str.match(/cpu iphone os (.*?) like mac os/)
if (!ver) { // 非IOS系统
  // 引入fastclick 做相关处理
  document.addEventListener('DOMContentLoaded', function () {
    FastClick.attach(document.body)
  }, false)
} else {
// 苹果版本 11 以上已经处理了延时
  if (parseInt(ver[1]) < 11) {
    // 引入fastclick 做相关处理
    document.addEventListener('DOMContentLoaded', function () {
      FastClick.attach(document.body)
    }, false)
  }
}

输入框不回弹处理、

      setTimeout(() => {
        window.scrollTo(0, document.body.scrollTop + 1)
        document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1)
      }, 10)

大文件上传方案
https://www.jianshu.com/p/0870df52cdd5
长列表渲染方案
https://zhuanlan.zhihu.com/p/66779396
安卓 webview 不能访问带 # 号的url
改成 history模式了
https://www.jb51.net/article/162268.htm
https://www.cnblogs.com/tugenhua0707/p/8127466.html

// routerjs
const router = createRouter({
  // https://cli.vuejs.org/zh/config/#publicpath
  base: '/www/', // 这个是服务器的访问路径配置
  ...
  routes
})
export default router

// vue.config.js
module.exports = {
  // 安卓不能访问 带 # 号的url 改成 history模式了
  // 参考 https://www.cnblogs.com/tugenhua0707/p/8127466.html
  publicPath: process.env.NODE_ENV === 'develop' ? '/' : '/www/',
...
}

http

HTTP协议头含有哪些重要的部分，HTTP状态码
https://www.cnblogs.com/qiang07/p/9304771.html
网络url输入到输出怎么做？
https://www.cnblogs.com/xianyulaodi/p/6547807.html
https（对是https）有几次握手和挥手？https的原理。
https://blog.csdn.net/u012361288/article/details/54883154
为什么TCP连接需要三次握手，两次不可以吗，为什么
https://blog.csdn.net/b954960630/article/details/81861579
cookie session localstore 区别
https://www.cnblogs.com/pengc/p/8714475.html
header 请求方法的作用
https://blog.csdn.net/busai2/article/details/82966333

算法

排序算法
https://www.jianshu.com/p/e84acc88e3d5
二叉树
https://www.jianshu.com/p/162b8d4fda84
https 加密算法
http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html
http://www.ruanyifeng.com/blog/2013/07/rsa_algorithm_part_two.html
https://www.jianshu.com/p/b80163c204be
字符串匹配（KMP BM）
https://www.jianshu.com/p/22f99ad58de7
https://www.jianshu.com/p/2fc39afe2306
base64 加密原理
https://www.jianshu.com/p/3de85b738d87

面试题

异步执行题

打包工具

webpack工具配置 vue
gulp 入门知识
https://www.gulpjs.com.cn/docs/getting-started/quick-start/
webpack 的组成和原理
Tree Shaking ts优化
https://blog.csdn.net/haodawang/article/details/77199980

职业规划

对前端的职业规划
https://www.cnblogs.com/gvip-cyl/articles/6502793.html
https://www.jianshu.com/p/2df4c0734b7f
对前端的认识

http://www.cnblogs.com/lvshaonan/p/8693301.html

2018 前端面试准备
前端面试常见问题按知识点分类整理前端面试常考问题整理，按模块知识点分类，持续完善中... Front-end-D...
分享一些前端的面试题、重要知识点等干货~~~
分享一些前端的面试题、重要知识点等干货~~~ Github仓库地址：关于前端学习的笔记前端面试相关 JavaS...
前端面试集锦（1）
前端面试集锦（转载）转载地址：前端开发面试题以下皆为转载前端开发知识点：作为一名前端工程师，无论工作年头长...
前端开发面试知识点大纲
本文旨在加深对前端知识点的理解，资料来源于网络。前端开发面试知识点大纲： 1.请你谈谈Cookie的弊端 coo...
超全前端面试（全！全！全！！！）
笔者通过平时面试总结以及面试别人常提的问题，结合自己认为非常重要的前端各技术栈的知识点，总结了这篇中高级前端面试。...
最全前端开发面试问题及答案整理
最全前端开发面试问题及答案整理前端开发面试知识点大纲： HTML&CSS：对Web标准的理解、浏览器内核差异、...
web面试汇总
《前端面试常见问题按知识点分类整理》《CSS 中布局终极方案》面试中经常遇到的面试题之一，居中布局，特来总结《...
前端开发面试知识点大纲
史上最全前端开发面试问题及答案整理本文旨在加深对前端知识点的理解，资料来源于网络，由本人收集整理。前端开发面...
前端面试(一)
前端面试的门槛越来越高，前端的知识点多而零散，前端框架层出不穷，怎么做才能全面的复习知识，怎么做才能掌握前端技能，...
前端面试梳理(一)：基础知识点
前端面试梳理(一)：基础知识点原始类型涉及面试题：基础数据类型有哪些？null是对象？基础数据类型有哪些？ ...