前端面试题

[yinxin630]

渲染机制

visibility:hidden 和 display:none 区别, 引申重绘和回流, 引申渲染层

作用域

function foo(a){
    console.log(a);
    var a = 2;
    console.log(a);
    function a(){};
    console.log(a);
}
foo(1);

this指向

function a(){ this.x = 1; }
console.log(a.x);
a.x = 2;
console.log(a.x)
var obj = {
    x: 3,
    a: a
}
obj.a()
console.log(obj.x)
var b = a();
console.log(b.x)
var c = new a();
console.log(c.x)

异步

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(()=>{
    console.log('setTimeout')
})
async1()
new Promise((resolve)=>{
    console.log('promise1')
    resolve()
}).then(()=>{
    console.log('promise2')
})
console.log('script end')

事件循环队列

随便聊聊, 浏览器和node区别

ES6

• Set / Map / WeakSet / WeakMap 作用和区别
• Generator / async await

节流与防抖

概念, 用途, 手写

virtual dom

• 原理, 好处(减少dom操作, 适配不同平台)
• 一定比直接操作 dom 快吗

react & vue

• key 的作用
• 双向绑定原理 (2.0 / 3.0)
• setState 同步 / 异步
• diff 过程
• hooks 原理

从输入url到页面呈现

构建请求 => 查找缓存 => DNS解析 => 三次握手建立连接(为啥三次) => 发送请求获取HTML => 四次挥手断开连接(为啥四次) => 解析HTML构建DOM树 => 并行解析CSS构建CSSOM树 => 创建布局树 => 创建图层树(图层合并) => 生成绘制指令 => 图层分块绘制位图 => 显示器展示内容

浏览器相关

以chrome为例, 说说浏览器的进程与线程, 引申渲染线程和js线程互斥

本地存储

cookie, local / session storage, indexDB. 说出异同, API便利性, 容量

缓存

强缓存, 协商缓存(有哪些相关头)

跨域

jsonp原理, CORS相关(哪些头, 简单请求/复杂请求, Option请求)

安全性

XSS, CSRF (原因, 防护)

// 特殊场景XSS, 页面url为 https://a.com/login?callback=javascript:alert(111)
const url = window.location.search.replace('?callback=', '');
window.location.href = url;

HTTP 1.1 2.0 和 HTTPS

• 说说变化的地方
• HTTPS是怎么保证安全的(能说出对称加密和非对称加密结合用的)

性能优化

• 资源优化: 打包 / CDN / gzip / 缓存 / 请求并发量 / prefetch preload / 按需加载
• 渲染优化: SSR / 骨架屏 / 减少dom操作