iperf3网络测速
React不同权限用户显示不同页面
不同权限用户设置不同权限属性值,在菜单页面根据权限的值显示不同组件。当用户强行跳转到更高权限页面时在路由对应的组件中进行判断。根据权限的值判断没有权限则使用Navigate跳转,有权限则显示对应组件。
光猫HG2543C1
1.1 打开光猫telnet功能
浏览器访问 http://192.168.1.1:8080/cgi-bin/telnetenable.cgi?telnetenable=1
1.2 telnet进入光猫获取telecomadmin密码
登录用户名root,密码是默认wifi密码+默认useradmin密码,具体看光猫背面
#cat /flash/cfg/agentconf/factory.conf
#cat /flash/cfg/app_conf/pppoe/chap-secrets
关闭防火墙
1 | ip6tables -F |
防火墙一段时间后自动开启,需要再次关闭
表格技巧
引用当前单元格左侧的第一个单元格:=OFFSET(INDIRECT(ADDRESS(ROW(), COLUMN())),0,-1)。
js节流防抖
防抖(debounce)
基于上述场景,首先提出第一种思路:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:
如果在200ms内没有再次触发滚动事件,那么就执行函数
如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时
效果:如果短时间内大量触发同一事件,只会执行一次函数。
实现:既然前面都提到了计时,那实现的关键就在于setTimeout这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现:
1 | function debounce(fn,delay){ |
到这里,已经把防抖实现了,现在给出定义:
对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限(如上面的1000毫秒)内,事件处理函数只执行一次。
节流(throttle)
即使用户不断拖动滚动条,也能在某个时间间隔之后给出当前距离顶部的距离
1 | function throttle(fn,delay){ |
如果一直拖着滚动条进行滚动,那么会以1s的时间间隔,持续输出当前位置和顶部的距离
cookie与session
cookie实际上是一小段的文本信息。客户端请求服务器,如果服务器需要记录该用户的状态,就使用response向客户端浏览器颁发一个cookie。客户端浏览器会把cookie保存起来。当浏览器再次请求该网站时,浏览器就会把请求地址和cookie一同给服务器。服务器检查该cookie,从而判断用户的状态。服务器还可以根据需要修改cookie的内容。 session是另一种记录客户状态的机制。不同的是cookie保存在客户端浏览器中,而session保存在服务器上。客户端浏览器访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上,这就是session。客户端浏览器再次访问时只需要从该session中查找该客户的状态就可以了。 如果说cookie机制是通过检查客户身上的“通信证”,那么session机制就是通过检查服务器上的“客户明细表”来确认客户身份。
web前端面试
position
absolute
元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。
css盒模型
ie表示content、padding、border。正常表示content。
Promise
Promise状态平pending,fulfilled,rejected。
resolve reject
Promise.all then得到一个结果数组,任何一个报错就进catch。Promise.any then得到第一个fulfilled的结果。promise allSettled
Promise.then Promise.catch
call apply bind
call是每个参数。apply是参数组成的数组。bind只绑定this。
微任务宏任务,事件循环
setTimeout就是作为宏任务来存在的,而Promise.then则是具有代表性的微任务。
new Promise在实例化的过程中所执行的代码都是同步进行的,而then中注册的回调才是异步执行的(微任务)。
async函数在await之前的代码都是同步执行的,可以理解为await之前的代码属于new Promise时传入的代码,await之后的所有代码都是在Promise.then中的回调
先执行同步代码,执行微任务,再执行宏任务
BFC块格式化上下文
根元素()
浮动元素(float 值不为 none)
绝对定位元素(position 值为 absolute 或 fixed)
行内块元素(display 值为 inline-block)
Cookie、sessionStorage、localStorage的区别
cookie在浏览器和服务器中操作;存在时间;大小4K、5M;操作方式setItem、getItem、removeItem、document.cookie = "yummy_cookie=choco"
;;作用域
非受控组件,受控组件
ref指向表单是非受控组件
递归 栈溢出
闭包
访问私有变量,防抖节流
导致内存泄露
js节流防抖
节流:快速的多次输入只向后端请求一次数据
防抖:n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
强缓存和协商缓存
强缓存:浏览器不会像服务器发送任何请求,直接从本地缓存中读取文件并返回Status Code: 200 OK。Expires
协商缓存: 向服务器发送请求,服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存,如果命中,则返回304状态码并带上新的response header通知浏览器从缓存中读取资源。Last-Modifed,Etag。
http状态码
200 成功。300重定向。400客户端错误。500服务器错误
瀑布流 圣杯
三栏布局 flex
中间加上{ flex: 1 }
,表示flex-grow占用可用空间
eval缺点
不安全,消耗性能
jsonp原理
利用script标签的src属性来实现跨域。
由于使用script标签的src属性,因此只支持get方法
箭头函数
this指向
不能用作构造函数
call apply不能绑定this
箭头函数没有prototype属性
箭头函数没有自己的arguments
html5
video audio canvas worker storage websocket
css3
圆角 渐变 转换 动画 媒体查询 flex布局
WeakMap WeakSet
WeakMap指键为对象,当这个对象设置为null之后,这个键也会删除。普通的Map不会删除这个键
WeakSet指元素为对象。
Array.prototype.find()
console.log同步异步
chrome的控制台出于性能考虑,对于引用类型的数据读取是存在延迟的;
控制台默认值读取第一层数据,当你点击展开时,才会重新去堆内存中读取属性值和下一层的数据。
这种出于性能优化会让我们觉得console.log 是异步的。
所以console.log到底是同步还是异步的,答案肯定是同步。
AMD、CMD、CommonJs、ES6之间的区别
组合继承 js
数组随机排序
大量插入dom元素的方法
css hack不同浏览器的兼容性问题,加入前缀
内存泄露
没有使用的全局变量
计时器没有回收
dom节点的引用,删除节点后还存在
闭包
重绘重排
当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。
重排一定引起重绘
冒泡和捕获
冒泡和捕获是两种相反的事件触发机制,冒泡向上传播,捕获向下传播。
node.js中间件
cookie-parser,cookie-session,body-parser,mongoose,passport
文件上传formidable
文件下载createReadStream
react事件
- 冒泡和捕获是两种相反的事件触发机制,冒泡向上传播,捕获向下传播。
- React合成事件机制: React并不是将click事件直接绑定在dom上面,而是采用事件冒泡的形式冒泡到document上面,然后React将事件封装给正式的函数处理运行和处理。
- e.stopPropagation()
Hooks 实现原理:
Hooks 的实现基于 React Fiber节点(是一个链表) 的调度机制和组件树的遍历。当函数组件被调用时,React 会创建一个 Fiber 节点来表示该组件,并将其添加到 Fiber 树中。Hooks 的状态管理和副作用逻辑被存储在 Fiber 节点中,并在组件的每次渲染中被调用。
跨站登录
登录成功后跳转路由中携带登录信息
ES6(2015)
let,const,类,模块化,箭头函数,函数参数默认值,模板字符串,解构赋值,延展操作符,对象属性简写,
ES7(2016)
数组includes
ES8(2017)
async await,object.values,String.prototype.padEnd(targetLength[, padString])
ES9(2018)
正则表达式反向断言
ES10新特性(2019)
正六变形
扁平化数据 树形
监听路由
内存 储存
回收内存
纯函数 副作用
无副作用 & 纯函数
函数与外界的只有唯一一个渠道进行沟通,通过传入参数和返回值进行沟通。
相同的传入参数永远只会有相同的返回值。
性能优化
代码压缩,代码分片,减少http请求,图片懒加载
img下有4px的留白
img竖排显示时下方有4px的留白
由于img是行内元素,默认display: inline; 它与文本的默认行为类似,下边缘是与基线(baseline)对齐,而不是紧贴容器下边缘。
将displayp设置为block即可消除4px的bug。
其实解决方法不止一种:
1.将图像定义成 img:{display:block;}
2.给父级设置固定高度,然后 overflow:hidden
3.设置 font-size:0;
4.设置 img 的 vertical-align: bottom;
5.设置 img 的 margin-bottom: -4px;
使用session认证用户
1 | var express = require('express'); |