15. 如何优化用户体验

• 页面渲染前使用骨架屏或者加载动画,避免大块白屏
• 使用预渲染或者ssr技术提高首屏加载时间
• 动画使用css3硬件加速,避免用户操作动画卡顿
• 计算密集型业务使用web worker或者js分片处理,避免js线程阻塞
• 页面状态监控,给用户提供反馈机制
• 静态资源走CDN缓存或者oss服务,提高用户访问速度
• 避免用户操作报错,提供404页面或则错误提示页面

progressive web app： 渐进式网页应用.可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。其核心技术包括 App Manifest、Service Worker、Web Push，等等。

同源策略/SOP（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击, 同源策略要求两个通讯地址的协议、域名、端口号必须相同，否则两个地址的通讯将被浏览器视为不安全的，并被阻挡下来. 要突破SOP的限制,我们可以使用如下方式:

• CORS 同域安全策略CORS是一种跨域资源请求机制，它要求当前域在响应报头添加Access-Control-Allow-Origin标签，从而允许指定域的站点访问当前域上的资源

• JSONP 是JSON的一种“使用模式”，主要是利用script标签不受同源策略限制的特性，向跨域的服务器请求并返回一段JSON数据
  

CSRF, 跨站请求伪造,它可以在用户毫不知情的情况下以用户名义伪造请求发送给受攻击站点，从而对用户或者网站造成攻击. 预防措施如下:

• 在请求地址中添加token并验证
• 在HTTP头中自定义属性并验证

20. 用js写一个数组扁平化函数

相比于callback，Promise 具有更易读的代码组织形式（链式结构调用），更好的异常处理方式（在调用 Promise 的末尾添加上一个catch方法捕获异常即可），以及异步操作并行处理的能力（Promise.all()Promise.race()等）。callback最大的问题就是我们通常说的回调地狱,一旦业务逻辑复杂了,我们不得不使用大量的嵌套回调代码,可维护性很低.

22. 如何实现高度自适应

• cookie存储于浏览器端，而session存储于服务端
• session保存在服务器上,当访问增多时，会占用服务器的资源
• cookie存储容量有限制，单个cookie保存数据不能超过4k，且很多浏览器限制一个站点最多保存20个cookie。对于session,默认大小一般是1M
• cookie数据始终在同源的http请求中携带，而Storage不会再请求中携带，仅在本地存储
• 数据存储时间上：sessionStorage仅仅是会话级别的存储，它只在当前浏览器关闭前有效，不能持久保持；localStorage始终有效，即使窗口或浏览器关闭也一直有效，除非用户手动删除；cookie只在设定的 过期时间之前有效
• 作用域上：sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面； localStorage和 cookie在所有同源窗口是共享的
• Storage支持事件通知机制，可以将数据更新的通知发送给监听者。并且它提供增删查api使用更方便

[参考答案] 参考<趣谈前端>周二打卡答案

跨站请求伪造,可以理解为攻击者盗用了用户的身份，以用户的名义发送恶意请求，造成用户隐私及财产损失 过程: 1.登录受信任网站并在本地生成cookie; 2.在不登出 网站 的情况下访问危险网站 防范: 关键操作只接受POST请求, 使用验证码, 检测Referer, 使用token(或者JWT)

全称Cross-site script，跨站脚本攻击，是Web程序中常见的漏洞。原理是攻击者向有XSS漏洞的网站中输入恶意的脚本，当其它用户浏览该网站时候，该脚本会自动执行，从而达到攻击的目的(盗取Cookie，破坏页面结构，重定向到钓鱼网站等)。 区分: 分为持久型XSS和非持久性XSS. 持久型XSS是将攻击的脚本植入到服务器，从而导致每个访问的用户都会遭到此XSS脚本的攻击。非持久型XSS是将恶意脚本包装在页面的URL参数中，通过URL链接骗取用户访问，从而进行攻击. 防范: 对用户输入进行HTML转义, 对敏感信息进行过滤

通过把SQL命令插入到表单中并提交或页面请求的参数中，最终使得服务器执行恶意的SQL命令. 防范: 对用户的输入进行校验或限制长度；对特殊字符进行转换, 不要使用动态拼装SQL，为每个应用使用单独的权限有限的数据库连接。对隐私信息进行加密

分布式拒绝服务(DDoS:Distributed Denial of Service)攻击指借助于客户/服务器技术，将多个计算机联合起来作为攻击平台，对一个或多个目标发动DDoS攻击，从而成倍地提高拒绝服务攻击的威力。

26. 用js实现数组随机取数，每次返回的值都不一样

27. 页面上有1万个button如何绑定事件

[参考答案] 事件委托, 冒泡触发

28. base64为什么能提升性能以及它的缺点是什么

• 适用于很小或者很简单的图片
• 可像单独图片一样使用，比如背景图片等
• 没有跨域问题，不需要考虑缓存、文件头或者cookies问题 缺点:
• CSS 文件体积的增大, 造成CRP(关键渲染路径)阻塞
• 页面解析CSS生成的CSSOM时间增加

WebP是一种支持有损压缩和无损压缩的图片文件格式，根据Google的测试，无损压缩后的WebP比PNG 文件少了45％的文件大小，即使这些PNG文件经过其他压缩工具压缩之后，WebP 还是可以减少28％的文件大小。

• 更高的质量——与其他相同大小不同格式的压缩图像比较
• 编码和解码速度比较慢,存在一定兼容性

从渲染的DOM来看，这两者都是链接，都是a标签，区别是： Link是react-router里实现路由跳转的链接，配合Route使用，react-router拦截了其默认的链接跳转行为，区别于传统的页面跳转，Link 的“跳转”行为只会触发相匹配的Route对应的页面内容更新，而不会刷新整个页面。 a标签是html原生的超链接，用于跳转到href指向的另一个页面或者锚点元素,跳转新页面会刷新页面。

31. 介绍一下函数柯里化,并写一个柯里化函数

柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。柯里化函数能够让我们：

1. 在多个函数调用中依次收集参数，不用在一个函数调用中收集所有参数。
2. 当收集到足够的参数时，返回函数执行结果。

32. 介绍一下从输入URL到页面加载全过程

• 浏览器的地址栏输入URL并按下回车。
• 浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
• 根据IP建立TCP连接（三次握手）。
• 服务器处理请求，浏览器接收HTTP响应。
• 渲染页面，构建DOM树。
• 关闭TCP连接（四次挥手）。

• 都能够改变函数执行时的上下文，将一个对象的方法交给另一个对象来执行，并且是立即执行的

• apply的第二个参数，必须是数组或者类数组，它会被转换成类数组，传入函数中，并且会被映射到函数对应的参数上, 而call从第二个参数开始，可以接收任意个参数

• bind()方法创建一个新的函数，与apply和call比较类似，也能改变函数体内的this指向。不同的是，bind方法的返回值是函数，并且需要稍后调用，才会执行。而apply和call 则是立即调用

34. ES6中的map和原生的对象有什么区别

object和Map存储的都是键值对组合。区别：object的键的类型是字符串；map的键的类型可以是任意类型；另外，object获取键值使用Object.keys（返回数组）Map获取键值使用map变量.keys() (返回迭代器)。

35. 说说H5手机端的适配的几种方案

• 情景一: 单纯将hash路由改变成history路由即可去除hash的#号,此时需要服务器做路由重定向,比如nginx, node重定向

37. Redux状态管理器和变量挂载到window中有什么区别

[参考答案] redux通过制定一套严格的规范，提供一种规范式的api和使用方式来处理状态, 适合大型项目和多人协同开发的项目，虽然代码编写有些繁复，但整体数据流向清楚，便于问题跟踪和后期维护,并且支持状态回溯.而window的变量管理比较混乱,维护不当还会造成变量污染,不适合中大型项目的开发.

浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互,jsonp跨域本质上是通过动态script标签, 本质上也是对静态资源的访问,所以只能是get请求

40. 说说栈和堆的区别, 垃圾回收时栈和堆的区别以及栈和堆具体怎么存储

1.从定义和存取方式上说:

• 栈stack为自动分配的内存空间, 它由系统自动释放, 特点是"LIFO，即后进先出（Last in, first out）"。数据存储时只能从顶部逐个存入，取出时也需从顶部逐个取出,js的基本数据类型(Undefined、Null、Boolean、Number和String). 基本类型在内存中占据空间小、大小固定 ，他们的值保存在栈空间，按值访问

• 堆heap是动态分配的内存，大小不定也不会自动释放. 特点是"无序"的key-value"键值对"存储方式. 比如js的对象,数组. 引用类型占据空间大、大小不固定, 栈内存中存放地址指向堆(heap)内存中的对象。是按引用访问的

2.从js数据的存取过程上说:

栈内存中存放的是对象的访问地址，在堆内存中为这个值分配空间。这个值大小不固定，因此不能把它们保存到栈内存中。但内存地址大小的固定的，因此可以将内存地址保存在栈内存中。这样，当查询引用类型的变量时，先从栈中读取内存地址，然后再通过地址找到堆中的值。

3.栈内存和堆内存与垃圾回收机制的联系和清除方式:

• 垃圾回收机制: JavaScript中有自动垃圾回收机制，会通过标记清除的算法识别哪些变量对象不再使用，对其进行销毁。开发者也可在代码中手动设置变量值为null（xxx = null）进行清除，让引用链断开，以便下一次垃圾回收时有效回收。其次, 函数执行完成后，函数局部环境声明的变量不再需要时，就会被垃圾回收销毁（理想的情况下，闭包会阻止这一过程）。全局环境只有页面退出时才会出栈，解除变量引用。所以工程师们应尽量避免在全局环境中创建全局变量，如需使用，一定要在不需要时手动标记清除，将内存释放。

• 栈内存和堆内存通常与垃圾回收机制有关。之所以会区分栈内存和堆内存,目的是使程序运行时占用的内存最小。当某个方法执行时，都会建立自己的内存栈，在这个方法内定义的变量将会逐个放入栈内存里，随着方法的执行结束，这个方法的内存栈也将自然销毁了。因此，所有在方法中定义的变量都是放在栈内存中的；当我们创建一个对象时，对象会被保存到运行时数据区中，以便反复利用（因为对象的创建内存开销较大），这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁，即使方法结束后，这个对象还可能被另一个引用变量所引用，则这个对象依然不会被销毁，只有当一个对象没有任何引用变量引用它时，系统的垃圾回收机制才会在循环收集的过程中回收。

41. ES6中let块作用域是怎么实现的

可以通过闭包自执行函数实现块作用域

42. 介绍排序算法和快排原理

排序算法有:冒泡排序, 希尔排序, 快速排序, 插入排序, 归并排序, 堆排序, 桶排序等.

通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据都比另外一部分的所有数据都要小，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。

43. 说说node文件查找的优先级

[参考答案] 从文件模块缓存中加载 > 从原生模块加载 > 从文件加载

• UrlRouter(通过内部实现的框架去拦截前端写的url，如果符合UrlRouter的协议的话，就执行相应的逻辑)
• API注入，通过Native获取JavaScript环境上下文，并直接在上面添加方法，使js可以直接调用

45. pm2怎么做进程管理，如何解决进程奔溃问题

• 进程奔溃可以用过设置自动重启或者限制应用运行内存max_memory_restart(最大内存限制数，超出自动重启)

46. 直接给一个数组项赋值，Vue 能检测到变化吗,为什么？

• 用vue的set方法改变数组或者对象

面试只是进入公司的第一步,如何走好它,需要自身的不断努力和学习,所以不要沉迷于走捷径,踏踏实实的学技术吧. 年前笔者会总结一下笔者2019年的技术成长与规划, 希望能和大家继续分享真正的前端技术.