css
1，css 布局
2，css模型
3，css动画
4，BFC
5,css实现三角形、梯形、圆形
6，css的性能优化
js
1,实现jsonp
function handleResponse(response){
}
var script=document.createElement("script")
script.src="http:baidu.com?callback=handleResponse"
$('body').append(script)
2,中间件的实现方式
// compose
function compose(middlewares){
return function(){
return dispatch(0)
function dispatch(i){
let fn=middlewares[i]
if(!fn){
return Promise.resolve()
}
return Promise.resolve(
fn(function next(){
return dispatch(i+1)
})
)
}
}
}
3， 防抖
function debounce(fn,wait){
var timeout;
return function(){
let context=this;
let args=arguments;
if(timeout) clearTimeout(timeout)
timeout=setTimeout(function(){
fn.apply(context,args)
},wait)
}
}
4，节流
function throttle(fn,wait){
var prev=Date.now();
return function(){
let context=this;
let args=arguments;
let now=Date.now();
if(now-prev>wait){
fn.aplly(context,args)
prev=Date.now();
}
}
}
5， bind实现方式的
Function.prototype.bind=function (context){
var self=this;
var args=Array.prototype.slice.call(arguments,1)
var ff= function (){
var args1=Array.prototype.slice.call(arguments,1)
var args2=args.concat(args1)
self.apply(context,args2)
}
ff.prototype= Object.create(this.prototype)
}
6，promise的源码
// const p1 = new MyPromise((resolve, reject) => {
// setTimeout(() => {
// resolve('result')
// }, 1000);
// })
// p1.then(res => console.log(res))
// 设置promise 规范三种状态
const PENDDING='pedding'
const FULFILLED='fulfilled'
const REJECTED='rejected'
class MyPromise{
constructor(executor){
this._resolveQueue=[];
this._rejectQueue=[];
this._status=PENDDING
// 解决_resolve
let _resolve=(val)=>{
if(this._resolveQueue.length>1){
if(this._status!=='pedding') return;
this._status=FULFILLED
this._resolveQueue.foreach((callback)=>{
callback(val)
})
}
}
let _reject=(val)=>{
if(this._rejectQueue.length>1){
if(this._status!=='pedding') return;
this._status=REJECTED
this._rejectQueue.paforeach((callback)=>{
callback(val)
})
}
}
executor(_resolve,_reject)
}
then(resolvefn,rejectfn){
// 开始注册
return new MyPromise((resolve,reject)=>{
const fulfilledFn=value=>{
try{
let x=resolvefn(value)
x instanceof MyPromise? x.then(resolve, reject):resolve(x)
}catch(error){}
}
const rejectedFn = error => {
try {
let x = rejectFn(error)
x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
} catch (error) {
reject(error)
}
}
this._resolveQueue.push(fulfilledFn);
this._rejectQueue.push(rejectedFn);
})
}
}
7，es5---继承
function inheritPrototype(a, A){
var prototype = object(superType.prototype); //create object
prototype.constructor = subType; //augment object
subType.prototype = prototype; //assign object
}
8，高阶组件
属性代理，反向代理，渲染劫持，样式包裹，状态提升
9，async 实现原理
10， proxy的实现方法
11，Object.defineProperty()
12， new 实现方式
13 webpck的源码理解、热更新的处理
14， https
15，http 的状态
16， http请求
17，js的算法
18， 脚手架的维护
19，dns
20，webview 数据通讯-
jsBrage怎么一个拦截
andriod
4.4- webview-loadurl
4.4+ webview-evalutejavascript
ios
stringByEvaluatingJavaScriptFromString
21，pu /pv的一个原理
1，没有跨域的问题
2，不会阻塞页面的加载，影响用户的体验
3，在所有的图片中体积比较小
22，监控处理异常
处理些网络异常unhandledrejection
23，vue监听属性对象的异常
// this.items.length=1 // 添加数组
// this.items.splice(1)
// this.items[2]={message:1}
this.$set(this.items,2,{message:1})
console.log("这是修改之后的数组", this.items);
24,node时间循环机制
timer
io callback
prepare idel
poll
check
close callback
25，前端敏感信息加密
1，md5+随机数
2，Rsa+采用非对称加密
26热更新原理
Server端使用webpack-dev-server去启动本地服务，内部实现主要使用了webpack、express、websocket。
使用express启动本地服务，当浏览器访问资源时对此做响应。
服务端和客户端使用websocket实现长连接
webpack监听源文件的变化，即当开发者保存文件时触发webpack的重新编译。
每次编译都会生成hash值、已改动模块的json文件、已改动模块代码的js文件
编译完成后通过socket向客户端推送当前编译的hash戳
客户端的websocket监听到有文件改动推送过来的hash戳，会和上一次对比
27，call实现的原理
Function.prototype.myCall = function(context) {
// context object
context.fn = this;
let args = [];
for (let i = 1, len = arguments.length; i < len; i++) {
args.push(arguments[i]);
}
context.fn(...args);
let result = context.fn(...args); delete context.fn;
return result;
};
28，订阅发布
class EventEmiter {
constructor() {
//维护一个对象
this._events = {
}
}
on(eventName, callback) {
if (this._events[eventName]) {
//如果有就放一个新的
this._events[eventName].push(callback);
} else {
//如果没有就创建一个数组
this._events[eventName] = [callback]
}
}
emit(eventName, ...rest) {
console.log(...rest + 'rest的写法')
// alert(...rest)
if (this._events[eventName]) { //循环一次执行
this._events[eventName].forEach((item) => {
item.apply(this, rest)
});
}
}
removeListener(eventName, callback) {
if (this._events[eventName]) {
//当前数组和传递过来的callback相等则移除掉
this._events[eventName] =this._events[eventName].filter(item => item !== callback);
}
}
once(eventName, callback) {
function one() {
//在one函数运行原来的函数，只有将one清空
callback.apply(this, arguments);
//先绑定 执行后再删除
this.removeListener(eventName, one);
}
this.on(eventName, one);
//此时emit触发会执行此函数，会给这个函数传递rest参数
}
}
29， 301 302 转发实质区别
//object.protptype
30， 对象遍历属性
31，promise 新的属性
32，css 性能优化的
1,id selector非常的高效
2 ，防止写动画的
3，深层次嵌套
4，防止引用import
5，开启gpu加速
6，不要使用attibute selector
7,将浏览器的标准至于前面，标准样式至于后面的=
8，减少css文档的体积
9，防止回流、重绘
33，IOS
6.1 开始支持旧版本 display:-webkit-box;
7.1 开始支持标准版本display: flex;
34，移动端
1，1像素的问题
35，300ms延迟
36，amd/cmd/module gulp/grunt webpack
37,算法
// 3, 9, 10
// [3] [3,3] [2,5]
38，// 第三个参数 false 为冒泡
element.addEventListener('click',function(){},false)
39，求得数组最大值
Math.max.apply(null,this)
40，7大模型
41，浏览器缓存
42，ngix
43,this
44,原型、原型链
45，作用域、作用域链
46 http请求错误码
47 es6
箭头函数
48 typescript
49,node线上的监控