浏览器

cookie、localStorage、sessionStorage的区别？

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2. 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的

cookie、session、token的区别？

cookie 是一个非常具体的东西，指的就是浏览器里面能永久存储的一种数据，仅仅是浏览器实现的一种数据存储功能

服务器使用session把用户的信息临时保存在了服务器上，用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说更安全，可是session有一个缺陷：如果web服务器做了负载均衡，那么下一个操作请求到了另一台服务器的时候session会丢失

访问资源接口（API）时所需要的资源凭证， token 的用户认证是一种服务端无状态的认证方式，服务端不用存放 token 数据。用解析 token 的计算时间换取 session 的存储空间，从而减轻服务器的压力，减少频繁的查询数据库，token 完全由应用管理，所以它可以避开同源策略

为什么可以通过cookie攻击，不能通过token攻击？

1. 首先token不是防止XSS的，而是为了防止CSRF的
2. CSRF攻击的原因是浏览器会自动带上cookie，而浏览器不会自动带上token。 cookie：用户点击了链接，cookie未失效，导致发起请求后后端以为是用户正常操作，于是进行其他操作 token：用户点击链接，由于浏览器不会自动带上token，所以即使发了请求，后端的token验证不会通过，所以不会进行其他操作

解决跨域的办法（5种）？

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 Cookie、LocalStorage、IndexedDB 等存储性内容 DOM 节点 AJAX 请求发送后，结果被浏览器拦截了

但是有三个标签是允许跨域加载资源： img link script

1. jsonp
   • 利用 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。
2. cors
   • CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。
   • 浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。
3. postMessage
   • postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
4. webSocket
   • webSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据
5. nginx反向代理
   • 原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。
6. iframe

http和https的区别？

https采用的是非对称加密 防止数据传输时被窃取 公钥为颁发证书机构所持有

从输入url到页面展示中间执行了什么？

浏览器的运行机制？

浏览器渲染的步骤

HTML 解析出 DOM Tree CSS 解析出 Style Rules 两者关联生成 Render Tree Layout（布局）根据 Render Tree 计算每个节点的信息 Painting 根据计算好的信息进行渲染整个页面

浏览器解析文档的过程中，如果遇到 script 标签，会立即解析脚本，停止解析文档（因为 JS 可能会改变 DOM 和 CSS,如果继续解析会造成浪费）。 如果是外部 script, 会等待脚本下载完成之后在继续解析文档。现在 script 标签增加了 defer 和 async 属性，脚本解析会将脚本中改变 DOM 和 css 的地方> 解析出来，追加到 DOM Tree 和 Style Rules 上

event loop执行机制

宏任务、微任务、任务队列

设计模式

观察者模式、策略模式、适配器模式、工厂模式、组合模式、代理模式、门面模式

js基础

函数作用域

调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁。
每调用一次，函数就会创建一个新的函数作用域，它们之间是互相独立的。
在函数作用域中，可以访问到全局作用域的变量。在全局作用域中无法访问到函数作用域的变量

全局作用域

直接编写在 script 标签之中的JS代码，都是全局作用域或者是一个单独的 JS 文件中的。全局作用域在页面打开时创建，页面关闭时销毁；
在全局作用域中有一个全局对象 window（代表的是一个浏览器的窗口，由浏览器创建），可以直接使用。

块级作用域

ES6中新增了块级作用域
块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域

静态作用域

函数的作用域在函数定义的时候就决定了

动态作用域

函数的作用域是在函数调用的时候才决定的

闭包的概念

立即执行函数的概念

闭包和立即执行函数的区别

基本数据类型、引用数据类型

string、number、boolean、null、underfined、symbol
function、object、array

数据类型的存储（堆、栈）

数据类型的隐式转换

原型链

链表 （单向链表和双向链表）

Symbol

dom常用的操作

new

手写各种原生方法

Set 和Map

谈谈HTTP协议中的短轮询、长轮询、长连接和短连接

css

讲一讲Flex布局，以及常用的属性？

移动端响应式设计？

1. viewport视口设置
2. @media媒体查询
3. 不要写死的尺寸
   • 多用百分比宽度来确定布局尺寸
   • 多用rem、em来确定布局尺寸
   • 多用vh、vw来确定布局尺寸

ES6

this指向 相关原理

原型/原型链

面向对象相关

同步异步/回调/promise/async、await

模块化 CommonJS, AMD

webpack

1. webpack与grunt、gulp的不同？
2. 有哪些常见的Loader？他们是解决什么问题的？
3. 有哪些常见的Plugin？他们是解决什么问题的？
4. Loader和Plugin的不同？
5. webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全
6. 是否写过Loader和Plugin？描述一下编写loader或plugin的思路？
7. webpack的热更新是如何做到的？说明其原理？
8. 如何利用webpack来优化前端性能？（提高性能和体验）
9. 如何提高webpack的构建速度？
10. 怎么配置单页应用？怎么配置多页应用？
11. npm打包时需要注意哪些？如何利用webpack来更好的构建？
12. 如何在vue项目中实现按需加载？

字体图标库

vue

1. MVC和MVVM的介绍和区别。
2. vue组件之间的通信
3. vue兄弟组件通信
4. vue父子组件通信
5. vue平级组件通信
6. vue组件的划分
7. vue动态路由
8. vue路由拦截
9. vuex理解
10. axios理解
11. postcss理解
12. vue自定义指令
13. vue双向数据绑定原理（源码实现思路）
14. vue keep-alive的理解
15. vue mixins的理解

代码规范

1. css代码规范
2. js代码规范
3. templete代码规范
4. vue文件代码规范
5. 注释规范
6. 项目目录结构规范

性能优化

前端性能优化分为两个方向，一是工程化方向，另一个是细节方向。这个概念来自于知乎Lucas HC。

工程化方向

1. 客户端Gzip离线包，服务器资源Gzip压缩。
2. JS瘦身，Tree shaking，ES Module，动态Import，动态Polyfill。
3. 图片加载优化，Webp，考虑兼容性，可以提前加载一张图片，嗅探是否支持Webp。
4. 延迟加载不用长内容。通过打点，看某些弹窗内或者子内容是否要初始化加载。
5. 服务端渲染，客户端预渲染。
6. CDN静态资源
7. Webpack Dll，通用优先打包抽离，利用浏览器缓存。
8. 骨架图
9. 数据预取，包括接口数据，和加载详情页图片。
10. Webpack本身提供的优化，Base64，资源压缩，Tree shaking，拆包chunk。
11. 减少重定向。

细节方向

1.图片，图片占位，图片懒加载。 雪碧图 2.使用 prefetch / preload 预加载等新特性 3、服务器合理设置缓存策略 4、async（加载完当前js立即执行）/defer(所有资源加载完之后执行js) 5、减少Dom的操作，减少重排重绘 6、从客户端层面，首屏减少和客户端交互，合并接口请求。 7、数据缓存。 8、首页不加载不可视组件。 9、防止渲染抖动，控制时序。 10、减少组件层级。 11、优先使用Flex布局。

卡顿问题解决

1. CSS动画效率比JS高，css可以用GPU加速，3d加速。如果非要用JS动画，可以用requestAnimationFrame。
2. 批量进行DOM操作，固定图片容器大小，避免屏幕抖动。
3. 减少重绘重排。
4. 节流和防抖。
5. 减少临时大对象产生，利用对象缓存，主要是减少内存碎片。
6. 异步操作，IntersectionObserver，PostMessage，RequestIdleCallback。

性能优化API

1. Performance。performance.now()与new Date()区别，它是高精度的，且是相对时间，相对于页面加载的那一刻。但是不一定适合单页面场景。
2. window.addEventListener("load", ""); window.addEventListener("domContentLoaded", "");
3. Img的onload事件，监听首屏内的图片是否加载完成，判断首屏事件。
4. RequestFrameAnmation 和 RequestIdleCallback。
5. IntersectionObserver、MutationObserver，PostMessage。6、Web Worker，耗时任务放在里面执行。#### 检测工具
6. Chrome Dev Tools
7. Page Speed
8. Jspref