1.事件修饰符 .stop 阻止冒泡 .prevent 阻止默认行为 .capture 内部元素触发的事件先在此处理 .self 只有在event.target是当前元素时触发 .once 事件只会触发一次 .passive 立即触发默认行为 .native 把当前元素作为原生标签看待2.按键修饰符 .keyup 键盘抬起 .keydown 键盘按下3.系统修饰符 .ctrl .alt .meta4.鼠标修饰符 .left 鼠标左键 .right 鼠标右键 .middle 鼠标中键5.表单修饰符 .lazy 等输入完之后再显示 .trim 删除内容前后的空格 .number 输入是数字或转为数字
1.diff算法的优化2.静态提升3.事件侦听缓存
vuex肯定会重新获取数据,页面也会丢失数据1.把数据直接保存在浏览器缓存里 (cookie localstorage sessionstorage)2.页面刷新的时候,再次请求数据,达到可以动态更新的方法监听浏览器的刷新事件,在刷新前把数据保存到sessionstorage里,刷新后请求数据,请求到了用vuex,如果没有那就用sessionstorage里的数据
面试题:ElementUI是怎样做表单验证的?1.在表单中加rules属性,然后在data里写校验规则2.内部添加规则3.自定义函数校验
共同点:都可以控制元素的显示和隐藏区别:1.v-show是控制元素的display值来让元素显示和隐藏: v-if显示隐藏是把DOM元素整个添加和删除2.v-if有一个局部编译/卸载的过程,切换这个过程中会适当的销毁和重建内部的事件监听和子组件,v-show只是简单的css切换3.v-if才是真正的条件渲染: v-show从false变成true的时候不会触发组件的生命周期,v-if会触发生命周期4.v-if的切换效率比较低 v-show的效率比较高
在Windows 的 powershell 或cmd 终端中,我们可以通过如下快捷键,来提高终端的操作效率:1.使用 ↑ 键,可以快速定位到上一次执行的命令2.使用 tab 键,能够快速补全路径3.使用 esc 键,能够快速清空当前已输入的命令4.输入 cls 命令,可以清空终端
1.获取html文件后,渲染引擎会对将HTML代码解析为DOM结构,同时获取CSS;2.将获取到的CSS解析为CSSOM树,与DOM树并发解析;3.解析JS脚本对DOM树和CSSOM树进行修改。4.将DOM树和CSSOM树合成为render树 5.对render树上节点进行布局,确定其位置,如果元素位置后续被改变而触发重新绘制叫做回流。6.对摆好位置的节点进行色彩渲染,如果元素样式后续被改变而触发页面重新绘制叫做重绘。7.加载剩余的img,video等媒体文件。浏览器拿到HTML,先将HTML转换成dom树再将CSS样式转换成stylesheet根据dom树和stylesheet创建布局树对布局树进行分层,为每个图层生成绘制列表再将图层分成图块紧接着光栅化将图块转换成位图,最后合成绘制生成页面。分层的目的:避免整个页面渲染,把页面分成多个图层,尤其是动画的时候,把动画独立出一个图层,渲染时只渲染该图层就ok,transform,z-index等,浏览器会自动优化生成图层光栅化目的:页面如果很长但是可视区很小,避免渲染非可视区的样式造成资源浪费,所以将每个图层又划分成多个小个子,当前只渲
1.URL解析:判断浏览器输入的是搜索内容还是URL 2.查找缓存:如果能找到缓存则直接返回页面,如果没有缓存则需要发送网络请求页面 3.DNS域名解析:将域名转换为IP地址的过程,得到了服务器具体的IP地址,才可以进行TCP链接以及数据的传输4.三次握手建立TCP连接:第一次握手:客户端主动链接服务器,发送初始序列号seq=x与SYN=1同步请求标志,并进入同步已发送SYN_SENT状态,等待服务器确认。第二次握手:服务端收到消息后发送确认标志ACK=1与同步请求标志SYN=1,发送自己的序列号seq=y以及客户端确认序号ack=x+1,此时服务器进入同步收到SYN_RECV状态。第三次握手:客户端收到消息后发送确认标志ACK=1,发送自己的序列号seq=x+1与服务器确认号ack=y+1,发送过后即确认链接已建立状态ESTABLISHED,服务端接收确认信息后进入链接已建立状态ESTABLISHED。5.发起HTTP请求:浏览器构建HTTP请求报文,并通过TCP协议传送到服务器的指定端口,HTTP请求报文一共有三个部分报文首部,通常包含请求行与各种请求头字段等;空行,告诉服务器请求
得分点:同源限制、协议、域名、端口、CORS、node中间件、JSONP、postmessage标准回答跨域:当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同,就说该接口跨域了。跨域限制的原因:浏览器为了保证网页的安全,出的同源协议策略。跨域解决方案CORS:目前最常用的一种解决办法,通过设置后端允许跨域实现。 res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");node中间件、nginx反向代理:跨域限制的时候浏览器不能跨域访问服务器,node中间件和nginx反向代理,都是让请求发给代理服务器,静态页面和代理服务器是同源的,然后代理服务器再向后端服务器发请求,服务器和服务器之间不存在同源限制。JSONP:利用的原理是script标签可以跨域请求资源,将回调函数作为参数拼接在url中。后端收到请求,调用该回调函数,并将数据作为参数返回去,注意设置响应头返回
面试题一:如何指定params参数可传可不传?在配置路由的时候,在占位符后面加个?面试题二:params参数可传可不传,如果传的是空串如何解决?使用undefined解决
铅笔Naruto
前端攻城狮