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
- 可以把所有自定义属性在dataset对象中统一管理，遍历啊神马的都哦很方便
- 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/34974332less sass 相比较于 css 优缺点
清除浮动
https://blog.csdn.net/weixin_43638968/article/details/107617275
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.htmlnew 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.htmlget post 区别
https://www.cnblogs.com/logsharing/p/8448446.html用 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.htmlnew 一个对象具体做了什么
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/79262917js 事件执行机制 异步执行原理
https://www.cnblogs.com/sunidol/p/11301808.html
https://segmentfault.com/a/1190000020889508js 原型链上的方法
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%B0export export default import
http://es6.ruanyifeng.com/#docs/moduleCMD 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/1190000010913832es5 6 7 异步操作
setTimeout、Promise、Async/AwaitAsync/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://blog.csdn.net/weixin_44514665/article/details/104031500== 和 === 的区别
https://www.jianshu.com/p/29316fdafba5
框架
- 简述 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://blog.csdn.net/zzzz121380/article/details/121807864
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/7b7b195e0297vue 和原生的区别
vuex 优势
统一公共属性方法 方便维护
只提供单一的更改属性的方法 保证维护 溯源的方便（要是多个更改方法会难以维护 溯源）-
处理跨域
开发环境 用热更新插件 配置 地址 node 代理
生产环境 ngix 配置
cors 配置 兄弟a b组件之间，点击a组件 出发b的函数
a 触发 this.$emit 给父组件，父组件 用ref.子组件的方法
vue 虚拟dom 概述
https://www.jianshu.com/p/af0b398602bcthis.$nextick 作用 原理
https://zhuanlan.zhihu.com/p/26724001导航路由 生命周期函数
全局路由钩子：beforeEach进入之前、afterEach进去之后
组件路由钩子：beforeRouteEnter进去之前、beforeRouteUpdate更新、beforeRouteLeave离开之前
http://www.javashuo.com/article/p-srqzfeqh-bm.htmlkeep-alive路由生命周期函数
keep-alive使用 https://blog.csdn.net/guoyp2126/article/details/119545978
页面第一次进入，钩子的触发顺序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-newestv-ifv-show本质是什么
v-if动态的向DOM树内添加或者删除DOM元素
v-show本质就是标签display设置为none，控制隐藏v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中vue 脚手架怎么运行的
vue3 新特性
this.router.push 中 query param 传参区别
params 传参失效
建议用 query路由重定向
https://blog.csdn.net/weixin_39168052/article/details/81325641EventBus 使用
EventBus.$emit(channel: string, callback(payload1,…))
EventBus.$on(channel: string, callback(payload1,…))
EventBus.$off(channel, {})
v-model 语法实现原理
https://blog.csdn.net/yun_hou/article/details/86313212axios配置
https://blog.csdn.net/qq_44683095/article/details/106325494-
route 和 router 的区别
this.$route： 当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。
this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。
https://www.qy.cn/jszx/detail/3822.html
前端优化
- 防抖 节流
防抖: 规定一个期限时间，在首次触发事件时，不立即执行回调函数，而是在期限时间后再执行，如果期限时间内回调函数被重复执行，则期限时间重新计时。（100ms 内执行10次，按最后一次的的时间，在延时执行，函数执行需要 一段时间）
节流： 一段时间只执行一次，执行多次按最后一次计算（100ms 内执行10次，只执行最后一次）
https://www.jianshu.com/p/3b782abd27ed
重绘重排
重排性能 消耗大于重会
https://www.cnblogs.com/ShuiNian/p/12098325.htmlstyle-loader css-loader 区别
先是 cssloader 解析 .css 文件 然后用styleloder 创建一个 style 标签
https://www.jianshu.com/p/cbd3375e2575知道哪些设计模式
单例模式工厂模式策略模式代理模式观察者模式模块模式构造函数模式混合模式
https://www.jianshu.com/p/4f3014fb8b8b前端安全策略
模块化的工作规范
前端缓存策略
+断点续传webpack 配置笔记
https://www.jianshu.com/p/c614ecb500cc前端安全问题
https://www.jianshu.com/p/2aa1ea6cdf22
http://www.imooc.com/article/296767import和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
面试题
打包工具
sourceMap 作用
https://blog.csdn.net/u012365780/article/details/111596591webpack 面试题
https://baijiahao.baidu.com/s?id=1706629892058057497&wfr=spider&for=pc
https://zhuanlan.zhihu.com/p/443964387webpack 配置多页面
https://blog.csdn.net/bidang3275/article/details/118494812webpack工具配置 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 - 对前端的认识
