js面试题小结（1）

1.性能优化

1.1优化原则和方向

原则
- 多使用内存、缓存或者其他方法
- 减少 CPU 计算、较少网络

方向
- **加载页面和静态资源**
- **页面渲染**

1.2方法：
## 加载资源优化
- 静态资源的压缩合并（JS代码压缩合并、CSS代码压缩合并、雪碧图）
- 静态资源缓存（资源名称加 MD5 戳）
- 使用 CND 让资源加载更快
- 使用 SSR 后端渲染，数据直接突出到 HTML 中

## 渲染优化
- CSS 放前面 JS 放后面
- 懒加载（图片懒加载、下拉加载更多）
- 减少DOM 查询，对 DOM 查询做缓存
- 减少DOM 操作，多个操作尽量合并在一起执行（`DocumentFragment`）
- 事件节流
- 尽早执行操作（`DOMContentLoaded`）

1.3 事件节流
例如要在文字改变时触发一个 change 事件，通过 keyup 来监听。使用节流。

var textarea = document.getElementById('text')
var timeoutId
textarea.addEventListener('keyup', function () {
    if (timeoutId) {
        clearTimeout(timeoutId)
    }
    timeoutId = setTimeout(function () {
        // 触发 change 事件
    }, 100)
})

1.4 尽早执行操作

window.addEventListener('load', function () {
    // 页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function () {
    // DOM 渲染完即可执行，此时图片、视频还可能没有加载完
})

2.常见的 web 攻击方式有哪些，简述原理？如何预防？
2.1前端端最常见的攻击就是 XSS（Cross Site Scripting，跨站脚本攻击）：很多大型网站（例如 FaceBook 都被 XSS 攻击过）。举一个例子，我在一个博客网站正常发表一篇文章，输入汉字、英文和图片，完全没有问题。但是如果我写的是恶意的 js 脚本，例如获取到`document.cookie`然后传输到自己的服务器上，那我这篇博客的每一次浏览，都会执行这个脚本，都会把自己的 cookie 中的信息偷偷传递到我的服务器上来。

预防 XSS 攻击就得对输入的内容进行过滤，过滤掉一切可以执行的脚本和脚本链接。大家可以参考[xss.js](https://github.com/leizongmin/js-xss)这个开源工具。

简单总结一下，XSS 其实就是攻击者事先在一个页面埋下攻击代码，让登录用户去访问这个页面，然后偷偷执行代码，拿到当前用户的信息。

2.2还有一个比较常见的攻击就是 CSRF/XSRF（Cross-site request forgery，跨站请求伪造）：它是借用了当前操作者的权限来偷偷的完成某个操作，而不是拿到用户的信息。例如，一个购物网站，购物付费的接口是`http://buy.com/pay?id=100`，而这个接口在使用时没有任何密码或者 token 的验证，只要打开访问就付费购买了。一个用户已经登录了`http://buy.com`在选择商品时，突然收到一封邮件，而这封邮件正文有这么一行代码`<img src="http://buy.com/pay?id=100"/>`，他访问了邮件之后，其实就已经完成了购买。

预防 CSRF 就是加入各个层级的权限验证，例如现在的购物网站，只要涉及到现金交易，肯定输入密码或者指纹才行。

3.JS中使用`typeof`能得到的哪些类型

typeof undefined // undefined
typeof 'abc' // string
typeof 123 // number
typeof true // boolean
typeof {}  // object
typeof [] // object
typeof null // object
typeof console.log // function

4.说明 this 几种不同的使用场景
- 作为