移动端 H5 click 点击有 300ms 的延迟,该如何解决?

初期:FastClick 库;

//使用
window.addEvenLisetener('load',function(){
    FastClick.attach(docment.body)
},false)

原理:监听 touchend 事件(touchstart,touchend 会先于 click 触发),使用自定义 DOM 事件模拟一个 Click 事件,把默认的 click 事件(300ms 之后触发)禁掉;

2.现代浏览器的改进:content="width=device-width";表示已经做过响应式布局了,不需要 300ms 的延迟了;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Retina 屏幕的 1px 像素,如何实现?

1.使用 transfrom 缩小;

#box{
    padding:10px 0;
    position:relative;
}
#box::before{
    content:'';
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:1px;
    background:#999;
    transfrom:scaleY(0.5);
    transfrom-origin:0 0;
}

如果有 border-radius 怎么办?

使用 box-shadow;

*x 偏移量;

*y 偏移量;

*阴影模糊半径;

*阴影扩散半径;

*阴影颜色;

#box2{
    margin-top:20px;
    padding:10px;
    border-radius:5px;
    box-shadow:0 0 0 0.5px #999;
}

网络请求中的 token 和 cookie 有什么区别?

cookie:http 标准;跨域限制;配合 session 使用;

token:无标准;无跨域限制;用于 JWT;

cookie

http 无状态,每次请求都要带 cookie,以帮助识别身份;

服务端也可以向客户端 set-cookie,cookie 大小限制 4kb;

默认有跨域限制:不可跨域共享,传递 cookie;

HTML5 之前,用来做数据存储.HTML5 之后一般用 localStorage 和 sessionStorage;

现代浏览器开始禁止第三方 cookie

和跨域限制不同.这里是:禁止网页引入的第三方 JS 设置 cookie;

打击第三方广告,保护用户隐私;

新增属性 SameSite:Strict/Lax/None

cookie 和 session

cookie 用于登录验证,存储用户标识(如 useId);

session 在服务器,存储用户详细信息,和 cookie 信息一一对应;

cookie 和 session 是常见登录验证解决方案;

token 和 cookie

cookie 是 http 规范,而 token 是自定义传递;

cookie 会默认被浏览器存储,而 token 需要自己存储;

token 默认没有跨域限制;

JWT(JSON Web Token)

前端发起登录,后端验证成功之后,返回一个加密的 token.

前端自行存储这个 token(其中包含了用户信息,加密的);

以后访问服务端的接口,都带着这个 token,作为用户信息;

session 和 JWT 那个更好?

如有严格管理用户信息的需求推荐 session;

没有要求则使用 JWT;

session 的优点:

原理简单,易于学习;

用户信息存储在服务端,可以快速封禁某个用户;

session 的缺点:

占用服务器内存,硬件成本高;

多进程,多服务时,不好同步-需要使用第三方缓存,如 Redis;

默认有跨域限制

JWT 优点:

不占用服务端内存;

多进程,多服务器,不受限制;

没有跨域限制;

JWT 缺点:

用户信息存储在客户端,无法快速封禁某个用户;

万一服务端秘钥泄漏,则用户信息全部丢失;

token 体积一般大于 cookie,会增加请求数据量;

如何实现 sso 单点登录?

基于 cookie:cookie 默认不可跨域共享,但有些情况下可设置共享.比如主域名相同时,www.baidu.com中baidu.com为主域名,www为二级域名.可以设置 cookie domain 为主域名,即可共享 cookie;

SSO:第三方登录系统;

HTTP 和 UDP 协议又什么区别?

答案:HTTP 是应用层,TCP UDP 是传输层;TCP 有断开,有链接,稳定传输;UDP 无连接,无断开,不稳定传输,但效率高;

网络协议:HTTP 协议在应用层,TCP UDP 协议在传输层.严格来说,应该拿 TCP 和 UDP 比较.

TCP 协议:有链接(三次握手),有断开(四次挥手),传输稳定;

UDP:无连接,无断开,不稳定传输,但效率高;用于:视频会议,语音通话;

HTTP 协议 1.0 1.1 2.0 又什么区别?

HTTP 1.0:最基础的 http 协议,支持基本方法 GET POST 方法;

HTTP 1.1:缓存策略 cache-control E-tag 等;支持长链接 Connection:Keep-alive,一次 TCP 链接多次请求;断电续传,状态码 206(大图片,文件等);支持新的方法 PUT DELETE 等,可用于 Restful API;

HTTP 2.0:可压缩 header,减少体积;多路复用,一次 TCP 链接中可以多个 HTTP 并行请求;服务端推送;

什么是 HTTP 中间人攻击?如何防御?

http 的加密过程:客户端访问服务端,服务端把公钥返回到客户端,客户端通过公钥加密随机码传给服务端,服务端使用私钥解密随机码,然后使用解密后的随机码进行传递信息;

中间人攻击:黑客替换公钥,使用自己的私钥解密后,进行传输信息;

防御:使用官方正规的证书,;

`<script>` defer 和 async 有什么区别?

无属性:HTML 暂停解析,下载 JS,执行 JS,再继续解析 HTML;

defer:HTML 继续解析,并行下载 JS,HTML 解析完再执行;

async:HTML 继续解析,并行下载 JS,执行 JS,再解析 HTML;

prefetch 和 dns-prefetch 有什么区别?

prefetch 是资源的预获取;

dns-prefetch 是 DNS 的预查询;

prelode 和 prefetch

prelode:资源在当前页面使用,会优先加载; prefetch:资源在未来页面使用,空闲时加载;

<!-- 需要使用link标签加载资源,使用rel属性加载资源 -->
<link rel="prelode" href="style.css" as="style">
<link rel="profetch" href="main.js" as="script">

dns-prefetch 和 preconnet

dns-prefetch:DNS 的预查询;

preconnet:DNS 的预连接;

<link rel="dns-prefetch" href="https://www.baidu.com">
<link ref="preconnet" href="https://www.baidu.com" corssorigin>

你知道那些前端攻击?如何防御?

XSS: Cross Site Script 跨站脚本攻击.手段:黑客将 JS 代码插入到网页内容中,渲染时执行 JS 代码;预防:特殊字符替换(前后端都可以);React 和 Vue 默认屏蔽 XSS 攻击:除非 Vue 使用了 v-html,React 用了 dangerouslySetInnerHTML;

CSRF:Cross Site Request Forgery 跨站请求伪造,手段:黑客诱导用户去访问另一个网站的接口,伪造请求;预防:严格的跨域限制,关键接口加验证码机制,cookie 设置 sameSite,禁止跨域传递 cookie;

点击劫持:Click Jacking,手段:诱导界面上蒙一个透明的 iframe,诱导用户点击,预防:让 iframe 不能跨域加载;

// 1
if(top.location.hostname!==self.location.hostname){
    alert("您正在访问不安全的页面,即将跳转安全页面");
    top.location.hostname =self.location.hostname
}

// 2
<!-- 设置Response header 的X-frame-Options:sameorigin -->

DDoS:Distribute denial-of-service 分布式拒绝服务;手段:分布式的,大规模的流量访问,使服务器瘫痪;预防:软件层不好做,需硬件预防(如:阿里云 WAF);

SQL 注入:手段:黑客提交内容时写入 SQL 语句,破话数据库;预防:处理输入内容,替换特殊字符;

WebSocket 和 http 有什么区别?

WebSocket 协议名是 ws://,可双端发起请求.WebSocket 没有跨域限制.通过 send 和 message 通讯(HTTP 通过 req 和 res)

WebSocket:支持端对端通讯,可以由 Client 发起,也可以由 Server 发起;用于:消息通知,直播间讨论区,聊天室,协同编辑;ws 协议也可升级为 wss;

WebSocket 和 Http 长轮询的区别

HTTP 长轮询:客户端发起请求,服务端阻塞,不会立即返回;

WebSocket:客户端可发起请求,服务端也可以发起请求;

描述从输入 url 到页面展示的完整过程

步骤

网络请求:DNS 查询(得到 IP),建立 TCP 连接(三次握手).浏览器发起 HTTP 请求.收到请求响应,得到 HTML 源码;解析 HTML 的过程中,遇到静态资源还会继续发起网络请求;

解析:DOM 树,CSSOM 树,RenderTree;

渲染:计算,绘制,同时执行 JS;

重绘 repaint 和重排 reflow 有什么区别?

重绘 repaint:元素外观改变,如颜色,背景色.但元素的尺寸,定位不变,不会影响其他元素的位置;

重排 reflow:重新计算尺寸和布局,可能会影响到其他元素的位置,如元素的高度增加,可能会使相邻元素位置下移;

区别:重排比重绘要影响更大,消耗更大,所以要避免无意义的重排;

减少重排的方法:

集中修改样式,直接切换 css class;
修改之前先设置 display:none,脱离文档流;
使用 BFC 特性,不影响其他元素位置;

4.频繁触发的使用防抖和节流;

5.使用 createDocumentFragment 批量操作 DOM;

6.优化动画,使用 CSS3 和 requestAnimationFrame;

BFC

BFC:Block Format Context 块级格式化上下文,内部元素无论如何改变都不会影响其他元素的位置;

触发 BFC 的条件:

根节点<html>;
float:left/right;

3.overflow:auto/scroll/hidden;

4.display:inline-block/table/table-row/table-cell;

5.display:flex/grid;的直接子元素;

6.position:absolute/fixed;

如何实现网页多标签 tab 通信

使用 WebSocket:无跨域限制,需要服务端支持,成本高;

通过 localStorage:同域的两个页面

通过 SharedWorker 通讯:SharedWorker 是 WebWorker 的一种,WebWorker 可开启子进程执行 JS,但是不能操作 DOM,SharedWorker 可单独开启一个进程,用于同域页面通讯;调试不方便,不支持 IE11;

网页和 iframe 之间通信

使用 postMessage 发送信息,接收使用监听 message 事件;

注意跨域限制和域名判断;

//父级页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        index page
        <button id="btn1">发送信息</button>
    </p>

    <iframe id="iframe1" src="./child.html"></iframe>
</body>
<script>
    btn1.addEvenListener('click',()=>{
        window.iframe1.contentWindow.postMessage('hello','*');//需要传递的信息,*表示没有域名限制;
    })
    window.addEventListener('message',event=>{
        console.info('origin',event.origin)//来源的域名
        console.info('data',event.data)
    })
</script>
</html>

//子页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        child page
        <button id="btn1">发送信息</button>
    </p>
</body>
<script>
    btn1.addEvenListener('click',()=>{
        window.parent.postMessage('word','*');//需要传递的信息,*表示没有域名限制;
    })
    window.addEventListener('message',event=>{
        console.info('origin',event.origin)//来源的域名
        console.info('data',event.data)
    })
</script>
</html>

请描述 koa2 洋葱圈模型

Koa2:一个简约,流行的 node.js 框架.通过中间件组织代码,多个中间件以"洋葱圈模型"执行;

中间件1(第一步:await next()) (第二步: 获取存储时间,打印消耗时间)

中间件2(第一步:记录当前时间 await next()) (第二步:获取当前时间减记录时间,存储,返回中间件1)
中间件3(第一步:数据操作完毕返回 中间件2:第一步结束)

前端面试题-知识广度(整理)