该博客围绕前端面试知识展开，涵盖HTML、CSS、JavaScript基础，如meta标签、盒子模型、浮动等；还有高级部分，包括页面优化、MVC与MVVM区别、垃圾回收机制等，也涉及栈和队列等数据结构知识，为前端面试提供全面参考。
1、对标签的理解和用法
什么是meta标签？ 引自下W3school的定义说明一下。
meta是用来在HTML文档中模拟HTTP协议的响应头报文。
用于网页的＜head＞与＜/head＞中，meta标签的用处很多。
meta 中的重要属性：name。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。
这其中关键部分在于description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。
2、HTML5的新特性
hisyory：通过对浏览器历史记录的读取，实现在访问记录中前进和后退
pushState、replaceState：用于向history添加当前页面的记录（改变浏览器记录）
popState：当hisyory被改变的时候，该事件会发生
3、什么是盒子模型？
W3C 标准盒子模型
总width /height：元素width /height + padding + border + margin
IE 怪异盒子模型
总width /height：元素width /height + margin
4、行内元素有哪些？块级元素有哪些？空元素有哪些？
行内元素：a b span img input
块级元素：div ul ol li dl dt dd p h1-h6
空元素：metabrhr input img
5、简述href和src的区别
href：引用外部文档中的一部分内容，与外部文档相关联
src：引入外部文件作用于目标文档
6、了解并使用过哪些前端页面模板引擎
Handlebars：在许多前端框I（MUI/AmazeUi）中被引入,它的语法简单，通常使用{{value}}将数据包裹起来，他还会自动匹配响应数值和对象。
CSS
1、为什么需要浮动？什么时候需要清除浮动？阐述清楚浮动的几种方式？（常见问题）
为了解决做到有效且美观的样式需求
当子元素设置了float 属性之后，父元素高度塌陷的时候
父元素设置clear：both或者overflow：hidden
2、解释css sprites ，如何使用？css sprites制作有哪几种方法？
通过CSS属性background-image中的background-repeat,background-position来实现使用
3、box-sizing有哪几种值？分别有什么作用？
box-sizing：content-box（宽度/高度分别应用到元素的内容框）
box-sizing：border-box（元素指定的任何内边距和边框都在已设定的宽度和高度内进行绘制）
box-sizing：inherit
4、CSS覆盖规则
继承原因样式冲突时，最近父元素样式有效
继承样式和指定样式冲突时，最近指定样式有效
！important的样式不被覆盖
5、css3新增了哪些属性？常用的有哪些？
border-radius：边框圆角
border-shadow：边框阴影
border-image：边框图片
background-size：属性规定背景图片的尺寸。
background-orgin：属性规定背景图片的定位区域。
2D（transform）
transform：translate平移
transform：rotate旋转
transform：scale缩放
6、display:none和visiblilty:hidden的区别？
display:none（隐藏占据的空间消失）
visiblilty:hidden（隐藏仍然占据页面空间）
7、link和@import的区别？
link：从属HTML
@import：从属CSS
前者的权重高且优先加载
JavaScript
1、JQuery的选择器有哪些（即JQuery查找页面元素的方法有哪些）？
基本过滤选择器，内容过滤选择器，可视化过滤选择器，属性过滤选择器，子元素过滤选择器
2 、Javascript中的定时器有哪些？他们的区别及用法是什么？
定时器setTimeOut()与clearTimeOut()，事件发生后只执行一次
定时器setInterval()与clearInterval()，事件发生后重复执行
3、客户端缓存有哪几种方式？各有什么区别？（cookies sessionStorage和localstorage）
localStorage 是 HTML5 标准中新加入的技术，localStorage 被大多数浏览器所支持，更多用他来存储数据。（不兼容IE低版本浏览器
Cookie的主要用途有保存登录信息， 比如你登录某个网站市场可以看到“记住密码”， 这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在
sessionStorage直译是会话存储， 它只是可以将一部分数据在当前会话中保存下来， 刷新页面数据依旧存在。 但当页面关闭后，sessionStorage中的数据就会被清空。
4、ajax是什么？使用时有那几步？
前端向后台请求数据 ，
第一步：创建一个ajax(实例)对象
第二步：设置请求协议(配置信息)（open）
第三步：监听 ajax 请求状态（xhr.onreadystatechange）
第四步：开始发送请求（send）
5、xml和json的区别是什么
XML可读性较好些，XML有很好的扩展性
json体积小，传输快，编译难度小
6、常见的HTTP状态码及意义
200 请求成功，
301 请求的资源已永久移动到新位置。
302 请求的资源现在临时从不同的 URI 响应请求。
400 语义有误，当前请求无法被服务器理解，请求参数有误。
401 当前请求需要用户验证。
403 服务器已经理解请求，但是拒绝执行它。
404 请求失败，请求所希望得到的资源未被在服务器上发现。
500 服务器遇到了一个未曾预料的状况，无法完成对请求的处理，会在程序码出错时出现。
501 服务器不支持当前请求所需要的某个功能。无法识别请求的方法。
502 作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
503 由于临时的服务器维护或者过载，服务器当前无法处理请求。
7、http 和 https 有何区别？如何灵活使用？
HTTP：80端口，超文本传输协议是互联网上应用最为广泛的一种网络协议。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
HTTPS：443端口，是以安全为目标的HTTP通道，简单讲是HTTP的安全版。HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。必须有一台支持SSL的服务器或主机，提前准备好正规的SSL。
8、JavaScript循环的方法有哪些？分别适用哪种情景？
for循环，用来遍历数组.
forEach(…)：会遍历数组中的所有值并忽略回调函数的返回值
some(…):一直运行直到回调函数返回 true (或者“真”值).返回true时相当于在for循环里break,会提前终止循环
every(…):一直运行直到回调函数返回 false (或者“假”值).返回false时相当于在for循环里break,会提前终止循环
for…in循环会遍历对象中的所有可枚举属性,
for…of :为了弥补for…in循环遍历数组的缺陷，
9、常用的正则表达式？能否写出一两个？(例：电话和邮箱验证)
var Phone = /^1[0-9]{10}/;
var Email=/^(\w+.?)*\w+@(?:\w+.)\w+$/;
10、对JavaScript闭包的理解（什么是闭包？为什么使用闭包？如何使用？）
闭包是能够读取其他函数内部变量的函数；
原因：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中
使用：由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。因此可以手动解除对匿名函数的引用，以便释放内存。
11、关于JS事件冒泡与JS事件代理（事件委托）
js事件冒泡：js所谓的事件冒泡就是子级元素的某个事件被触发，它的上级元素的该事件也被递归执行；
js事件委托，其实是使用了冒泡的原理，从点击的元素开始，递归方式的向父元素传播事件，就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素。当点击子元素，根据"事件冒泡"，该子元素的父级元素捕获了该次点击事件，并触发自己的方法。
12、什么是JSONP？以及它为什么不是真正的ajax？
jsonp是利用浏览器可以动态地插入一段js并执行的特点完成的。
因为 ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，而jsonp的核心 ： 动态添加
13、为什么会有跨域问题？怎么解决？
ajax请求受同源策略影响，不允许进行跨域请求，
使用jsonp 创建一个script标签在src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
14、get方法和post方法有什么异同？
本质上get是向服务器发索取数据的一种请求，而post是向服务器提交数据的一种请求；get方式提交的数据，服务器端使用request.QueryString获取变量的值；post方式提交的数据，服务器端使用request.Form获取数据
get方式安全性低，post方式较安全，但是post方式执行效率要比get方式差一些，get有大小限制，post没有。
15、JavaScript继承的几种方法？
原型链继承，实例继承，构造继承，组合继承，寄生组合继承
16、异步加载和延迟加载的方法？
异步：onload，async，await
延时：deter
二、高级部分
1、页面优化的方法有哪些？
1.尽量减少 HTTP 请求
-
不要在 HTML 中使用缩放图片
-
Image压缩
-
减少对DOM的操作
2、什么是MVC、MVVM，区别和原理？
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型（双向）
MVC是Model-View- Controller的简写。即模型-视图-控制器（单向）
MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。
MVVM原理：数据劫持发布-订阅模式。Vue 将遍历此对象所有的属性，并使用Object.defineProperty()方法把这些属性全部转成setter、getter方法。当data中的某个属性被访问时，则会调用getter方法，当data中的属性被改变时，则会调用setter方法。Compile指令解析器，它的作用对每个元素节点的指令进行解析，替换模板数据，并绑定对应的更新函数，初始化相应的订阅。Watcher 订阅者，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。
3、什么是优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
4、JS哪些操作会造成内存泄露？
JS回收机制，标记清除，引用计数
5、bootstrap响应式实现的原理
Bootstrap响应式布局是利用其栅格系统，通过一系列的行（row）与列（column）的组合来创建页面布局，对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。
6、谈谈垃圾回收机制及内存管理
垃圾收回机制：垃圾收集器会定期找出那些不在继续使用的变量，然后释放其内存。
内存管理：遍历所有可访问的对象，回收已不可访问的对象。
7、浏览器是如何渲染页面的
解析文档构建DOM树，构建渲染树，布局与绘制渲染树
8、从输入url到页面呈现发生了什么？
浏览器的地址栏输入URL并按下回车，浏览器查找当前URL是否存在缓存，并比较缓存是否过期，DNS解析URL对应的IP，根据IP建立TCP连接（三次握手），HTTP发起请求，服务器处理请求，浏览器接收HTTP响应，渲染页面，构建DOM树，关闭TCP连接（四次挥手）。
9、web worker和web socket是什么？有何相关项目经验？（注：主要和网页消息通讯有关）
Web Worker让JS有了多线程的能力，可以将复杂耗时的操作都交付给Worker线程处理。
WebSocket让web端与服务端维持一个有效的长连接，实现服务端主动推送数据。
将二者一结合，业务系统信息流转通知功能完全就可以剥离出来。
10、如何规避多人开发明明冲突问题？
把自己写好的代码，复制一份出来，放到一个安全的地方，然后重新找个地方，把线上的最新的代码 git clone 下来，然后把自己刚才复制出来的代码放进项目相应的地方，把原来自己写的旧代码覆盖了，然后新建分支，再按照上面的方法去提交代码就行了
12、如何进行web性能优化？
减少向服务器发出的并发请求数量，减少浏览器的内存使用率，减少服务器端的负载
13、谈谈你对webpack的看法（注：vue的很多项目都使用了webpack）
WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件图片、字体等，让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。
14、谈谈对前端模块化的认识（AMD和CMD是什么？）
AMD 是一个在浏览器端模块化开发的规范（异步模块定义），由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数（RequireJS）。
CMD （通用模块定义），CMD规范是国内发展出来的，就像AMD有个requireJS，使用CMD规范进行页面开发也需要用到对应的库函数（SeaJS）。两者在模块加载（可以说运行、解析）时机上有所不同 。
15、栈和队列的区别？
队列是先进先出，有出口和入口，先进去可以先出来，而栈是后放上去的，可以先出来
16、栈和堆的区别？
栈由操作系统自动分配释放，无需我们手动控制；堆的申请和释放工作由程序员控制，容易产生内存泄漏；
每个进程拥有的栈的大小要远远小于堆的大小；
堆的生长方向向上，内存地址由低到高；栈的生长方向向下，内存地址由高到低；
堆都是动态分配的，没有静态分配的堆。栈有2种分配方式：静态分配和动态分配；
栈由操作系统自动分配，堆则是由C/C++提供的库函数或运算符来完成申请与管理，堆的效率比栈要低得多；
栈存放的内容，函数返回地址、相关参数、局部变量和寄存器内容等。堆，一般情况堆顶使用一个字节的空间来存放堆的大小，而堆中具体存放内容是由程序员来填充的。
17、如何评价angularJS和backbone js
18、web应用从服务器主动推送data到客户端有哪些方式？
Commet：基于HTTP长连接的服务器推送技术
SSE（Server-Send Event）：服务器推送数据新方式
19、谈谈你对网站重构的理解
-
表格(table)布局改为 DIV + CSS
-
使网站前端兼容于现代浏览器(针对于不合规范的 CSS、如对 IE6 有效的)
-
对于移动平台的优化
-
针对于 SEO 进行优化
-
深层次的网站重构应该考虑的方面
-
减少代码间的耦合
-
让代码保持弹性
-
严格按规范编写代码
-
设计可扩展的 API
-
代替旧有的框架、语言(如 VB)
-
增强用户体验
-
通常来说对于速度的优化也包含在重构中
-
压缩 JS、CSS、image 等前端资源(通常是由服务器来解决)
-
程序的性能优化(如数据读写)
-
采用 CDN 来加速资源加载
-
对于 JS DOM 的优化
-
HTTP服务器的文件缓存
20、说说你对promise的理解
Promise是一种解决异步编程的方案，合理而强大；
promise是为解决异步处理回调金字塔问题而产生的；
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject；
Promise对象的状态不受外界影响（pending 初始状态，fulfilled 成功状态，rejected 失败状态）。
21、说说严格模式的限制
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如static）
22、怎样做前端单元测试？
23、有没有服务端编程语言基础？如java或php
版权归原作者所有，金桐网依法保护版权，保护权利人合法权益。金桐网部分文章、知识等若未能第一时间与作者取得联系或标注原始出处，请谅解。若涉及版权或第三方网络侵权问题，请及时与我公司服务中心联系。
扫一扫
1723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
