面试题

• 作用域及原型链
  作用域参考：https://my.oschina.net/u/2949632/blog/793898

原型链及其他参考：（快手一面）

// 1
var a = { x: 1 };
var b = a;
a.x = a = { n: 1 };
console.log(a);
console.log(b);

// 2
Function.prototype.a = () => alert(1);
Object.prototype.b = () => alert(2);
function A() {}
const a = new A();
a.a();
a.b();

console.log(a instanceof Function);
console.log(a instanceof Object);
console.log(A instanceof Function);
console.log(A instanceof Object);

// 3
console.log(a);
var a = 0;

console.log(b);
let b = 0;

console.log(c);
function c() {}

console.log(d);
class d {}

// 4
var x = 10;
function a(y) {
    var x = 20;
    return b(y);
}

function b(y) {
    return x + y.
}

a(20);

• Promise.all实现
• 控制Promise并发数实现，手写题目中promise很多，最好能手动写一遍promise polyfill加深理解
• curry，支持自定义回调函数
• 跨域（90%几率会问），建议按照阮一峰梳理的内容分三个方面回答：https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
  然后可以说下目前自己公司是如何处理跨域的，如node层代理，Nginx代理。
• 你对vue的了解，我一般会说双向绑定原理，建议看下这块源码，Watcher、Dep的关系。Proxy比defineProperty的优势
• ES6用过哪些
• vue scope原理
• XSS， CSRF，CSP，一定要清楚cookie发送的原理，浏览器同源策略。CRSF的预防措施
• 前端性能优化，面试官喜欢问实际实践过的。没有的话就说webpack配置的优化点。
• webpack loader和plugin区别，动手写过吗，建议看下webpack打包后的源码，可先配置optimizition把运行时及依赖都分离了。
• lazyMan实现
• 平时学习其他技术吗？我一般答看技术书。
• 前端性能指标：可以按照这个说浏览器回车后发生了什么，也可以通到每个时间点分析性能如何优化。
  performance

– 首字节时间：服务器返回第一个字节的时间，即responseStart。反映的是DNS、服务器性能，网络状态。

– 可交互时间：服务器返回所有响应后，浏览器开始解析HTML，构建DOM树，完成后页面处于可交互状态，js可操作DOM，即domInteractive

– domInteractive表示document.readystate状态变为interactive。即DOM树构建时间点，未形成渲染树

document.readystate的状态包含：

• loading： 仍在加载
• interactive：loading结束，文档已被解析，但其他资源如样式表、框架、图片仍在加载
• complete：所有子资源已被加载

当DOM树构建完成后，开始构建渲染树，即DOMContentLoadedStart，（所以domInteractive和DOMContentLoadedStart之间的时间是CSSOM的构建时间？）渲染树构建完成后DOMContentLoadedEnd，还要将渲染树绘制在屏幕上，即domComplete

– 解析时间：从服务器开始返回数据到页面成可交互状态所用时间，即domInteractive - responseStart
– 白屏时间FCP：从navigationTo即fetchStart到浏览器绘制第一bit内容所用时间
– 首屏时间FSP：first-meaningful-paint:：首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时。统计方式：

• 首屏无图：页面处于稳定状态前最后一次DOM变动时刻 - window.performance.timing.navigationStart
• 首屏有图：首屏图片全部加载完成 - window.performance.timing.navigationStart

而背景图片的加载不会触发DOM变动，所以要在performancec.getEntriesByType(‘resource’)中过滤initiatorType为img或css，且在首屏中((0,0)到(100vw,100vh))的条目，取responseEnd最晚的那个点作为最后一张图片的加载完成时间

– CSS优化：直到样式表全部下载并构建出cssom对象后，浏览器才开始渲染，所以说css是阻塞选择的资源，需要将它尽早尽快的下载以缩短首次渲染的时间。

如何使css不阻塞渲染呢？
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

1.媒体类型或媒体查询标记

代码块

但这些样式表还是会下载，只不过优先级较低。只不过不阻塞渲染。

渲染的过程：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

解析HTML构建DOM树

加载并解析样式表构建CSSOM树

合并DOM和CSSOM构成渲染树

根据渲染树计算每个节点的精确布局

将节点绘制在屏幕上

所以如果DOM或CSSOM被修改，就需要重新执行上述5个过程，所以说DOM的操作对浏览器来说成本很大，要尽可能的减少或合并DOM操作。