前言
我是 2020 届的应届毕业生,去年 5 月份通过春招内推进入到阿里实习,期间也参加过腾讯、网易等多家公司的招聘并拿到了其中的部分 offer。在找实习期间,我看过很多大佬们的经验分享和知识总结,所以总想着自己也应该回馈一波,下面是我对于前端面试中的一些常见知识点和面试题的总结(链接点进去是题目的答案),内容可能不全面,希望对大家有所帮助。
HTML 知识点总结
3. HTML5 为什么只需要写 <!DOCTYPE HTML>,而不需要引入 DTD?
4. SGML 、 HTML 、XML 和 XHTML 的区别?
12. 页面导入样式时,使用 link 和 @import 有什么区别?
18. 渲染过程中遇到 JS 文件怎么处理?(浏览器解析过程)
19. async 和 defer 的作用是什么?有什么区别?(浏览器解析过程)
27. DOMContentLoaded 事件和 Load 事件的区别?
31. b 与 strong 的区别和 i 与 em 的区别?
33. HTML5 的离线储存怎么使用,工作原理能不能解释一下?
34. 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?
36. 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
42. 页面可见性(Page Visibility API) 可以有哪些用途?
44. 实现不使用 border 画出 1 px 高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
46. <img> 的 title 和 alt 有什么区别?
50. attribute 和 property 的区别是什么?
52. IE 各版本和 Chrome 可以并行下载多少个资源?
53. Flash、Ajax 各自的优缺点,在使用中如何取舍?
57. css reset 和 normalize.css 有什么区别?
62. 在 HTML5 中,哪个方法用于获得用户的当前位置?
68. 扫描二维码登录网页是什么原理,前后两个事件是如何联系的?
CSS 知识点总结
1. 介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
3. ::before 和 :after 中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
11. position 的值 relative 和 absolute 定位原点是?
13. 请解释一下 CSS3 的 Flexbox(弹性盒布局模型),以及适用场景?
17. 经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用 hack 的技巧 ?
18. li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
21. CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的?在不同浏览器下以后什么区别?
22. width:auto 和 width:100% 的区别
25. 'display'、'position' 和 'float' 的相互关系?
27. 对 BFC 规范(块级格式化上下文:block formatting context)的理解?
37. margin 和 padding 分别适合什么场景使用?
38. 抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题]
41. absolute 的 containing block (包含块)计算方式跟正常流有什么不同?
44. 全屏滚动的原理是什么?用到了 CSS 的哪些属性?(待深入实践)
45. 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?(待深入了解)
46. 视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)
47. 如何修改 chrome 记住密码后自动填充表单的黄色背景 ?
50. font-style 属性中 italic 和 oblique 的区别?
51. 设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别?
52. layout viewport 、visual viewport 和 ideal viewport 的区别?
53. position:fixed; 在 android 下无效怎么处理?
54. 如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
56. overflow: scroll 时不能平滑滚动的问题怎么处理?
57. 有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度。
58. png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过 webp?
60. 什么是 Cookie 隔离?(或者说:请求资源的时候不要让它带 cookie 怎么做)
61. style 标签写在 body 后与 body 前有什么区别?
67. transition 和 animation 的区别
70. min-width/max-width 和 min-height/max-height 属性间的覆盖规则?
96. 隐藏元素的 background-image 到底加不加载?
JavaScript 知识点总结
2. JavaScript 有几种类型的值?你能画一下他们的内存图吗?
6. undefined 与 undeclared 的区别?
15. isNaN 和 Number.isNaN 函数的区别?
20. {} 和 [] 的 valueOf 和 toString 的结果是什么?
23. 解析字符串中的数字和将字符串强制类型转换为数字的返回结果都是数字,它们之间的区别是什么?
30. 如何将浮点数点左边的数每三位添加一个逗号,如12000000.11转化为『12,000,000.11』?
42. 事件是什么?IE 与火狐的事件机制有什么区别? 如何阻止冒泡?
45. ["1", "2", "3"].map(parseInt) 答案是多少?
47. javascript 代码中的 "use strict"; 是什么意思 ? 使用它区别是什么?
51. Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
66. ES6 模块与 CommonJS 模块、AMD、CMD 的差异。
67. requireJS 的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)
68. JS 模块加载器的轮子怎么造,也就是如何实现一个模块加载器?
69. ECMAScript6 怎么写 class,为什么会出现 class 这种东西?
70. documen.write 和 innerHTML 的区别?
71. DOM 操作——怎样添加、移除、移动、复制、创建和查找节点?
72. innerHTML 与 outerHTML 的区别?
82. 需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?
83. 如何判断当前脚本运行在浏览器还是 node 环境中?(阿里)
84. 把 script 标签放在页面的最底部的 body 封闭之前和封闭之后有什么区别?浏览器会如何解析它们?
85. 移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?
86. 什么是“前端路由”?什么时候适合使用“前端路由”?“前端路由”有哪些优点和缺点?
87. 如何测试前端代码么? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
92. Object.is() 与原来的比较操作符 “==”、“===” 的区别?
93. escape,encodeURI,encodeURIComponent 有什么区别?
99. 为什么 0.1 0.2 != 0.3?如何解决这个问题?
101. toPrecision 和 toFixed 和 Math.round 的区别?
104. 什么是 CSRF 攻击?如何防范 CSRF 攻击?
108. 什么是 MVVM?比之 MVC 有什么区别?什么又是 MVP ?
110. Object.defineProperty 介绍?
111. 使用 Object.defineProperty() 来进行数据劫持有什么缺点?
112. 什么是 Virtual DOM?为什么 Virtual DOM 比原生 DOM 快?
114. 什么是 requestAnimationFrame ?
116. offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别?
124. mouseover 和 mouseenter 的区别?
126. 为什么使用 setTimeout 实现 setInterval?怎么模拟?
136. 什么是 Promise 对象,什么是 Promises/A 规范?
158. 如何封装一个 javascript 的类型判断函数?
165. 如何确定页面的可用性时间,什么是 Performance API?
171. 一个列表,假设有100000个数据,这个该怎么办?