前端面试问底层原理的,web前端基础知识试题及答案

前言小编写了前端的面试课程。 Vue的面试问题总结了JavaScript前端经典面试问题100个CSS面试问题的文章，说以后打算详细谈谈前端基础学。 拖了这么久才出来。 关于前端的学习方法，伙伴们看了这篇文章，详细阐述了三种学习方法，点击这里直接跳转到文章。 一起看看吧。 前端的基础是学习什么？

无视面试，系统学习应该在一切之前，系统地学习前端的基础知识。 对前端而言，这些基础包括HTML、CSS、JavaScript、浏览器原理、网络协议、MVVM框架和所需的计算机基础。 要放下面试的目的去学习这些知识，建立自己的知识体系，然后结合面试问题，运用掌握的知识去理解和解决面试问题。

JavaScript 基础

JavaScript的基础非常重要，与大同小异的框架面试问题相比，JavaScript可以听到很多东西。 另外，仔细听还有很多有趣的东西。 如果你有足够的时间，你可以系统地度过一次。 现实往往没有时间…)

上下文/范围链/闭包this/call/apply/bind原型/继承Promise浓淡复制事件机制/基于事件loop函数的编程服务工作器/web worror

… CSS 基础

位置内联元素/块元素flex1px重绘回流Sass/Less中心/常规布局层次上下文

… 框架

该块主要关注Vue和React的共性和特性，聚焦Vue，过程中查看一些源代码，以加深理解。

MVM生命周期数据绑定状态管理组件通信computed/watch原理virtualdomdiffreacthookreacthoc/vuemixinvue与react有什么区别

… 工程化

对于写业务的同学来说，你可能从来没有接触过大规模工程化的东西，但这并不影响我们自己学习和理解。

在webpackbabel模板引擎前端发布weex

… 性能优化

性能优化是必备技能，需要理解。

打包优化网络优化代码优化

… TypeScript

TypeScript没有勇气自己深刻地写，只是知道而已，所以只是复习了基础知识点和比较简单的问题。 例如，JavaScript和TypeScript有什么不同，选定项目时，哪些要素会让您选择TypeScript等。

网络/浏览器

对于前端开发来说，web和浏览器也是必须理解的知识点。

HTTPDNSTCPHTTPSCDN

…经典问题，从输入网址到展示页面，发生了什么？ 我认为这个问题还是在考验广度和深度。 仔细想想。 答案可能因人而异。

计算机基础

设计模式数据结构基础算法的安全性

…很多学习输入、输出的人都读过很多面试问题，参加过很多面试，积累了足够的知识，但在面试中，即使是自己熟悉的考点也很难让面试官满意。 其主要原因是学习是一种输入，但面试是一种输出

面试需要的不是你知道的，而是让面试官知道你知道的。 你必须有连接考试要点、连贯说话的能力。 这不是只看过一次就能达成的。 但是，很多人读过这样的文章，我想知道那个就好了。 其实，光“知道”是不够的。

这种问题，从根本上说，对技术方面不够深入、熟悉，没有形成自己的理解。 我也经历过这个过程。 你知道这些概念，自己也能搞清楚，但很难向别人解释。 轻松测试CSS问题。 什么是BFC？ 你一定知道它被称为块级格式化上下文。 问题是如何向面试官说明。

为了解决这个问题，首先，学习过程重视理解而不是记忆。

第二，一个知识点，需要通过多篇文章学习，重复学习，加深理解，总结自己的答案和看法。

第三，如果有刻意练习伙伴的话，可以互相提问。 如果没有，你可以扪心自问。

HTML你是怎么理解HTML的语义化的？ 您使用过哪个HTML5标签meta viewport？ 怎么写？ 什么是H5？ label标记作用行中的元素是什么？ 块级元素是什么？ 空(void )元素有它们吗？ 如何在a标签上禁用href跳转页面或定位链接canvas？ 为标签设置宽度高度和为样式设置宽度高度有什么区别？ 你制作的页面在哪个查看器中进行了测试？ 这些浏览器的内核分别是什么？ iframe有什么缺点？

dom元素在渲染CSS页面时采用的布局模型可以在box-sizing中设置。 基于计算宽度高度的ie盒模型填充border、padding和自身(不是margin )，获得标准仅填充自身表单的几个宽度高度的方法：拓

展各种获得宽高的方式 :css reset和normalize.css有什么区别：居中方法：css优先确定级：如何清除浮动：自适应布局：画三角形：link @import导入css：长宽比方案：display相关：CSS优化：

JavaScript 请你谈谈Cookie的优缺点Array.prototype.slice.call(arr，2)方法的作用是：简单说一下浏览器本地存储是怎样的原型 / 构造函数 / 实例原型链：执行上下文(EC)变量对象作用域链闭包对象的拷贝new运算符的执行过程instanceof原理代码的复用继承

浏览器 跨标签页通讯浏览器架构从输入 url 到展示的过程重绘与回流存储Web WorkerV8垃圾回收机制内存泄露reflow(回流)和repaint(重绘)优化如何减少重绘和回流?一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？localStorage 与 sessionStorage 与cookie的区别总结浏览器如何阻止事件传播，阻止默认行为虚拟DOM方案相对原生DOM操作有什么优点，实现上是什么原理？

服务端与网络 http/https 协议常见状态码get / postWebsocketTCP三次握手TCP四次挥手Node 的 Event Loop: 6个阶段URL概述安全HTTPS和HTTP的区别HTTP版本从输入URL到页面呈现发生了什么？HTTP缓存缓存位置强缓存

Vue vue.js的两个核心是什么？vue 的双向绑定的原理是什么？vue生命周期钩子函数有哪些？请问 v-if 和 v-show 有什么区别？vue常用的修饰符nextTick什么是vue生命周期数据响应(数据劫持)virtual dom 原理实现Proxy 相比于 defineProperty 的优势vuexvue中 key 值的作用Vue 组件中 data 为什么必须是函数？v-for 与 v-if 的优先级说出至少 4 种 vue 当中的指令和它的用法

算法 五大算法基础排序算法高级排序算法递归运用(斐波那契数列)： 爬楼梯问题数据树天平找次品

文章篇幅有限原因，前端面试题精编解析PDF完整版请【点击这里免费领取】，喜欢这篇文章的小伙伴可以留下你的点赞+评论来支持小编啦。 学习&面试：注重逻辑表达

如果上一点是说能正确回答问题，这点则是能更好的回答问题。一个逻辑清晰的回答，能让面试官感受到，面前的小伙子不仅熟悉这个问题，还有比较优秀的语言能力和逻辑能力。

比如，常见问题：说说var, let/const的区别。大部分人都能罗列出它们的区别和注意点，但这很难给面试官留下什么印象。但是，如果你添加几句联系性的语句，效果就不一样了：

var是 ES5 之前的变量声明方式，存在很多容易产生误解的缺陷，具体体现在：……（罗列 var 的一些不足）, 针对这些问题，ES6 提出了 let/const 的变量声明方式，它们具有一些新的特性：……（罗列let/const特性）。

这几句简单的连接，让整个回答从一个简单的要点堆砌变成关系密切的表达。

然而，这并非易事。前提是必须要有较好的逻辑思维，既然选择这行，相信各位这点没有问题。

在学习每一个技术点的时候，都要注意一些问题：是什么？为了解决什么问题？如何实现的，有没有更深的原理？如何使用？使用的时候需要注意什么？有哪些应用的场景？有什么不足？这些不足能否避免？ 这些问题能让你更加全面地体会各个问题的联系。