web前端开发面经 web前端 面试必问的几个问题?有那些?

web前端开发面经 web前端 面试必问的几个问题?有那些?很多朋友对这方面很关心，我爱编程网整理了相关文章，供大家参考，一起来看一下吧！

Web前端5道面试题

1.请说明ECMAScript,JavaScript,Jscript之间的关系?

ECMAScript提供脚本语言必须遵守的规则、

细节和准则，是脚本语言的规范。

比如：ES5，ES6就是具体的一js版本。

JavaScript是ECMAScript的一个分支版本,

JavaScript实现了多数ECMA-262中

描述的ECMAScript规范，但存在少数差异。

JScript是微软公司对ECMA-262语言规范的

一种实现,除了少数例外(这是为了保持向后兼容),

微软公司宣称JScript完全实现了ECMA标准.

关系:

JavaScript和JScript都是ECMAScript的版本分支,

二者在语法上没有多大的区别;

只不过一个是NetScape公司的,一个是微软的;

IE系列默认是JScript,其它的则反之用JavaScript。


2.页面加载过程中可能触发哪些事件?它们的顺序是?

页面加载时，大致可以分为以下几个步骤：1)开始解析HTML文档结构2)加载外部样式表及JavaScript脚本3)解析执行JavaScript脚本4)DOM树渲染完成5)加载未完成的外部资源6)页面加载成功

执行顺序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件


3.函数中在声明变量a前使用a会产生错误吗?为什么?

不会,JS中能够进行变量作用域提升,

把所有变量、函数的声明提升到当前

作用域的最前面,但不进行赋值操作;

所以可能造成获取的值是undefined。


4.什么是hash,以及hashchange事件?

先了解下什么是hash:hash即URL中"#"字符后面的部分。

a)使用浏览器访问网页时，

如果网页URL中带有hash，

页面就会定位到id(或name)

与hash值一样的元素的位置;

b)hash还有另一个特点，

它的改变不会导致页面重新加载;

c)hash值浏览器是不会随请求发送到服务器端的;

d)通过window.location.hash属性获取和设置hash值。

window.location.hash值的变化会直接

反应到浏览器地址栏(#后面的部分会发生变化)，同时，浏览器地址栏hash值的变化也会触发

window.location.hash值的变化，

从而触发onhashchange事件。

再来了解下什么是hashchange事件:

a)当URL的片段标识符更改时，

将触发hashchange事件(跟在#符号后面的URL部分，包括#符号)b)

hashchange事件触发时，

事件对象会有hash改变前的URL(oldURL)和hash改变后的URL(newURL)两个属性。


5.什么是CDN,CDN对于网站有什么意义,它有什么样的缺点?

CDN又称为内容分发网络;本意在于

尽可能避开互联网上有可能影响数据

传输速度和稳定性的瓶颈和环节，

使内容传输的更快、更稳定。

主要目的:

解决因分布、带宽、服务器性能带来的访问延迟问题，

适用于站点加速、点播、直播等场景。

使用户可就近取得所需内容，解决Internet网络拥挤的状况，

提高用户访问网站的响应速度和成功率。

缺点:

a)实施复杂,投资大;

b)目前大部分的CDN还只是对静态内容加速，

对动态加速效果不好;

而双线对动态加速的效果跟静态是一样的。

2022前端开发面试记录（深圳篇）

2022年来到深圳，感觉到了与之前所在城市的差异，心里多少有点落差。虽然时机不太对吧，但是相信一切都会好起来的，给自己加油呀！
整理了一些面试被问到的问题，虽然很多是无效面试，但是我也强行问了面试官，从他们的回答中猜测了一下他们关注的面试点，所以也算是有点收获吧，只是浪费了很多简历和路费，哭唧唧。

——1、区块链——
1-1、vue生命周期；
1-2、vuex属性；
1-3、用户开始登录到登录成功都发生了什么；
1-4、git常用的命令；

——2、金融：vue——
笔试：
2-1、深浅拷贝的区别，为什么会出现深浅拷贝，浅拷贝的优势；
2-2、强制中断 foreach 遍历；
2-3、多处组件复用；
2-4、你对前端是什么概念，前端在整个软件生态内是什么角色；
2-5、Vue2 中数据变化但视图没有发生同步更新，描述一下出现的场景，解决方式，以及该问题发生的可能原因；
2-6、nextTick 是如何确保开发者能够获取到最新的 DOM 状态的；
2-7、如何使用 mixins，有何利弊；
2-8、使用 Hooks 模式开发时，useMemo，useCallback 常用来作为优化的手段。描述一下它们各自的适用场景，以及背后的原理实现?；
2-9、前端从 Jquery 时代演变至如今的三大框架，这种演变的根源是什么，jquery 解决了什么问题，如今的三大框架又是为了解决什么问题出现的？
视频面试：
2-10、js遍历树形结构，每个节点都有一个唯一ID，只能遍历一次；
2-11、组件封装的意义；

——3、知识产权：vue2、vue3、ts、react——
3-1、说一说面向对象的理解，包括继承、封装、多态等；
3-2、说一说promise；
3-3、webpack优化；
3-4、vuex使用场景；
3-5、描述一下对vue响应式原理的理解；
3-6、vue生命周期；
3-7、父子组件钩子函数执行顺序；
3-8、v-if和v-show；
3-9、js数据类型；
3-10、实现深拷贝；

——4、物流——
4-1、vue生命周期；
4-2、生命周期-修改元素样式在生命周期的哪个阶段；
4-3、生命周期-修改数据在哪个阶段；
4-4、生命周期-destroy里面会做哪些操作；
4-5、怎么修改title的内容；
4-6、父子组件传参的具体写法；
4-7、v-model的多种写法；
4-8、js数据类型；
4-9、判断数组的方法；
4-10、实现左边固定右边自适应的布局；
4-11、实现div垂直水平居中；
4-12、flex:1；
4-13、flex详解；
4-14、call,apply,bind是干什么的；

——5、新兴产业——
5-1、封装路由，怎么拦截路由；
5-2、浏览器缓存有哪些，又问localStorage和sessionStrorage的区别和应用场景；
5-3、浏览器强缓存和协商缓存；
5-4、webpack打包机制，构建过程和配置；
5-5、性能优化方法；
5-6、前端的业务和后端的API是怎么做到数据实时请求的（问的其实是前端对后端API接口的封装和管理）；
5-7、computed和watch；
5-8、说了几个关于大屏的应用场景，有没有做过，怎么做的；

——6、某水果：vue2、vue3、ts、各种前沿技术都用——
6-1、怎么封装一个组件库/工具类库，比如vue封装过什么复杂组件，jquery封装过什么类库；
6-2、get和post的区别，传参格式等；
6-3、promise怎么用的；
6-4、原型链，test()的原型链；
6-5、websocket；
6-6、es6中的generator；
6-7、es6中的set和map有啥区别，set为什么能去重；
6-8、项目难点；

——7、医疗健康：vue——
7-1、vue自定义指令配置；
7-2、webpack的理解；
7-3、对node的了解，用过express吗；
7-4、项目中的拖拽是怎么做的；
7-5、websocket和socket的区别；
7-6、听过mqtt吗，因为没听过所以解释了一下activemq的用法；
7-7、二维地图的聚合，如果有十万个点，会做什么优化；
7-8、地图实现多个点连成一条线会怎么做；
7-9、地图实现一条曲线；
7-10、内网下git怎么用的；
7-11、openlayers渲染机制；
7-12、父子组件通信方法；
7-13、router中实现拦截；
7-14、对象合并的方法；
7-15、父子组件的生命周期执行顺序，渲染阶段为什么会先执行父组件再执行子组件；
7-16、vue生命周期；
7-17、npm run dev, run build可以在项目中的什么位置找到；
7-18、vue中跳转页面的方法；
7-19、mixins用过吗；
7-20、判断引用类型的方法；
7-21、js数据类型；
7-22、判断基本数据类型的方法；
7-23、for in和for of的用法和区别，两者遍历的是索引还是属性值，两者都可以遍历对象吗；
7-24、foreach和map的区别，两者会不会改变原数组；
7-25、主要用什么技术栈；
7-26、行内元素和块级元素的区别，分别都有哪些，行块级元素有哪些；
7-27、div垂直水平居中，grid知不知道怎么用；
7-28、splice和slice；

——8、智慧园区：vue2、vue3、ts、uniapp——
8-1、flex了解吗，flex布局方向，flex:1 0的页面效果是怎样的；
8-2、做过移动端吗，了解uniapp吗；
8-3、keep-alive；问了一个没听明白的，可能和keep-alive有关系；
8-4、vuex中的action；不用vuex，怎么代替vuex；
8-5、promise.all和promise.on；
8-6、防止表单重复提交；
8-7、async，await的使用；
8-8、vue3和ts的了解；
8-9、防抖怎么控制时间；
8-10、vue中的data为什么要设计成一个函数；

——9、智慧工地：vue、uniapp、小程序——
9-1、Vuex是干什么的；
9-2、openlayers怎么用的；
9-3、性能优化；
9-4、spa首屏加载优化；
9-5、bundler.js太大，打包怎么优化；
9-6、加密方式了解多少，比如md5,base64等，一大堆没听过的；
9-7、冒泡排序的实现原理；
9-8、js设计模式；

——10、某快递公司外包——
10-1、一棵树的数据，给的是列表格式，转换成树形结构；
10-2、项目相关的，聊天怎么做的，拖拽怎么做的，拖拽的数据怎么渲染的，拖拽重叠怎么处理的；
10-3、js设计模式；

——11、三维：vue、cesium——
11-1、一棵树的数据，给的是列表格式，转换成树形结构；
11-2、openlayers怎么用的，发布过wms吗，发布流程是怎样的；
11-3、openlayers转换经纬度的方法名是什么；
11-4、cesium常用的函数；
11-5、vue数据双向绑定原理；
11-6、Vue中data属性如果改变一个数组的下标，会不会马上发生变化，不变化可以怎么解决
11-7、数组常用方法有哪些；
11-8、 map和filter的区别；
11-9、es6常用的方法；
11-10、父子组件通信，兄弟组件通信；
11-11、new具体进行了什么操作；

——12、医疗：vue、angular——
12-1、js渲染机制和运行机制；
12-2、vue数据绑定原理；

——13、建设行业：vue、uniapp——
笔试：
13-1、||与&运算符；
13-2、垂直居中方案；
13-3、let a=arr, b=a, c=arr.concat(), a[0]=3，打印b和c，应该是深浅拷贝；
13-4、实现font-size:12；
13-5、接口路径，给一个地址 ().html ，根据url请求接口路径写出完整路径，’/ geturl.do ’，’ geturl.do ’，’../ geturl.do ’；
13-6、微信小程序流程和主要文件；
13-7、获取url参数及内容；
13-8、$(function(){}) / (function(){}) / (function(){})()的区别；
13-9、前端优化方案；
面试：
13-10、项目难点；
13-11、git工作流；
13-12、jquery项目会不会用webpack打包；
13-13、webpack优化；
13-14、web优化；

——14、文化：uniapp——
14-1、ssr渲染；
14-2、ajax和axios的区别；
14-3、cookie和session的区别；
14-4、vue生命周期；
14-5、数据请求写在哪个生命周期中；
14-6、router的history模式和hash模式；
14-7、工作中的开发流程；
14-8、uniapp的开发流程和坑；
14-9、uniapp滑动问题，下滑切换视频不生效，一般是什么原因；
14-10、uniapp加载速度慢，点击加载图片速度太慢，一般是什么原因；

——15、企业平台某外包：vue，node，性能优化——
15-1、说一说websocket；
15-2、vue数据双向绑定原理；
15-3、项目难点；
15-4、对mvvm、mvc、mvp等的理解；
15-5、vue的常见指令；
15-6、computed和watch；
15-7、class和style怎么绑定；
15-8、ajax和axios的区别；
15-9、axios拦截器，axios的post请求；
15-10、对前端渲染，服务端渲染的理解；

——16、智慧城市：vue，node，three.js——
16-1、vue生命周期；
16-2、vue组件通信方法；
16-3、js的继承；
16-4、oracle、mysql、sqllite的区别；
16-5、oracle连表查询；
16-6、openlayers项目场景；
16-7、cesium项目场景；

——17、租房：jquery+layui，vue2——
17-1、笔试：
17-2、foo打印题；
17-3、this打印题；
17-4、变量提升打印题；
17-5、let arr=[1,2,[5,8,[9,[3,5,]7,]20,37]] 把数组扁平化成一个数组，并进行去重升序;
17-6、let a=[1,2,3,4,5,6,7]; let b=[4,5,6]; 求b在a中第一次出现的位置；
17-7、面试：主要问项目

——18、跑腿：vue2，vue3+ts——
18-1、对html5语义化的理解；
18-2、css实现一个三角形；
18-3、css怎么实现0.5px的线，为什么有这种需求，涉及到兼容性问题；
18-4、怎么解决变量提升的问题；
18-5、es6新增了哪些定义变量的方式；
18-6、const定义的变量可以被修改吗；
18-7、map和filter的区别，会改变原数组吗；
18-8、es6去重的方法；
18-9、谈一谈对promise的理解；
18-10、除了链式调用，promise还可以怎么处理同步请求(async/await)；
18-11、对vue响应式原理的理解，核心是什么；
18-12、对vue生命周期每个阶段的理解；
18-13、为什么要用key，key有什么作用；
18-14、v-if和v-show；
18-15、Vue中data为什么是一个函数；
18-16、vue各场景下的传值方式有哪些，比如父子组件，兄弟组件，祖孙组件；
18-17、对vuex的理解和使用场景；
18-18、vue常见修饰符；
18-19、Vue3用过吗(因为没用过，所以就只针对响应式原理说了一下vue3和vue2的区别)；

——19、实业：jquery，vue2，vue3——
笔试：需要解释
19-1、html5新标签，css3新特性；
19-2、js+css3实现某元素以50px每秒的速度左移100px；
19-3、css实现左中右布局，不改变文档流；
19-4、js兼容性有哪些，以及常见的解决方案；
19-5、描述一下事件循环机制eventloop，eventloop解决了什么问题；
19-6、给了一个题，大概是后端返回的接口数据，data的格式有很多，比如null，对象，数组，字符串等，怎么处理这种问题；
19-7、前端性能优化方法，首屏页面怎么优化；
19-8、用js写一个方法实现数据去重并排序(用es5和es6+实现)；
19-9、给定一个数组，把数组中为0的往后排，其他值按顺序排序; （示例：[1,0,4,0,5,3]转换结果为[1,3,4,5,0,0]）
19-10、用0，1，2代表红黄蓝三种颜色，实现以下排序，不能用array.sort实现;（示例：[0,1,0,2,0,1,2]转换结果为[0,0,0,1,1,2,2]）
面试：
19-11、flex布局；flex:1对应的属性；
19-12、讲一下原型链； proto 和prototype有什么区别；字符串有没有原型；给定一个str，str.test()调用的谁的test方法；
19-13、讲一下闭包；什么情况下才能算是闭包；形成闭包的条件；列了三个题让你判断是不是闭包；
19-14、v-if和v-show是干什么的；应用场景有哪些；给定一对父子组件，默认值是false，另外有一个ajax请求，值发生了以下变化（false true false true true），在v-show和v-if中，父子组件的哪个阶段里会请求ajax；
19-15、computed的实现原理，怎么实现一个computed；
19-16、css中，transform，margin，position的都是怎么渲染的，渲染机制是什么；amd，cmd，commonjs了解吗；

web前端 面试必问的几个问题?有那些?

web前端 面试必问的几个问题?有那些?

根据面试官的不同，面试的内容页不一样的。一般的话就是+css布局占一部分，例如各浏览器的相容性，然后就是js的ajax，闭包，冒泡什么的，js会占很大一部分，也有一部分面试官会抛开这些，直接问公司需要的内容，这样的话就是考验你的实际操作了，这类的面试官我很喜欢，就是直接问布局，资料填充之类的，能学到很多东西，建议面试时偷偷用手机录音，回来之后听一听，研究一下自己不会的问题，因为面试完之后，你可能就会忘了面试时都问过什么了

web前端 面试 会问哪些问题

对公司这个行业有什么样的看法，未来的职业规划，自己做好该职位工作的优势，个人缺点是什么，还有就是一些技术性问题了。web前端 面试 会问哪些问题 我爱编程网

web前端开发的几个问题

1.巢状表单一般不会有什么问题，主要是看业务需求，不过尽量还是不要使用巢状。
2.name只是标签的属性，一般的网页标签元素都可以使用这个属性，并非只能表单域里的标签才能使用。比如 div、span、input等等都可以有name属性。
3.JQuery已经成为JS指令码开发的标配了，本身的体积也比较小，最主要的是简化了很多JS操作，而且我们基本不用考虑JS的浏览器相容问题了。至于效能和原生的JS没什么区别，放心使用吧。

面试Web前端需要注意什么？会面试哪些问题？

将这些问题作为参考。
希望你的面试官有点经验，不会用以下这样的问题开场。以防万一，还是准备一些答案。
1.为什么选择程式设计师这个职业生涯?
2.截至目前，你所从事的专案中最喜欢的是哪个?
3.描述一下你梦想中的研发专案。
另外一些面试官会问一些通用的技术问题，来测试你的技术能力。有可能部分人不知道这些问题是什么意思，而仅仅是在考察你的能力/竞争力。基于面试官的技术能力级别的不同，你的答案也会有所不同。这些问题简单易答，因此把这些问题记下来。
1.描述一下建立一个新网页的过程
2.怎样减少页面载入时间?
3.标准和标准体(standards and standards bodies)为什么重要?
4.你使用怎样一个过程来组织程式码?
5.你喜欢用什么工具来测试程式码效能?[page]
既然你从事前端工作，理解CSS会非常重要。因此这里为你准备了一些常见的CSS问题。这是展示你知识储备的重要开始。这些并不是最尖锐或者重要的问题，如果不能回答出来，将对你很不利。
1.CSS 中的 resetting 和 normalizing 之间的区别有哪些?
2.什么是floats，它是如何工作的?
3.absolute、relative、fixed 和 static 定位的区别是什么?
4.解释visiblity hidden和display none之间的区别
5.你是如何修复特定浏览器预设样式的问题?
6.你是否用过网格系统?目的是?
7.如果计算CSS权重?
8.解释如何优化CSS选择器。
9.为什么需要使用预编译器?
10.你是如何测试网站的跨浏览器相容性?
现在我们最基本的任务完成了。谁都能死记硬背这些答案来应付以上问题。即使是新手前端开发者也能出色地回答大部分问题。然而如果想真正让你的面试官印象深刻并证明你的功底深厚，就把下面这些问题牢记在心。
1.前端开发的框架是什么?
2.响应式web app和原生应用程式的区别是什么?
3.原生app相对web app的优点是什么?
4.客户端和伺服器端开发的区别是什么?
5.什么是SASS和LESS?它们是如何工作的?
面试官会更多关注你是如何表达对这些问题的解释。他们会追问支援你的答案的工作案例。前面的问题你可能可以通过记忆而过关，你可能还会遇到这些问题的扩充套件，但这些答案的深度，将让你与众不同。通过你参与过的实际专案，来展示你的思考过程。

web前端jquery面试题有哪些

常见的几个如下：他们的答案可以百度搜。
1. jQuery 库中的 $() 是什么？
2. 网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？
3. jQuery 里的 ID 选择器和 class 选择器有何不同？
4. 如何在点选一个按钮时使用 jQuery 隐藏一个图片？
5. $(document).ready() 是个什么函式？为什么要用它？
6. JavaScript window.onload 事件和 jQuery ready 函式有何不同？
7. 如何找到所有 HTML select 标签的选中项？
8. jQuery 里的 each() 是什么函式？是如何使用它的？

web前端面试必考的基础面试题有哪些？

切图，css 盒模型，js基础语法，ajax, 面向物件，模组化，效能优化，自动化这想相对的考核会多一些。大公司重基础，小公司重能力，所以与时间的话多去刷一刷基础的题目吧。
祝你顺利通过面试！

web前端面试经常问到的面试题有哪些

web前端面试经常问到的面试题实在太多了，建议你去网上搜索一下，或者直接下载一些面试题的集锦，然后看看就好了。

1、 列举web效能优化？
1)
减少请求次数。合并档案、利用css sprite把零散的图片整合到一张图上。
2)
减少DNS查询。
3)
减少从定向。
4)
响应时间。使用AJAX进行快取，减少请求。
5)
延迟载入元件.
6)
预载入元件。
7)
减少节点的数量。
8)
切分元件到多个域。
9)
最小化iframe。
10)
杜绝404错误。
2、 介绍一下XMLHttpRequest物件的常用方式和属性?
open(“method”,”URL”) 建立对伺服器的呼叫，第一个引数是HTTP请求方式
可以为GET，POST或任何伺服器所支援的您想呼叫的方式。
第二个引数是请求页面的URL。
send()方法，传送具体请求
abort()方法，停止当前请求
readyState属性 请求的状态 有5个可取值 0=未初始化 ，1=正在载入
2=以载入，3=互动中，4=完成
responseText 属性 伺服器的响应，表示为一个串
reponseXML 属性 伺服器的响应，表示为XML
status 伺服器的HTTP状态码，200对应ok 400对应not found

web前端问题

IE浏览器类似银行网银安全密码输入控制元件，使用键盘钩子防止被键盘记录器监听密码，使用des对密码加密传输，输入框禁止选择复制
或者
只要是ActiveX，必须要进行IE的安全设定。
网银一般都是一个安装程式，安装的时候都给你设定好了。
ActiveX在页面里面和普通的DOM物件一样，只要ActiveX建立成功，就可以用js直接访问该元件的方和和属性。

以上就是我爱编程网为大家带来的web前端开发面经 web前端 面试必问的几个问题?有那些?，希望能帮助到大家！