⾯试⼀直是程序员跳槽时期⾮常热⻔的话题，虽然现在已经过了跳槽的旺季，下⼀轮跳槽季需要到明年才会出现，但是当跳槽季的时候你再看这篇⽂章可能已经晚了，过冬的粮⻝永远不是冬天准备的，⽽是秋收的时候。

今天小编给大家分享一份可⽤于快速突击前端⾯试的知识点，希望可以帮助到大家。

知识点目录

image.png

篇幅限制，只展示了部分，完整版见文末

HTML基础

• doctype(⽂档类型) 的作⽤是什么？✨
• 这三种模式的区别是什么？(接上⼀问追问)
• HTML、XML 和 XHTML 有什么区别？
• 什么是data-属性？
• 你对HTML语义化的理解？✨
• HTML5与HTML4的不同之处
• 有哪些常⽤的meta标签？
• src和href的区别？
• 知道img的srcset的作⽤是什么？（追问）
• 还有哪⼀个标签能起到跟srcset相似作⽤？（追问）
• script标签中defer和async的区别？✨
• 有⼏种前端储存的⽅式？✨
• 这些⽅式的区别是什么？（追问）

image.png

CSS基础

• CSS选择器的优先级是怎样的？✨
• link和@import的区别？
• 有哪些⽅式（CSS）可以隐藏⻚⾯元素？
• em\px\rem区别？
• 块级元素⽔平居中的⽅法？
• CSS有⼏种定位⽅式？
• 如何理解z-index？✨
• 如何理解层叠上下⽂？✨
• 清除浮动有哪些⽅法？
• 你对css-sprites的理解
• 你对媒体查询的理解？
• 你对盒模型的理解？✨
• 标准盒模型和怪异盒模型有什么区别？✨
• 谈谈对BFC(Block Formatting Context)的理解？ ✨
• 为什么有时候⼈们⽤translate来改变位置⽽不是定位？
• 伪类和伪元素的区别是什么？
• 你对flex的理解？✨
• 关于CSS的动画与过渡问题

image.png

JavaScript基础

image.png image.png

HTTP协议

image.png

TCP⾯试题

image.png

DOM

image.png

浏览器与新技术

• 常⻅的浏览器内核有哪些?
• 浏览器的主要组成部分是什么？
• 浏览器是如何渲染UI的？
• 浏览器如何解析css选择器？
• DOM Tree是如何构建的？
• 浏览器重绘与重排的区别？
• 如何触发重排和重绘？
• 如何避免重绘或者重排？
• 前端如何实现即时通讯？
• 什么是浏览器同源策略？

image.png

前端⼯程化

image.png

React⾯试题

image.png

Vue⾯试题

image.png

前端安全⾯试题

image.png

webpack⾯试题

image.png

算法⾯试题

image.png

字符串类⾯试题

image.png

如何通过HR⾯

image.png

⾯试回答问题的技巧

image.png

> 对这份面试指南感兴趣的小伙伴可伽W：yinke823

内容展示到这里就结束啦。归根到底候选⼈的基本功和丰富的项⽬经验才是硬道理，如果你看完了整篇⽂章,并进⾏了精⼼的准备,他是可以让你从75分到85分的实⽤技巧,⽽不是让你从55到85的什么秘籍。

最后祝愿大家都能拿到心仪的offer。