diff --git a/README.md b/README.md index eb4982a..4e997c9 100644 --- a/README.md +++ b/README.md @@ -1,2319 +1,131 @@ -#2014年最新前端开发面试题（转自markyun） -### PS：在其基础上完善了一些答案，增加一些问题 欢迎fork wj：） - -## 目录 - - 1. [前言](#user-content-preface) - 2. [HTML 部分](#user-content-html) - 3. [CSS 部分](#user-content-css) - 4. [JavaScript 部分](#user-content-js) - 5. [其他问题](#user-content-other) - 6. [优质网站推荐](#user-content-web) - -## 前言 ## - -本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！ - - -###面试有几点需注意：(来源程劭非老师 github:@wintercn) - -1. 面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。 - -1. 题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。 - -1. 进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。 - -1. 回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲） - -1. 资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。 - - -**前端开发面试知识点大纲：** - -```html -HTML&CSS： -对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、 -选择器优先级及使用、HTML5、CSS3、移动端适应 - -JavaScript： -数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、 -内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。 - -其他： -HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯 -``` - -作为一名前端工程师，**无论工作年头长短都应该必须掌握的知识点**： - -此条由 王子墨 发表在 [前端随笔](http://julying.com/blog/front-end-engineers-must-master-knowledge/) - -1、DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 - -```html -document.documentElement 返回文档的根节点 -document.body -document.activeElement 返回当前文档中被击活的标签节点(ie) -event.fromElement 返回鼠标移出的源节点(ie) -event.toElement 返回鼠标移入的源节点(ie) -event.srcElement 返回激活事件的源节点(ie) -event.target 返回激活事件的源节点(firefox) -当前对象为node -返回父节点：node.parentNode, node.parendElement, -返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children -返回第一个子节点：node.firstChild -返回最后一个子节点： node.lastChild -返回同属上一个子节点：node.nextSibling -返回同属下一个子节点：node.previousSibling -parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和 -childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 -,所以大家只要记得有parentElement和children就行了 -``` - -2、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。 - -```html -（1）创建新节点 - createDocumentFragment() //创建一个DOM片段 - createElement() //创建一个具体的元素 - createTextNode() //创建一个文本节点 -（2）添加、移除、替换、插入 - appendChild() - removeChild() - replaceChild() - insertBefore() -（3）查找 - getElementsByTagName() //通过标签名称 - getElementsByName() //通过元素的Name属性的值 - getElementById() //通过元素Id，唯一性 -``` - -3、事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。 - -```html -（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 -IE 5.5: div -> body -> document -IE 6.0: div -> body -> html -> document -Mozilla 1.0: div -> body -> html -> document -> window -（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发， -然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。 -（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件， -但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。 -DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。 -``` - -4、XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。 - -```html -//MLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。 - - -``` - -5、严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。 - -```html -在标准模式中，浏览器根据规范呈现页面； -在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。 -浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。 -如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。 -对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。 -包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过 -渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。 -``` - -6、盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。 - -```html -一个元素盒模型的层次从内到外分别为：内边距、边框和外边距 -IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框。（这句回答有争议，期待能有人解答原因QQ1662484899） - -延伸： -盒子模型分为两类：W3C标准盒子模型和IE盒子模型 （微软确实不喜欢服从他家的标准） -这两者的关键差别就在于： -W3C盒子模型——属性高（height）和属性宽（width）这两个值不包含 填充（padding）和边框（border） -IE盒子模型——属性高（height）和属性宽（width）这两个值包含 填充（padding）和边框（border） -我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型（需要在页面中声明DOCTYPE类型）， -这样可以避免多个浏览器对同一页面的不兼容。 -因为如果不声明DOCTYPE类型，IE会将盒子模型解释为IE盒子模型，FireFox等会将其解释为W3C盒子模型； -而如果在页面中声明了DOCTYPE模型，所有的浏览器都会把盒子模型解释为W3C盒子模型。 -``` - -7、块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。 - -```html -块级元素，用CSS中的display:inline;属性则变为行内元素 -行内元素，用CSS中的display:block;属性则变为块级元素 -影响：周围元素显示在同一行或换行显示，根据具体情况调整样式 -``` - -8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。 - -```html -需要浮动的元素可使用CSS中float属性来定义元素的浮动位置，left：往左浮动，right：往右浮动 -浮动元素引起的问题： -（1）父元素的高度无法被撑开，影响与父元素同级的元素 -（2）与浮动元素同级的非浮动元素会跟随其后 -（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构 -解决方法： -使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题， -对于问题1，添加如下样式，给父元素添加clearfix样式： -.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} -.clearfix{display: inline-block;} /* for IE/Mac */ -``` - -9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。 - -```html -主要区别： -XHTML 元素必须被正确地嵌套 -XHTML 元素必须被关闭，空标签也必须被关闭，如
必须写成
-XHTML 标签名必须用小写字母 -XHTML 文档必须拥有根元素 -XHTML 文档要求给所有属性赋一个值 -XHTML 要求所有的属性必须用引号""括起来 -XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示 -XHTML 文档不要在注释内容中使“--” -XHTML 图片必须有说明文字 -XHTML 文档中用id属性代替name属性 -``` - -10、JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。 - -```html -JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 -易于人阅读和编写。同时也易于机器解析和生成。 -JSON建构于两种结构： -“名称/值”对的集合（A collection of name/value pairs）。 -不同的语言中，它被理解为对象（object），纪录（record），结构（struct）， -字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。 -值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。 -``` - -**备注：** - -根据自己需要选择性阅读，面试题是对理论知识的总结，让自己学会应该如何表达。 - -资料答案不够正确和全面，**欢迎补充**答案、题目；最好是现在网上没有的。 +# 前端开发面试题 -格式不断修改更新中。 +## 2024-07-24 更新 +> 日子越来越紧，更新《特殊时期的10条生存建议》，希望对你有帮助。 -## HTML +[特殊时期的10条生存建议](file/特殊时期的10条生存建议.pdf) -- Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? +[勇闯自媒体工具箱](https://nod3hje6q7.feishu.cn/docx/R0bMdftngoAjTfx7fhDcHVbHnih) -```html -（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器， -用什么文档类型 规范来解析这个文档。 +## 2024-07-02 更新 -（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 +> 越来越卷了，日子越来越难了，希望新更新的面试题能帮到你，希望对你有帮助。 -（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 +[2024前端高频面试题-- html篇](https://juejin.cn/post/7316349850855211046) -（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 -``` +[2024前端高频面试题-- CSS篇](https://juejin.cn/post/6844904013620592654) -- HTML5 为什么只需要写 ？ +[2024前端高频面试题-- JS篇](https://juejin.cn/post/7330065707358208010) -```html -HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； +[2024前端高频面试题之--VUE篇](https://juejin.cn/post/7343484473184698405) -而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。 -``` +[2024前端高频面试题之-- react篇](https://juejin.cn/post/7349971654590857216) -- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ +[2024前端高频面试题-- 前端工程化篇](https://juejin.cn/post/7350535815132659749) -```html -（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， -比如div默认display属性值为“block”，成为“块级”元素； -span默认display属性值为“inline”，是“行内”元素。 - -（2）行内元素有：a b span img input select strong(强调的语气); -块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p - -（3）知名的空元素： -
-鲜为人知的是： - -``` +[2024前端高频面试题-- HTTP和浏览器篇](https://juejin.cn/post/7351301328206331939) -- 请问css中的区块 inline inline-block block 三者有什么区别呢？ +[2024前端高频面试题-- 手写代码篇](https://juejin.cn/post/7353456468094599205) -```html -这样先讲内联元素和块级元素： -内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。 -块级元素时可以控制宽和高、margin等，并且会换行。 +[2024前端高频面试题-- 数据结构与算法篇](https://juejin.cn/post/7356060104565997605) -inline：使用此属性后，元素会被显示为内联元素，元素则不会换行。 -block：使用此属性后，元素会被现实为块级元素，元素会进行换行。 -inline-block：是使元素以块级元素的形式呈现在行内。 -意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内联元素的增强。 +## 2023 更新 -要注意的是IE6 不支持inline-block -``` +[一图搞定前端面试之基础篇](https://juejin.cn/post/7287496730885537811) -- link 和@import 的区别是？ +[【前端面经】2023面试复盘之美团](https://juejin.cn/post/7298650438253641769) -```html -（1）link属于XHTML标签，而@import是CSS提供的; - -（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; - -（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题; - -（4）link方式的样式的权重 高于@import的权重. -``` +[【前端面经】2023面试复盘之小红书](https://juejin.cn/post/7298927442488754213) -- 介绍一下你对浏览器内核的理解？ +[【前端面经】2023面试复盘之阿里云](https://juejin.cn/post/7298188812215287845) -```html -主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。 +[【前端面经】2023面试复盘之蚂蚁金服](https://juejin.cn/spost/7298248624700669962) -渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 +[【前端面经】2023面试复盘之快手](https://juejin.cn/post/7303413519906717705) -JS引擎则：解析和执行javascript来实现网页的动态效果。 +[【前端面经】2023面试复盘之字节跳动](https://juejin.cn/post/7298218459795734582) -最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。 -``` +[万字总结我在寒冬里的面试准备经历](https://juejin.cn/spost/7270095064440864804) -- 浏览器的内核分别是什么? +[前端铜九铁十面试必备八股文——【HTML&CSS】](https://juejin.cn/post/7269794410573512758) -```html -Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML] +[前端铜九铁十面试必备八股文——【JavaScript】](https://juejin.cn/post/7270471613547249699) -Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 +[前端铜九铁十面试必备八股文——【Vue】](https://juejin.cn/post/7270862391155261495) -Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;] +[前端铜九铁十面试必备八股文——【浏览器】](https://juejin.cn/post/7271542727350108195) -Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）] +[前端铜九铁十面试必备八股文——【网络相关】](https://juejin.cn/post/7271165389694058556) -详细文章：[浏览器内核的解析和对比](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html) -``` +[前端铜九铁十面试必备八股文——【性能优化】](https://juejin.cn/post/7273119689185673253) -- 常见兼容性问题？ +[前端铜九铁十面试必备八股文——【工程化】](https://juejin.cn/post/7272009063406272571) -```html -- png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8. +[前端铜九铁十面试必备八股文——【手写代码】](https://juejin.cn/post/7272737742307065914) -- 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 +## 2020-09-01 更新 -- IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 +[网友面经合集2018-2020](file/面经/index.md) -浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} +## 2020-06-11 更新 -这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中 -加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) +[力扣](https://leetcode-cn.com/) -渐进识别的方式，从总体中逐渐排除局部。 +[木易杨，公众号「高级前端进阶」作者，每天搞定一道前端大厂面试题](https://github.com/Advanced-Frontend/Daily-Interview-Question) -首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 -接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 +[大前端面试题库 碎片时间刷刷题](http://bigerfe.com/) -css -.bb{ -background-color:#f1ee18;/*所有识别*/ -.background-color:#00deff\9; /*IE6、7、8识别*/ -+background-color:#a200ff;/*IE6、7识别*/ -_background-color:#1e0bd1;/*IE6识别*/ -} +[最全Vue知识点（基础到进阶，覆盖vue3）](https://mp.weixin.qq.com/s/wqG0IH50zF43zynEHNud5w) -- IE下,可以使用获取常规属性的方法来获取自定义属性, -也可以使用getAttribute()获取自定义属性; -Firefox下,只能使用getAttribute()获取自定义属性. -解决方法:统一通过getAttribute()获取自定义属性. +[qiankun 微前端方案实践及总结](https://juejin.im/post/5ed73b73e51d4578724e3fa4) -- IE下,even对象有x,y属性,但是没有pageX,pageY属性; -Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. +[vue项目部署的最佳实践](https://juejin.im/post/5eb2243e51882555d8457833) -- 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。 +## 2020-03-09 更新 推荐阅读 -- Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, -可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. +[FE-Interview前端面试题整理](http://demo.iboomer.cn/FE-Interview-Questions/) -超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: -L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} -``` +## 2020-02-22 更新 -- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 -HTML5？ +[我在阿里招前端，我该怎么帮你？](https://segmentfault.com/a/1190000021761594) -```html -- HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 +[（近3万字，持续更新中）从面试前到终面，全面为您保驾护航](https://juejin.im/post/5e4f7f2ae51d4526d0595090) -- 绘画 canvas -用于媒介回放的 video 和 audio 元素 -本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； -sessionStorage 的数据在浏览器关闭后自动删除 +[涨薪30%以上看这篇万字干货就行.md](file/万字面试干货.md) -语意化更好的内容元素，比如 article、footer、header、nav、section -表单控件，calendar、date、time、email、url、search -新的技术webworker, websockt, Geolocation +## 2020-02-16 更新 -- 移除的元素 +[前端程序员面试宝典.pdf](https://pan.baidu.com/s/157byyVWX4b-cftXDKgSRBg) 提取码: xtg5 -纯表现的元素：basefont，big，center，font, s，strike，tt，u； +[2019前端面试题（深圳）](https://zhuanlan.zhihu.com/p/60832562) -对可用性产生负面影响的元素：frame，frameset，noframes； +[老码农的字节跳动前端面试总结](https://zhuanlan.zhihu.com/p/68974750) -支持HTML5新标签： +## 2018-08-03 更新 -- IE8/IE7/IE6支持通过document.createElement方法产生的标签， - 可以利用这一特性让这些浏览器支持HTML5新标签， +[前端面试指南.pdf](file/前端面试指南.pdf) -浏览器支持新标签后，还需要添加标签默认的样式： +[WEB前端知识总结](https://zhuanlan.zhihu.com/p/25334672) -- 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 - -如何区分： DOCTYPE声明\新增的结构元素\功能元素 -``` +[2018进击的大前端.pdf](file/2018进击的大前端.pdf) -- 语义化的理解？ - -```html -用正确的标签做正确的事情！ -html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； -在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。 -搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 -使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 -``` +## 2018-07-24 更新 -- HTML5的离线储存怎么使用，工作原理能不能解释一下？ +[写简历的技巧](https://github.com/atian25/blog/issues/3) -```html -在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。 +## 2018-07-12 更新 -原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。 +[总结了17年初到18年初百场前端面试的面试经验(含答案)](https://juejin.im/post/5b44a485e51d4519945fb6b7) -如何使用： -1、页面头部像下面一样加入一个manifest的属性； -2、在cache.manifest文件的编写离线存储的资源； - CACHE MANIFEST - #v0.11 - CACHE: - js/app.js - css/style.css - NETWORK: - resourse/logo.png - FALLBACK: - / /offline.html -3、在离线状态时，操作window.applicationCache进行需求实现。 +[JavaScript 标准参考教程（alpha）](http://javascript.ruanyifeng.com/) -详细的使用请参考：[有趣的HTML5：离线存储](http://segmentfault.com/a/1190000000732617) +[ECMAScript 6入门](http://es6.ruanyifeng.com/) -localStorage 长期存储数据，浏览器关闭后数据不丢失； -sessionStorage 数据在浏览器关闭后自动删除。 -``` +[全栈工程师培训材料](https://github.com/ruanyf/jstraining) -- 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？ +## 2018-01-01 -```html -在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 +[面试汇总](file/面试汇总2018.md) -离线的情况下，浏览器就直接使用离线存储的资源。 - -详细的使用请参考：[有趣的HTML5：离线存储](http://segmentfault.com/a/1190000000732617) -``` - -- (写)描述一段语义的html代码吧。 - -```html -（HTML5中新增加的很多标签（如：
、