面试问题整理

一、你对前端安全有了解吗？请简述几个安全问题以及相关的解决方案

XSS 攻击

介绍

1. 反射型XSS

发请求时，XSS代码出现在URL中，提交给服务端。服务端返回的内容，也带上了这段XSS代码。最后浏览器执行XSS代码。

2. 存储型XSS

存储型和反射型的区别就是，提交的XSS代码会存储在服务器端。如果这个过程中没有经过任何转义，那么这段html就直接执行了。这样，所有访问你个人主页的用户，就都中招了。

3. DOM XSS

eval不安全的原因。

// 这个时候，如果用户在网址后面加上恶意代码
// http://www.xss.com#alert(document.cookie)
eval(location.hash.substr(1));

防御手段

1. 过滤转义输入输出

后端对于数据类型进行检查，比如数字必须为 number。
对于特殊符号进行转义，无论是前端还是后端都需要进行这个操作

& --> &amp;
< --> &lt;
> --> &gt;
" --> &quot;
' --> &#x27;
/ --> &#x2F;

避免使用eval，new Function等执行字符串的方法，除非确定字符串和用户输入无关
cookie 尽量开启 http only 属性

自动化检测 XSS 漏洞

字符串检测 https://github.com/0xsobky/HackVault/wiki/Unleashing-an-Ultimate-XSS-Polyglot
Arachni、Mozilla HTTP Observatory、w3af 自动检测工具

CSRF

介绍

跨站请求伪造。通过 web 端的一些可以进行跨域请求的方式引导用户去发起请求，请求的同时会带上当前用户的cookie数据来实现伪造登录

iframe

第三方的 iframe 可以运行脚本，弹框等恶意行为

解决方法

使用 iframe 的 sandbox 属性

解决方案

检测http referer是否是同域名，通常来讲，用户提交的请求，referer应该是来来自站内地址，所以如果发现referer中地址异常，那么很可能是遭到了CSRF攻击。
避免登录的session长时间存储在客户端中。
关键请求使用验证码或者token机制

二、你了解 JS 的自定义事件是什么吗？它有哪些使用场景？

自定义事件相当于是观察者模式，可以把复杂逻辑解耦，代码可以写的很清晰，而且很容易复用。

请简述下数据库索引的实现方式

将大量的数据变成一块的一块的数据然后快速排除无关的数据，从而提高查询的速度

三、请简述下 debounce throttle 的实现原理

debounce

上一次被调用后，延迟 n 秒后调用 x 方法

function debounce(fn, wait, options) {   
    wait = wait || 0;   
    var timerId;    

    function debounced() {   
        if (timerId) {   
            clearTimeout(timerId);

            timerId = null;   
        }   
        timerId = setTimeout(function() {   
            fn();     
      }, wait);
   }
    return debounced;
 }

throttle

在 n 秒内最多执行 fn 一次的函数。

function throttle(fn, wait, options) {   
    wait = wait || 0;   
    var timerId, lastTime = 0;    

    function throttled() {   
        var currentTime = new Date();   
        if (currentTime >= lastTime + wait) {   
            fn();   
            lastTime = currentTime;   
        } else {   
            if (timerId) {   
                clearTimeout(timerId);   
                timerId = null;   
            }   
            timerId = setTimeout(function() {   
                fn()   
            }, wait);   
       }   
    }    
    return throttled;  
}

四、同样作为继承的一种方式请 mixin extend 有什么区别？

mixin

优点：可以传递参数更灵活。

缺点：编译后不能产生 dry css 式的代码，也就是有重复代码。

@mixin button { background-color: green; }

.button-1 { @include button; }

.button-2 { @include button; }

/* 编译后 */
.button { background-color: green; }

.button-1 { background-color: green; }

.button-2 { background-color: green; }

extend

优点：编译后能产生 dry css 式的代码。

缺点：不够灵活，还会增加选择器之间的关系可能有副作用。

.button { background: green; }

.button-1 { @extend .button; }

.button-2 { @extend .button; }

/* 编译后 */
.button,

.button-1,

.button-2 { background: green; }

五、什么是 babel-helper ？

用于转移语法的函数集合，并提供相关操作方法。

六、请实现一个在线表格同步的功能

通讯

长连接
websocket

编辑冲突

编辑锁

同一块文档同时只能有一个人编辑，用户体验较差。

diff

加载页面以后获取一个文档副本，本地编辑时进行 diff 并将结果发送给服务器，服务器保存后再将结果返回给其他正在编辑的用户，在进行 diff 然后更新。

OT

通过 编辑距离 算法获取改变文本的步骤，然后通过 OT 算法将不同用户的步骤合并。

七、前端监控

性能

自研：通过 performace api 进行性能数据上报，上报请求是 1px * 1px gif 图片（原因）。在 onload 事件中进行上报，为了不影响页面性能使用 requestIdleCallback 方法等待主线程空闲在运行。定义合适的指标

工具：lighthouse

埋点

手动买点
无埋点

错误上报

sentry

canvas 确定文字宽高
弹幕实现
spa 用户操作路径记录如何实现
ts es6 区别
怎么从一个 js 项目迁移到 ts
webpack loader plugin 区别
react 组件性能优化
基本类型引用类型的内存分配方式
JSbridge 实现方式
秒杀系统实现方式

面试题