网站地图格式,中国建筑装饰网饶明富,wordpress个性评论框,网站正在建设中 色基础知识与素养 JS基本功训练与思考 程序设计的渗透与应用 业务技巧的积累与训练 生产力转换 项目的组织架构 转换专业人才的全面生产力 什么样的技术水平决定了你应该学习什么样的知识与技术#xff0c;什么样的知识与技术水平决定了你到什么样的公司#xff0c;到什么样的公… 基础知识与素养 JS基本功训练与思考 程序设计的渗透与应用 业务技巧的积累与训练 生产力转换 项目的组织架构 转换专业人才的全面生产力 什么样的技术水平决定了你应该学习什么样的知识与技术什么样的知识与技术水平决定了你到什么样的公司到什么样的公司决定了你在什么样社会层次什么样的社会层次决定了你的眼界与发展的高度。 试题来源
一 面试题
0、*浮动的影响 ① 浮动元素不占位脱离文档流可以达到文字环绕的排版效果也会引起标准流div被浮动元素遮挡 ② 父元素高度塌陷 1、*BFC解决因为浮动引起的问题 BFC
1触发BFC的条件 ① body元素 ② float非none的 ③ 绝对定位的positionfixed/absolute ④ display: flex/inline-block/table-cells ⑤ overflow非visible 2BFC的特性 同一BFC内margin折叠 3BFC的作用 ① 清除浮动解决父元素高度塌陷 ② 解决元素被浮动元素覆盖可用于做左右两列布局左宽度固定右自适应 2、*完整的web请求返回了html浏览器访问地址
3、*页面渲染HTML过程 4、*get、post请求的区别解释get请求可以被缓存浏览器决策、不想缓存如何做 1在ajax发送请求前加上xmlHttpRequest.setRequestheader(‘Cache-Control’,“no-cache”) 或者请求头“if-Modified-Since”:“0” 2在服务端加 header(cache-Control:no-cache,must-revalidate) 3增加一个唯一值的参数一般是使用timestamp new Date().getTime() (推荐) 场景请求服务器资源如下载文件文件更新时 5、下载文件window.open、download属性依然不下载必须同源
6、反向代理是什么、作用
1反向代理
反向代理Reverse Proxy方式是指代理服务器来接受 Internet 上的连接请求然后将请求转发给内部网络上的服务器并将从内部网络上服务器得到的结果返回给 Internet 上请求连接的客户端。此时代理服务器对外就表现为一个服务器反向代理服务器对于客户端而言它就像是原始服务器并且客户端不需要进行任何特别的设置。 反向代理的作用 保证内网的安全可以使用反向代理提供 WAF 功能阻止 web 攻击。 负载均衡通过反向代理服务器来优化网站的负载。
7、**vue项目性能优化小野森森 vue-for为什么要加key更快定位数据与diff模块化、组件化封装高度复用性的模块http、拆分高度复用性的组件、组件可配置性强路由懒加载/动态加载组件 首屏加快渲染productionSourceMap设置false否则生产map文件打包后体积变大且能定位源码泄漏源码逻辑【在bulid/config/index文件下】productionGzip设置truegzip压缩、打包体积更小keep-alive缓存组件用keep-alive包裹router-view插件CDNvue-router、axios可以用link方式引入到html中并在configureWebpack里注册减少打包也可以将这些js、css文件下载放在自己的CDN、以防官方服务器挂了图片CDN、图片懒加载vue-lazyLoad插件v-lazy指令、使用CSS图标在main.js里全局引入iconfont字体图标组件按需导入 import { Button, Input } from ‘element-ui’ 8、**webpack打包工具 (小野森森)【考配置流程、loader的作用】 1、作用①压缩代码混淆js代码 2、作用②浏览器不支持ES5以上的语法webpack可以安装一系列依赖包将之翻译成ES5 3、作用③将less、sass编译成css 4、所需依赖 【三大件】webpack、webpack-cli脚手架、webpack-dev-server开发者服务器插件【六件套】处理ES6 ES7… 装饰器 . babel-loader7、babel-core、babel-preset-env . babel-plugin-transform-runtime . babel-plugin-transform-decorators、 babel-plugin-transform-decorators-legacy【四大件】处理样式sass . sass-loader、node-sass、css-loader、style-loader ( postcss-loader autoprefixer )处理模板ejs-loader处理HTML: html-webpack-plugin 5、安装指令 –save-dev 简写 -D 安装在开发环境下的线上不跑–save 简写 -S 安装在生成环境下的 6、配置安装包 webpack.config文件 特*所有plugin结尾的依赖一般要require导入、babel则不用 plugins: [ new HtmlWebpackPlugin( { } ) ] 7、 用命令跑配置文件webpack.config在package.json的script里跑脚本 9、***Promise小野森森
引子一个高阶函数参数里有函数返回一个fn在fn里有条件的执行回调方法闭包
const doSth (t) {return () {if (--t 0) {print1(() {print2(() {print3()})})}}
}
const print1 (cb) {console.log(第一次打印)// 打印出这句话后执行cbcb()
}
const print2 (cb) {console.log(第二次打印)cb()
}
const print3 () {console.log(第三次打印)
}
const fn doSth(3, print1)
fn()
fn()
fn()1. 基本 目的需要处理异步请求的嵌套比如先根据接口判断是否重复拿到res后再进行下一次请求 ① Promise是解决异步流程化的手段Promise不是异步 ② Promise是构造函数需要new ③ Promise的唯一参数executor函数有参数resolve、reject ④ executor在new Promise的时候调用 ⑤ executor是同步执行的而then是异步调用的 ⑥ 每个返回的Promise都有一个then方法方法有2个回调函数cb第一个cb的参数需由resolve执行时传入resolve时执行第一个cbreject时执行第二个cb ⑦ 没有第二个callback的时候可以通过.catch优先走then里的第二个cb且无论是第几个then总是优先于catch ⑧ reject能做的throw new Error也可以 ⑨ 每个then可以再继续.then下去 在第一个Promise里返回Promise ⑤ ↓
let promise new Promise((resolve, reject) {console.log(1)reject(3)
})
promise.then((res) {console.log(打印, res)
}, (err) {console.log(err)
})
console.log(2)
// 打印 1 2 3⑥ ↓
let promise new Promise((resolve, reject) {resolve(结果)
})
promise.then((err) {console.log(打印, err)
})
// 打印 结果let promise new Promise((resolve, reject) {reject(服务异常)
})
promise.then((res) {console.log(打印, res)
}, (err) {console.log(err)
})
// 服务异常⑦ ↓
let promise new Promise((resolve, reject) {reject(服务异常)
})
promise.then().catch((err) {console.log(err)
})
// 服务异常let promise new Promise((resolve, reject) {reject(服务异常)
})
promise.then(() { }, (err) {console.log(优先then, err)
}).catch((res) {console.log(res)
})
// 优先then 服务异常let promise new Promise((resolve, reject) {reject(服务异常)
})
promise.then(() { }).then().then(() { }, (err) {console.log(无论第几个then总是优先, err)
}).catch((res) {console.log(res)
})
// 无论第几个then总是优先 服务异常⑧ ↓
let promise new Promise((resolve, reject) {throw new Error(抛出错误)
})
promise.then(() { }).then().then(() { }, (err) {console.log(无论第几个then总是优先, err)
}).catch((err) {console.log(err)
})let promise new Promise((resolve, reject) {throw new Error(抛出错误)
})
promise.then(() { }).catch((err) {console.log(err)
})⑨ ↓
let promise new Promise((resolve, reject) {resolve(结果1)
})
promise.then((res) {console.log(打印, res)return new Promise((resolve, reject) {resolve(结果2)})
}).then((res) {console.log(打印, res)
})
// 打印 结果1
// 打印 结果22. 语法糖Promise.resolve Promise.reject 相当于是 new Promise(…) let promise new Promise((resolve, reject) {resolve(结果1)
})
promise.then((res) {console.log(打印, res)return Promise.resolve(成功啦)
}).then((res) {console.log(res)
})
// 打印 结果1
// 成功啦3. Promise.all通常用于等待多个异步任务完成 ① Promise.all接收iterable类型数据如Array、Set、Map数据的每一项可以是Promise也可以不是 ② 返回值是Promise因此可以.then。 如果resolve则将iterable的每个Promise resolve的data依次放入数组 ③ 若参数为空数组返回空数组 ④ 只要其中一个Promise的状态rejected了整个Promise.all的状态便rejected失败的原因是第一个失败的Promise的结果 ⑤ 使用场景一个页面初始化需要请求多个接口只要任何一个接口失败便认为初始化是失败的需要重新请求 4. Promise.race ① 谁先完成就只返回那个Promise的结果且无论成功或失败都会返回 ② 若参数为空数组Promise.race的结果永远处于pending状态看起来是什么都没返回 ③ 可以比较资源或接口的响应速度 5. async、await ① await是一个操作符她等待一个Promise对象产出结果如果这个结果是rejected就会抛出异常 ② async函数返回一个pending状态这本身并没有什么意义 10、***函数防抖与节流小野森森
1、函数防抖
1含义 ① 延迟执行时间被触发n秒后再执行的回调 ② 如果在n秒内再次触发则重新开始计时 2场景 ① ajax请求数据比如下拉刷新、首次延迟 ② ajax提交数据提交、支付等按钮重复点击、首次不延迟 ③ 表单校验input输入时延迟验证首次也延迟否则可能无法得到校验通过的结果 3实现 ① clearTimeOut的返回值是计时器id此时t还有值 只有t nullt才会变成null ② 这里不要乱用箭头函数 ③ 不要debugger调试 ④ 思路考虑首次不延迟的情况→没有定时器则为首次因此time后要t null time内频繁触发计时器会频繁重新开始计时 domObj.onclick debounce(myFn)const myClick () {console.log(tag, Date.now())
}
var debounce function (fn, time, triggleNow) {var t null // 只有第一次点击会走这里var debounced function () {var _self this,args arguments;if (t) {console.log(t0, t)clearTimeout(t)// 清除定时器后t的值还在 // 除非赋值null否则随着点击次数而增加}console.log(t1, t)if (triggleNow) {var exec !tconsole.log(t2, t)t setTimeout(function () {t null}, time)// 到这里 t必有idconsole.log(t3, t)if (exec) {fn.apply(_self, args)}} else {console.log(t4, t)t setTimeout(function () {fn.apply(_self, args)}, time)}}debounced.remove function () {clearTimeout(t)t null}return debounced}
const box document.getElementsByClassName(box)[0]
box.onclick debounce(myClick, 1000, true)表单输入
const oInput document.getElementById(input)
const myCheck function () {var val this.valueif (val.length 6) {console.log(校验失败)} else {console.log(校验成功)}
}
oInput.onkeyup debounce(myCheck, 1000, true)
// 只会打印校验失败之后即使长度满足了由于在time内频繁键入也不会再触发了若函数有返回值
var debounce function (fn, time, triggleNow) {var t null,res// console.log(t, t)// time内多次点击只有初次会走这里var debounced function () {var _self this,args arguments;if (t) {console.log(t0, t)clearTimeout(t)// 清除定时器后t的值还在 // 除非赋值null否则随着点击次数而增加}console.log(t1, t)if (triggleNow) {var exec !tconsole.log(t2, t)t setTimeout(function () {t null}, time)// 到这里 t必有idconsole.log(t3, t)if (exec) {res fn.apply(_self, args)}} else {console.log(t4, t)t setTimeout(function () {res fn.apply(_self, args)}, time)}return res // 假若函数有返回值}debounced.remove function () {clearTimeout(t)t null}return debounced}2、 函数节流
1含义场景 事件被触发、n秒内只且必执行一次事件处理函数 可用于输入验证、ajax提交 2 实现
function throttle(fn, delay) {// 闭包var t null,begin new Date().getTime()return function () {var _self this,args arguments,cur new Date().getTime()clearTimeout(t)if (cur - begin delay) {console.log(1)// 隔了很久后再在原来基础上输入会先走1再走2fn.apply(_self, args)begin cur} else {console.log(2)t setTimeout(function () {fn.apply(_self, args)}, delay)}}
}对比 n秒内频繁触发永远不让执行用函数防抖 n秒内频繁触发有且执行一次用函数节流
11、 事件循环 文 ① 消息队列/任务队列/事件队列是一样的即异步任务相关的队列(先进先出/排队) ② 异步任务有(队列中的消息对应着事件因此叫事件循环循环读取消息队列) 普通事件click、resize → DOM操作对应DOM事件资源加载load、error → 资源加载操作对应加载事件定时器setInterval、setTimeout ③ 详细步骤 所有同步任务都在主线程上执行形成一个执行栈主线程之外还存在一个消息队列。只要异步操作执行完成就到消息队列中排队一旦执行栈中的所有同步任务执行完毕系统就会按次序读取消息队列中的异步任务于是被读取的异步任务结束等待状态进入执行栈开始执行主线程不断重复上面的第三步 从代码执行顺序的角度来看程序最开始是按代码顺序执行代码的遇到同步任务立刻执行遇到异步任务则只是调用异步函数发起异步请求。此时异步任务开始执行异步操作执行完成后到消息队列中排队。程序按照代码顺序执行完毕后查询消息队列中是否有等待的消息。如果有则按照次序从消息队列中把消息放到执行栈中执行。执行完毕后再从消息队列中获取消息再执行不断重复。 12、宏任务、微任务 文 ① 微任务早于宏任务 ② 多个定时器内含同步、微任务按定时器顺序完整执行完 13、this指向 文 1this永远指向一个对象 2this的指向完全取决于函数调用的位置 针对以上的第一点特别好理解不管在什么地方使用this它必然会指向某个对象确定了第一点后也引出了一个问题就是this使用的地方到底在哪里而第二点就解释了这个问题但关键是在JavaScript语言之中一切皆对象运行环境也是对象所以函数都是在某个对象下运行而this就是函数运行时所在的对象环境。 11、****设计模式
1单例模式
12、***原型链
13、***闭包
14、****事件循环
15、**vue路由模式、前端单页面路由跳转实现的原理是什么
1、Vue模板编译小野森森
11、Vue2、3的区别小野森森 vue2.0options API 低内聚vue3.0可以将方法提出来 12、**call、bind、apply
改变this指向第一个参数只有applay的参数是数组只有bind返回的是函数 案例
const doSth (t, cb) {return () {if (--t 0) {cb()}}
}
const print1 (cb) {console.log(第一次打印)// 打印出这句话后执行cbcb()
}
const fn doSth(3, print1)
fn()
fn()
fn()const doSth (t, cb) {return () {if (--t 0) {cb()}}
}
const print1 (cb) {console.log(第一次打印)// 打印出这句话后执行cbcb()
}
const print2 (cb) {console.log(第二次打印)cb()
}
const fn doSth(3, print1.bind(null, print2))
fn()
fn()
fn()13、401没有提供认证信息。请求的时候没有带上 Token 等
预编译、作用域、闭包内容字数位置宽度高度不定只展示2行多余内容…中断ajax请求超时、手动中断后端响应超时吉行无忧事件代理的使用场景vue核心功能 微信网页版Http 请求报文头部信息其中 Connection: keep-alive 意味着这次请求结束后不会关闭 TCP 连接 待续…
es6程序设计 websocket 面试题 vue3.0ts 响应式布局 vue3.0星座项目 使用开发者工具
