当前位置:首页 » 网页前端 » 前端面试场景图
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端面试场景图

发布时间: 2023-03-03 04:11:46

1. Web前端最全面试宝典- Html篇

HTML
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
5.HTML全局属性(global attribute)有哪些
参考资料:MDN: html global attribute或者W3C HTML global-attributes
accesskey
:设置快捷键,提供快速访问元素如aaa在windows下的firefox中按alt + shift + a
可激活元素
class
:为元素设置类标识,多个类名用空格分开,CSS和javascript可通过class属性获取元素
contenteditable
: 指定元素内容是否可编辑
contextmenu
: 自定义鼠标右键弹出菜单内容
data-*
: 为元素增加自定义属性
dir
: 设置元素文本方向
draggable
: 设置元素是否可拖拽
dropzone
: 设置元素拖放类型: , move, link
hidden
: 表示一个元素是否与文档。样式上会导致元素不显示,但是不能用这个属性实现样式效果
id
: 元素id,文档内唯一
lang
: 元素内容的的语言
spellcheck
: 是否启动拼写和语法检查
style
: 行内css样式
tabindex
: 设置元素可以获得焦点,通过tab可以导航
title
: 元素相关的建议信息
translate
: 元素和子孙节点内容是否需要本地化
6.什么是web语义化,有什么好处
web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 css命名的语义化是指:为html标签添加有意义的class,id补充未表达的语义,如Microformat通过添加符合规则的class描述信息 为什么需要语义化:
去掉样式后页面呈现清晰的结构
盲人使用读屏器更好地阅读
搜索引擎更好地理解页面,有利于收录
便团队项目的可持续运作及维护
7.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
新特性:
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签(header,nav,footer,aside,article,section)
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
表单控件,calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
移除的元素:
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
支持HTML5新标签:
IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架):
如何区分:
DOCTYPE声明新增的结构元素、功能元素
8. HTML5 存储类型有什么区别?
HTML5 能够本地存储数据,在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案:
localStorage - 没有时间限制的数据存储,数据永远不会过期,关闭浏览器也不会丢失
sessionStorage - 针对一个 session 的数据存储,同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
9. HTML5 标准提供了哪些新的API?
1:canvas,不用多说,可以画出很多绚丽的图形,甚至可以直接做出伪3D游戏。
2:媒体控制,也很好理解(直译就是回放功能,假如只用html5.0以下的标签写,以前的音乐播放是不可能实现滚动条的。)
3:离线网页程序,可以把资源文件完全缓存在客户端,并且通过js的一些方法清空缓存
4:文档编辑,应该是更好的支持对文档的编辑。
5:拖动,可以将文件拖动到某些区域上传
6:跨文档请求,websocket,一种更加高效的通讯方式
7:历史管理,可以通过js管理和插入历史记录
8:MIME头自定义
9:客户端数据存储,localstoage sessionstoage
10:地理位置共享
11:本地数据库
12:索引数据库
10.HTML5 应用程序缓存和浏览器缓存有什么区别?
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
11.常用那几种浏览器测试?有哪些内核(Layout Engine)?
(Q1)浏览器:IE,Chrome,FireFox,Safari,Opera。
(Q2)内核:Trident,Gecko,Presto,Webkit。
12.请描述一下 cookies,sessionStorage 和 localStorage 的区别?
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大;
sessionStorage和localStorage有更多丰富易用的接口;
sessionStorage和localStorage各自独立的存储空间;
13.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
14.请写出localStorage对象的常用方法。
存储 - localStorage.setItem(key, value) - 如果key存在,更新value
获取 - localStorage.getItem(key) - 如果key不存在,返回null
删除 - localStorage.removeItem(key) - 删除key对应的数据
全部清除 - localStorage.clear() - 清空localStorage中所有数据
遍历 - localStorage.length
遍历 - localStorage.key(index)
15.如何在HTML5中启用应用程序缓存?
<html manifest="fileName.appcache">
每个指定了manifest的页面在用户对其访问时都会被缓存。
.appcache是manifest文件的扩展名
16.html5 离线存储
Html5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新、删除离线存储等操作。
Html5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 <html manifest='offline.manifest'> 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中管理manifest文件,那么静态文件服务器是个不错的选择。
17.HTML5 Canvas 元素有什么用?
Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作

2. web前端面试题第二道—简述盒模型

W3C组织建议把所有网页上的对象都放在一个盒子(box)中,就是所说的盒子模型,CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:实际内容(content)、填充(padding)、边框(border),边界(margin)。一个div就是一个盒子。

下面的图片说明了盒子模型(Box Model):

不同部分的说明与属性:

Content(内容) - 盒子的内容,显示文本和图像。

Padding(内边距) - Padding是盒子中的文字距离盒子边框(border)的距离,内边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Margin(外边距) - margin是盒子距离网页边的距离,外边距是透明的。

最终盒子实际所占位置大小计算公式是这样的:

盒子所占位置的实际宽度=宽度+左填充+右填充+左边框+右边框+左边界+右边界

盒子所占位置的实际高度=高度+顶部填充+底部填充+上边框+下边框+上边界+下边界

要注意区分的是盒子所占位置的实际宽度高度值和盒子实际大小的宽度和高度值,盒子实际大小的宽度和高度是所占位置实际宽度高度的值减去边界(margin)所占的大小,即

盒子的实际宽度=宽度+左填充+右填充+左边框+右边框

盒子的实际高度=高度+顶部填充+底部填充+上边框+下边框

盒子模型的3D示意图,如下图所示,padding与margin是看不见的透明元素

从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。

盒子模型分两种,IE盒子模型和标准的W3C盒子模型。他们对盒子模型的解释各不相同。

W3C标准盒子模型

W3C标准盒子模式包括内容(content)、填充(padding)、边框(border)、边界(margin)

IE盒子模型

从图中可以可以看出IE盒子模型的范围也包括content、padding、border、margin,所不同的是IE盒子模型的content包含了border和padding。那么应该选用哪种模型呢,当然是选用W3C 标准盒模型,就是要在网页的顶部加上DOCTYPE声明,否则各个浏览器会根据自己的行为去理解网页。

例如一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为50px

假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:

宽 20*2+1*2+10*2+200=262px、高20*2+1*2*10*2+50=112px

盒子的实际大小为:宽1*2+10*2+200=222px、高1*2+10*2+50=72px

假如用ie 盒子模型,那么这个盒子需要占据的位置为:

宽 20*2+200=240px、高20*2+50=70px

盒子的实际大小为:宽 200px、高 50px

由于IE浏览器使用自己的非标准模型。IE浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。就是要在网页的顶部加上DOCTYPE声明。

3. 你遇到的前端面试题都有什么

大家好,我是王我。

随着春节的结束,各个行业也普遍开始了上班的节奏, 不过本人17号才上班。为什么?因为长得帅的都上班比较晚。 当然,每到新年结束,又迎来了一批招聘者与面试者,我来说说作为一年工作经验应该知道的面试题。

HTML篇

1.doctype是什么?有哪些类型?

2.input有哪些新类型?简要说明其8用法。

3.HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

4.bootstrap响应式的原理是什么?

5.多移动终端页面适配是如何实现的?

CSS篇

1.如何实现两列布局,左边自适应,右边固定宽度?

2.用CSS画一个三角形

3.CSS实现字体大写

4.display有哪些常用的属性值?分别是什么意思?

5.position为absolute,relative,fixed的定点位置

6.用三种方法清除浮动

7.请介绍一下margin塌陷问题

js篇

1.什么是事件冒泡和捕获?如何阻止事件冒泡?(分别用原生和jquery实现)

2.js创建对象,至少使用三种方法

3.简述一下事件穿透以及解决办法

4.用三种方式判断变量类型是否是数组

5.如何实现对象的拷贝?

6.什么是闭包?闭包的优缺点。

7.简述一下ajax请求的过程。

8.简述一下new一个人构造函数的人过程。

9.为什么会有跨域?是怎么解决跨域问题的?简述一下原理。

10.js原始数据类型有哪些?

11.学一个函数,判断一个变量是否是字符串

12.typeof有哪些结果?

13.剪头函数和普通函数有什么区别?

14.请用三种方法实现数组去重

15.href和src有什么区别?

jquery篇

1.attr()和prop()有什么区别?

2.on和bind有什么区别?js动态添加的dom元素是通过on还是bind?

3.touch和click有什么区别?

4.window.onload和jquery的ready有什么区别?

vue篇

1.简述一下vue的生命周期及其特点

2.vue双向绑定的原理是什么?

3.vue的特点有哪些?和jquery有什么区别?

4.父子组件之间传递数据的方法

5.子组件如何共享数据?

6.一般有什么工具进行数据交互?

7.webpack的原理是什么?

8.简述一下$nextTick的用法

浏览器篇

1.cookie、sessionStorage、localStorage的区别是什么?

2.有用过浏览器缓存吗?简述一下基本的缓存机制

网络篇

1.http和https之间的区别

2.从服务器的安全考虑,是使用get请求还是post请求?

3.URL请求的过程有哪些?

项目经验篇

1.项目中遇到的最大挑战以及解决办法

2.常见的网页优化有哪些?

作为一个面试一年以内工作经验的前端程序员来说,以上的问题能够倒答如流月薪6k应该不成问题啦。这些面试题也是我在很多面试中感觉经常被问到的题目。

希望大家年后找工作能够顺顺利利, 千万不要跟我一样哦,只有帅气就一无所有了。

大家好,我是王我,中国最帅的前端程序员。

前几次都是各种培训公司,各种忽悠就不提了,说说后面4次面试的经历。

第一次是面一个小公司,不过他们好像没有厉害的前端,来面我的是个后端,一来没有问我关于js的知识,直接问我以前做过什么,有没有经验,我本人不会吹牛,简历也没怎么包装,就是自己把自学的知识和做的几个小demo弄在上面,也用github挂在页面上了,不过他根本不点开看,也不问,问我会不会vue,我当时对框架还不了解,他就说他们需要能直接上手开始写的,所以我第一个就直接挂了。

第二次面试是一个国企,这个问了很多问题,都很基础,js数据类型,数组操作,事件,大概就是高程的前面几章看看就差不多都能答到,然后因为他们主要用jq,所以问了很多jq的操作,关于节点的,动画的,我看锋利的jq大概看了3遍,也练过多次,所以我答的很熟。然后问了些布局方面的,bootstrap我了解过,又看过css3,所以这方面也没啥问题,最后在现场做了个题目,主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意,说我jq很熟,一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信,虽然没问技术,但是我没啥自信,把没项目经验什么的也不知怎么就一五一十交代了,估计因为这个挂掉了。

第三次没问问题,直接就是一套题开做,我在那做了一个多小时。题目就是按照要求一步一步做一个页面出来,我也搞忘了我当时卡在哪个地方了,坐在那得时候就是做不出来,没有设计图,要根据他的描述自己找个设计图然后做,我第一次遇到这个有点懵,虽然当时没做出来,不过回来我自己花了几个小时把它做了。所以这个也是凉了。

第四个问的比较多,数据类型,数组操作,跨域,ajax,闭包,原型链,继承,深拷贝,浅拷贝,模块amd cmd,基本都是问的js。然后问了html5的新特性 css3 的新特性,遇到过什么浏览器的兼容性问题,怎么解决的,以后想往什么方面发展。这个时候我已经会点vue了,照着做了个小demo,不过后来知道公司用的angularjs,面试官也没看我做的,问也没问。。以前听网上说要带上自己的项目去面试感觉没起多大效果。

最后总结下如果面的比较初级的岗位,应该主要问js,原型链,继承,闭包,深浅拷贝,ajax,跨域,然后js的基础知识,对了还有apply和call也问了,html5的新特性了解下就行。主要就是看你js掌握的程度,如果稍微要求高一点的,暂时还没面过,等以后面过在来回答

1. cookie session 的用途和区别,以及有效期

1、cookie数据存放在客户的浏览器上,session数据放在服务器上。

2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能

考虑到减轻服务器性能方面,应当使用COOKIE。

4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。

2. vue的数据绑定原理,mvvm与mvc的区别

MVVM:

m:model数据模型层 v:view视图层 vm:ViewModel
vue中采用的是mvvm模式,这是从mvc衍生过来的
MVVM让视图与viewmodel直接的关系特别的紧密,就是为了解决mvc反馈不及时的问题

图片说明一下:


说到MVVM就要说一下双向绑定和数据劫持的原理,

MVC:

m:model数据模型层 v:view视图层 c:controller控制器

原理: c层需要控制model层的数据在view层进行显示

MVC两种方式,图片说明:


总结:

mvvm与mvc最大的区别:
MVVM实现了view与model的自动同步,也就是model属性改变的时候, 我们不需要再自己手动操作dom元素去改变view的显示,而是改变属性后该属性对应的view层会自动改变。

不懂得可以复制链接查看:

https://www.pianshen.com/article/3716256399/

3. storage 的区别 sessionStorage localStorage

localStorage 的生命周期是永久性的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据,使用的方法如上所示。localStorage有length属性


sessionStorage 的生命周期是在浏览器关闭前。也就是说,在整个浏览器未关闭前,其数据一直都是存在的。sessionStorage也有length属性,其基本的判断和使用方法和localStorage的使用是一致的


4.v-model双向数据原理

有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性
传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性
但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值
所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可

【数据为尊 ----数据映射到浏览器 如果数据v-model后修改(肯定input)然后到数据在有数据映射到浏览器页面 ----映射关系统称】



5.keepAlive用过吗?什么作用?

缓存路由组件


使用的是vue的一个组件,参考vue的官方文档

使用这个东西可以保证我们在切换组件的时候,原来显示的组件不被销毁

-----【保障组件的数据不会被切换路由而销毁数据】

Home是对应的组件对象的名字,不是路由的名字

6.多维数组拍平

数组拍平也称数组扁平化,就是将数组里面的数组打开,最后合并为一个数组

一红六种方法吧……

了解的请看: https://www.cnblogs.com/guan-shan/p/10165737.html

7.跨域的原因 解决方案

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。

这样就可以说同源策略----协议---端口---域名

原生的src和href可以解决跨域

代理可以解决

请求头也可以携带浏览器提示的也可以解决

一般都是后端解决跨域问题

【别的需要了解看下方链接】

https://blog.csdn.net/qq_41604383/article/details/100770100

8.uniApp兼容问题

§ 如果你使用cli创建项目(即项目根目录是package.json),不管用什么ide,即便是用HBuilderX,切记cli项目的编译器是在项目下的,HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。以及如果你想要安装less、scss等预编译器,也需要自己npm安装在项目下,而不是在HBuilderX的插件管理里安装。

§ 如果你使用离线打包,请注意HBuilderX升级后,真机运行基座和云打包对应引擎跟随HBuilderX升级,而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。

§ 如果你使用自定义基座,之前制作的自定义基座是不会跟随HBuilderX升级的,升级HBuilderX后你应该重新制作新版自定义基座。

§ 如果你使用wgt升级,新版HBuilderX编译的wgt,运行到之前的runtime上,一定要先测试好,看有没有兼容性问题。如果有问题,就不要wgt升级,整包升级。

§ 考虑到向下兼容,uni-app编译器在升级为新的自定义组件模式后,同时保留了对老编译模式的向下兼容。
在HBuilderX alpha版中,App端一定会使用新编译器,不理会manifest配置。
在HBuilderX 正式版中,新创建的项目会使用新编译器,老项目不会强制使用,而是开发者自己在manifest里配置开启。

§ 如果你使用其他ide开发uni-app,会经常因为拼错单词而运行失败,因为经过webpack编译一道,很多错误反应的不够直观,排错时间很长,不如从开始就依赖有良好提示的HBuilderX,避免敲错单词。

§ 云打包的引擎版本说明
HBuilderX Alpha,只有1套云打包机,不管你的HBuilderX alpha版本多少,对应的打包机一定是最新的alpha版的客户端引擎。
HBuilderX正式版,有2套打包机,一个是最新正式版,一个是次新正式版。
中间的紧急更新版本没有独立打包机。
举个例子:
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。
那么当前可用的打包机有1.9.1和1.8.2这2台。(即每个大版本的最后一个版本)
除了这2个HBuilderX版本外,其他版本的云打包都指向最新的1.9.1版对应的打包机。(即只保留2个大版本的云打包机)

【详情请看】

https://ask.dcloud.net.cn/article/35845

一、HTML

HTML书写规范

H5新增标签

HTML渲染过程

二、CSS

css盒子模型概念

css弹性布局概念

三、JavaScript

事件模型

DOM2级事件模型

闭包

原型链

四、移动Web开发

常见的布局方案

移动端前端常见的触摸相关事件touch、tap、swipe等整理

移动端前端手势事件

移动端页面渲染优化

GPU渲染

GPU核心渲染过程

五、调试

常用的调试工具

Chrome控制台调试js使用

移动端测试

六、HTTP网络知识

常见的HTTP状态码

不同请求类型的区别

WEB缓存方案

——————————

牛客网(www.nowcoder.com)

- 专业IT笔试面试备考平台

- 最全C++JAVA前端等互联网技术求职题库

- 全面提升IT编程能力

- 程序员交友圣地

分享了一些Web前端的面试题,限时一小时,你看看自己能够答出多少道!

放心,这些面试题都是一些非常基础的知识,只要你在平时认真听课、学习了,那么这些面试题肯定不会难道你。

建议:虽然没有人监督你,但还是希望你不要去寻找答案,脱离网络,拿起纸笔,你试一下自己究竟能够答出个什么水平!有没有真本领?答案尽在这些面试题里!那么,你准备好了吗?OK!计时开始!

一、HTML常见题目

01、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

02、HTML5为什么只需要写?

03、行内元素有哪些?块级元素有哪些?空(void)元素有那些?

04、页面导入样式时,使用link和@import有什么区别?

05、介绍一下你对浏览器内核的理解?

06、常见的浏览器内核有哪些?

07、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?

08、如何区分HTML和HTML5?

09、简述一下你对HTML语义化的理解?

10、HTML5的离线储存怎么使用,工作原理能不能解释一下?

二、CSS类的题目

01、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

02、CSS选择符有哪些?哪些属性可以继承?

03、CSS优先级算法如何计算?

04、CSS3新增伪类有那些?

05、如何居中p?如何居中一个浮动元素?如何让绝对定位的p居中?

06、display有哪些值?说明他们的作用。

07、position的值relative和absolute定位原点是?

08、CSS3有哪些新特性?

09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?

10、用纯CSS创建一个三角形的原理是什么?

三、Java类的题目

01、介绍Java的基本数据类型。

02、说说写Java的基本规范?

03、Java原型,原型链?有什么特点?

04、Java有几种类型的值?(堆:原始数据类型和栈:引用数据类型),你能画一下他们的内存图吗?

05、Java如何实现继承?

06、Java创建对象的几种方式?

07、Java作用链域?

08、谈谈This对象的理解。

09、eval是做什么的?

10、什么是window对象?什么是document对象?

OK,一小时到了,这个时间可不算短了,那么这些面试题你答出了几道呢?你写的答案正确了吗?现在你可以去翻看答案了。

如果你答出了绝大多数的或者是全部的题,并且答案也正确了,那么恭喜你……

你这时心里是不是有点小窃喜,认为自己有能力拿高薪了?虽然我也很想这么告诉你,但事实上这只能表明你的基础扎实,毕竟这只是一些非常基础的面试题。骚年~继续努力吧!

如果你只答出了小部分或者答出了大部分题但答案不正确,那么我只想说:“骚年,你的水平还差的远呢。”连这么基础的题你都打不出来,还想拿高薪?回去再练一段时间吧!

扎实的基础是你拿高薪的重要武器,如果你连基础都不扎实,那么想要攻克“高薪”这个厚实的堡垒,那只是痴人说梦罢了。

1.前端框架类问题,问你会不会用vue react啊

2.语言类,问你一些JavaScript语言的问题

3.项目经验,让你讲讲做过的项目,遇到的问题和解决之道

4. 史上最全前端vue面试题!推荐收藏

1.为什么会形成跨域?

不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。

解决方法:安装插件

Pip install django-cors-headers


2.vuex的工作流程?

① 在vue组件里面,通过dispatch来出发actions提交修改数据的操作。

② 然后再通过actions的commit来出发mutations来修改数据。

③ mutations接收到commit的请求,就会自动通过Mutate来修改state(数据中心里面的数据状态)里面的数据。

④ 最后由store触发每一个调用它的组件更新。


3.vuex是什么?怎么使用?

vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,moles详细使用写法请见:https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502


4.vuex中的数据在页面刷新后数据消失怎么解决?

使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件


5.在vue中,如何阻止事件冒泡和默认行为?

在绑定事件时,在指令后边加上修饰符.stop来阻止冒泡,.prevent来阻止默认行为
6.深拷贝与浅拷贝?

假设B复制A,修改A的时候,看B是否变化:B变了是浅拷贝(修改堆内存中的同一个值),没变是深拷贝(修改堆内存中不同的值)。浅拷贝只是增加了一个指针指向已存在的内存地址,深拷贝是增加了一个指针并申请了一个新的内存,使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。
7.vue的生命周期?

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived (keep-alive)组件是否激活调用

8. keep-alive: 组件缓存
https://juejin.cn/post/6844903624099758094

router.js中:
meta: {keepAlive:true} // 需要被缓存
钩子执行顺序:created -> mounted -> actived
include表示需要缓存的页面;exclude表示不需要缓存的页面。如果两个同时设置,exclude优先级更 改,则组件不会被缓存。
应用场景: 用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回 该列表页,我们希望列表页可以保留用户的筛选状态。

9.vue传值方式?
props $emit() $on() $parent $children $listener $attr

10. $on 兄弟组件传值

$emit 分发
$on 监听
$off 取消监听
$once 一次性监听一个事件
在js文件中定义一个中央事件总线Bus,并暴露出来
具体的实现方式:

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus,否则会一直叠加调用这个方法。
应用场景:“退出登录” -> ①点击退出登录;②修改密码后自动退出登录

11.组件跨级传值
$attrs a->b->c
$listeners 监听

12.vue事件修饰符有哪些?
.stop .prevent .self .once .passive .sync

13.箭头函数中的this?
不具有this绑定,但函数体可以使用this,这个this指向的是箭头函数当前所处的词法环境中的this对象。

15.为什么vue组件中data必须是一个函数?
如果不是函数的话,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了,当他是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,就不会互相影响。

16.v-if 和 v-show区别?
v-if 是对标签的创建与销毁, v-show 则仅在初始化时加载一次,v-if 开销相对来说比v-show 大;
v-if 是惰性的;v-show 做的仅是简单的css切换。

17.v-text 与 v-html区别?
v-text 用于普通文本,不能解析html;
v-html 反之。

18.v-for key的作用?
使用v-for更新渲染过的数据,它默认用“就地复用”策略。如果数据项的顺序改变,vue将不是移动DOM元素来匹配数据项的改变,而是简单地复用此处每个元素,并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。
key的特殊属性主要用在虚拟DOM算法,在新旧node对比时辨识VNods。如不使用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法,它会基于key的变化重新排列元素顺序。

19.Scss是什么?在vue-cli中安装步骤?有哪几大特性?
npm 下载loader (sass-loader,css-loader,node-sass),在webpack中配置extends属性(加.scss拓展) Vscode中可在扩展中下载;
特性:可以用变量,可以用混合器,可以嵌套等。

20.vue获取dom?
ref

21.vue初始化页面闪动问题?
webpack、vue-router
v-cloak css:[v-cloak]:display:none

22.什么是vue-router?
vue router 是官方路由管理器。
主要功能:路由嵌套,模块化 基于组件路由配置,路由参数、查询、通配符,细粒度导航控制,自定义的滚动条行为等。

23.vue路由传参,接收?
传: this.$router.push({path:'', query(params):{}})
接:this.$router.query.xxx

24.防抖和节流?
节流是一定时间内执行一次函数,多用在scroll事件上;
防抖是在一定时间内执行最后一次的函数,多用在input输入操作,表单提交等。

25.如何让scss只在当前组件中起作用?

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

作为一名HTML5前端工程师,为了工作,为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项:

第一:注意自己的仪容仪表

面试之前,一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括,自己的牙缝是不是还有食物残渣,所以你需要就近找一个卫生间,如果没有卫生间就近找一个角落也是可以的,但是切记一定不要在大庭广众之下。因此,为了给自己整理出着装的时间请在约定时间前20分钟到达。

第二:再次检查面试时所需的资料是否都已带全

这些资料主要包括:身份证明、学历文凭证明、个人简历、以往作品等等,如果这些东西齐全之后,需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他,让他自己再一页一页的翻找自己需要的内容,如果说这些资料在面试官手中不小心散落一地,结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全,也不要紧张。反而你要庆幸幸亏及时检查,也有足够的时间组织语言去向面试官解释。

第三:面试之前将通信工具调成振动或关闭状态

虽然说面试者与面试官之间是一个平等的关系,但毕竟你是去人家公司求职的,始终处于一个被动的状态,所以最起码的尊重还是要做到的。曾经有调查显示,对于面试过程中接电话或是被电话打断的求职者,会被HR减分。

第四:等候面试官时,仔细观察多了解面试公司

在等候面试官时,可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等,一来可以在接下来的面试过程中表现出自己对公司的认同感,二来也可以让自己对求职公司多些了解,以确定是否要接受这里的工作。如果你身边有公司的资料宣传架,不妨取一本翻看一下,也会增加HR对你的好感。

第五:放松心情,保持自信

面试时一定要保持一定的自信,这样也会给面试官留下很好的印象。面试只是你步入工作的第一步,即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。

作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了,像以上五点细节性的东西也是一定要掌握的。

面试题系列:

网页链接

6. 前端面试项目会给图片吗

前端面试项目会给图片吗
全部
资讯
视频
文档
图片
一文分析前端面试中的图片懒加载问题,快来看看吧~
最近整理了一些前端高频面试题,分享给大家,如有问题欢迎留言指正,面试专栏我会长期更新,欢迎大家点赞、收藏,感谢!1.什么是_DOCTYPE_,有何作用?Doctype 是HTML5的文档声明,通过它可以...
百家号2022-11-28
前端实习生去面试需要什么作品-芝士回答
3.证明对新技术探索能力的,github里边应该有几个现有热门技术的项目。表示在寻找新技术解决方案的路上,一直保持着一颗敬畏之心,一颗虔诚的心,时刻保持学习或了解新事物的态度或激情。上个成...
芝士回答2021-03-25
初级前端面试需要带什么作品?芝士回答
我建议最后去找电商项目,电商项目中的前端特效要求的比较高,如果电商的可以消化,那么面试就不再是问题了;2、对于已经工作了一段时间的前端开发工程师来说,最好的就是将自己在工作中做过的...
芝士回答2021-01-09
其他人还搜了
前端面试项目素材
前端面试项目描述
面试介绍电商网站前端项目
前端面试问项目遇到的问题
前端面试开源项目
前端面试官要看上线项目怎么办
前端工作面试注意事项
作为一名HTML5前端工程师,为了工作,为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项: 第一:注意自己的仪容仪表 面试之前,一定要再次从头到脚地将自己的仪容仪表检查...
芝士回答
初级前端面试需要带什么作品?
回答:26浏览:24万+赞同:34
[最佳答案]千言万语浓缩成了一行URL。
知乎2016-03-27
【前端+面试问题|前端+面试技巧】看准网
面试的前端开发·北京 面试未通过 阿里影业一面 面试过程很愉快,面试官交流起来很舒服,下面的图片里是我记录的面试中的问题并附上答案,仅供参考。贡献于 2022-05-20 3 匿名用户 面试的前端...
看准网2022-05-20
前端应届生面试经验_韩哥、最强操盘手的博客-CSDN博客_前端应届生
2 年之内的小伙伴,大家酌情阅读~(更新:最后的面试题只是自己总结的一些偏基础的知识~刚毕业的小伙伴看着也不要有什么压力,不是代表初级前端必须掌握的技能,只是总结出前端面试中比较常见的...
CSDN技术社区2021-11-18
前端面试(1)—准备_乐夫天命兮的博客-CSDN博客_前端面试准备
每轮面试在一小时左右。概念:职位描述:注重的是工作职责。任职要求:要求的是工作能力。通常描述得很细致。PS:前端的知识庞大,不可能所有的内容都准备好,但是要向“任职要求”靠拢。分析...
CSDN技术社区
【前端开发/web前端设计面试|前端开发/web前端设计面试技巧】看准网
面试过程很愉快,面试官交流起来很舒服,下面的图片里是我记录的面试中的问题并附上答案,仅供参考。有用(3)|评论(0)|你还记得你曾经的面试情景吗?分享一条你的面试经历吧,...
看准网2022-06-11
web前端开发面试流程是怎样的?网络知道
回答:2
首先投简历,等待面试通知。第一次面试填资料,做测试题;等一面通过之后接着二面,二面一般是技术面试,有些公司是通过之后直接进行3面有些是改天再进行3面,3面一般就是项目经理或总经理问你一-些各种各样的问题,如果3面都过了,基本上就是面试成功了。但是不同公司的面试流程也不相同。...
网络知道2022-06-10
相关搜索
前端面试项目
前端面试题库
前端面试自我介绍
前端面试视频教程
前端面试题目
面试图片
前端性能优化面试
前端面试宝典
快速搞定前端面试
前端面试问项目中遇到的难题
11-20条

【截图】常见前端面试题_mus_木司的博客-CSDN博客
3.一道面向对象面试题 4.EventLoop 同步异步、宏任务微任务 5.使下面输出1 var a={ toString=function*(){ yield 1;yield 2;yield 3;} } a.toString 会转换,规则: 对象=字符串 对象.toString ...
CSDN技术社区2020-06-02
前端面试
前端面试自我介绍背景:1 面试官在你自我介绍的时候,才有时间看你的简历。人太多没时间看,看了也记不住。2 你在自我介绍中,他在想问你什么问题。3 了解你语言表达能力,自信气场,仪表形态。...
www.lwlwlw.com2017-07-04
前端面试作品-芝士回答
我建议最后去找电商项目,电商项目中的前端特效要求的比较高,如果电商的可以消化,那么面试就不再是问题了;2、对于已经工作了一段时间的前端开发工程师来说,最好的就是将自己在工作中做过的...
芝士回答2021-01-09
web前端经典面试题_约德尔蒙的博客-CSDN博客_前端面试题
阅读:8w+
web前端面试题 其他问题 1、请谈谈你对性能优化的认识?网页内容 减少http请求次数 80%的响应时间花在下载网页内容(images,stylesheets,javascripts,scripts,flash等)。减少请求次数是缩短响应...
CSDN技术社区
前端面试-项目流程_前端小兔子的博客-CSDN博客_前端面试流程
1、项目流程 (1)项目分多人、多角色参与 (2)项目分多阶段 (3)项目需要计划和执行 2、项目角色 (1)PM 产品经理 (2)UE 视觉设计师 (3)FE 前端开发 (4)RD 后端开发 (5)CRD 移动端...
CSDN技术社区2020-03-18
关于前端面试的十问十答(并附知识点思维导图)知乎
6.29 双越老师 在慕课网直播讲解了关于前端面试的一些技巧和经验,以下是同学的一些问题反馈和老师的解答 1、问题描述: 老师你好,我是计算机专业大二在校生,想了解前端需要重点掌握哪些算法呢...
知乎2019-07-04
Web前端初学者(应届生)面试攻略-知了乐了-博客园
前端技术日新月异,面试也有了不同的要求,各种框架层出不穷,到了你们那一年前端发展到了什么地步没有人知道,牢记法则,以不变应万变,绝对ok。明确一点,自己想去那种公司,大公司注重基础,...
博客园2018-02-26
前端面试(三)简书
前端面试(三) 一、图片整合 用background-position来实现背景图片的定位技术,又称为css精灵图。用法: 将一些小图片有规则的合成一张图片,即多张图片合为一张整图,再使用background-...
简书2019-10-20
前端面试要求-洺剑残虹-博客园
前端面试所遇到的技术点: HTML的问题 (1)行标签和块级标签分别有哪些?(2)常见HTML5的标签有哪些?(3)怎么页面结构会比较好?(4)如何减少HTTP请求和优化?减少请求的资源,将多个CSS资源打包到...
博客园2018-09-08
前端工程师面试汇总_尊哥的博客-CSDN博客_前端工程师面试
一、前端基础 1、HTTP,HTML,浏览器 说一下http和https tcp三次握手,一句话概括 TCP和UDP的区别 WebSocket的实现和应用 一个图片url访问后直接下载怎样实现?说一下web Quality(无障碍)几个很...
CSDN技术社区2020-01-28
相关搜索
前端面试项目
前端面试如何介绍自己的项目
前端面试
web前端面试
js前端面试
前端面试问题
2019前端面试
前端面试题库
前端电话面试
前端面试自我介绍
21-30条

前端面试-网络贴吧
小伙伴们,有很多小伙伴刚学完前端,想找一份好一点的公司去应聘,但是公司的面试又成了一大难题,今天我整理了一些关于web前端面试的试题,帮助大家可以更好的完成面试,早日找到工作。由于...
网络贴吧2020-01-25
前端面试流程_网络文库
前端面试流程 By漆黑小T 前面5个题,有两个答不出来就可以pass 遇到面试者反问,以时间有限为由,让其自行网络,面试印象减分 1、css问题,水平、垂直居中的写法,请至少写出4种?水平居中 行内...
网络文库
前端面试技巧-网络经验
前端面试技巧,马上就要进入前端面试的朋友们,对于前端面试的技巧还是比较模糊的,那么前端面试技巧都有哪些呢?
网络经验2019-12-03
前端面试到底要做到哪些?知乎
准备面试的时候,可以按照以下几个模块来准备: 无论前端技术栈日新月异,我们都得要扎实基础,脚踏实地,切记不可投机取巧、眼高手低。2.1 JavaScript 基础 JavaScript 基础非常重要,相比于...
知乎2021-07-29
常见的前端开发面试题(附答案)DreamTraveler-博客园
2.谈谈你对前端性能优化的理解 a.请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域 b.请求带宽:开启GZip,精简JavaScript,移除重复脚本,图像优化,将icon做成字体 c.缓存...
博客园2020-04-28
前端面试流程-漆黑小T-博客园
前端面试流程 By漆黑小T 前面5个题,有两个答不出来就可以pass 遇到面试者反问,以时间有限为由,让其自行网络,面试印象减分 1、css问题,水平、垂直居中的写法,请至少写出4种?水平居中 行内...
博客园2021-01-27
前端面试流程图-CSDN
csdn已为您找到关于前端面试流程图相关内容,包含前端面试流程图相关文档代码介绍、相关教程视频课程,以及相关前端面试流程图问答内容。为您解决当下相关问题,如果想了解更详细前端面试流程图...
CSDN技术社区2021-06-10
前端面试篇,应届生面试时被问项目经验不用慌,按这个步骤回答成功率高达95%_码民的飘柔的博客-CSDN博客
为了让大家在收到一家公司前端面试邀请之后,准备得更加充足,这里准备了一些高频和基础的前端面试题,希望可以帮助大家更加顺利完成求职,得到自己满意的offer。最全前端面试真题汇总 CSS面试...
CSDN技术社区2021-05-14
关于前端面试的注意事项-简书
前端现在越来越多人,那么面试的时候要注意哪些问题呢?1.简历一定要写的完善,多一些数据性的东西,项目业绩啊,项目效果之类的一定要写的好一点,这样面试官看到才能感觉到真实。2.简历上的...
简书2020-05-06
常见的前端开发面试题(附答案)
2.谈谈你对前端性能优化的理解 a.请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域 b.请求带宽:开启GZip,精简JavaScript,移除重复脚本,图像优化,将icon做成字体 c.缓存...
百家号2019-02-01
相关搜索
前端面试项目
前端面试如何介绍自己的项目
前端面试
web前端面试
js前端面试
前端面试问题
2019前端面试
前端面试题库
前端电话面试
前端面试自我介绍
31-40条

常见前端面试题及答案_冷小鱼的博客-CSDN博客_前端面试题
本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典、很有代表性。上面没有答案,我就整理了一下,从网上找了一些相关问题的答案。里面有一部分问题的答案我也没有...
CSDN技术社区2019-02-15
前端工作面试问题-前端开发博客
这段事件一直在整理有关前端的面试题目,整理这也题目,不只是为了能够学习应付即将到来的面试,更是为了补补基础知识。日常项目开发进度太快了,很多属性或者方法用了就忘,这样会造成另外一个...
m.caibaojian.com2017-04-06
前端面试之前要准备的那些事-祈澈姑娘-博客园
现在前端虽火但工作不好找,因为一些外力因素所导致,北上广这些大城市的招聘都是三年的工作经验起的。关于怎么写工作经验和工作项目,后续的文章里面会有更多的干货和经验。问题四,简历上常见...
博客园2017-10-26
如何面试前端工程师?
评论:1
近来几个月,一直在努力寻找前端战友,未果,一路的招聘经历下来,心生不少感慨,一直都很小心翼翼前端面试项目会给图片吗前端面试项目会给图片吗
全部
资讯
视频
文档
图片
一文分析前端面试中的图片懒加载问题,快来看看吧~
最近整理了一些前端高频面试题,分享给大家,如有问题欢迎留言指正,面试专栏我会长期更新,欢迎大家点赞、收藏,感谢!1.什么是_DOCTYPE_,有何作用?Doctype 是HTML5的文档声明,通过它可以...
百家号2022-11-28
前端实习生去面试需要什么作品-芝士回答
3.证明对新技术探索能力的,github里边应该有几个现有热门技术的项目。表示在寻找新技术解决方案的路上,一直保持着一颗敬畏之心,一颗虔诚的心,时刻保持学习或了解新事物的态度或激情。上个成...
芝士回答2021-03-25
初级前端面试需要带什么作品?芝士回答
我建议最后去找电商项目,电商项目中的前端特效要求的比较高,如果电商的可以消化,那么面试就不再是问题了;2、对于已经工作了一段时间的前端开发工程师来说,最好的就是将自己在工作中做过的...
芝士回答2021-01-09
其他人还搜了
前端面试项目素材
前端面试项目描述
面试介绍电商网站前端项目
前端面试问项目遇到的问题
前端面试开源项目
前端面试官要看上线项目怎么办
前端工作面试注意事项
作为一名HTML5前端工程师,为了工作,为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项: 第一:注意自己的仪容仪表 面试之前,一定要再次从头到脚地将自己的仪容仪表检查...
芝士回答
初级前端面试需要带什么作品?
回答:26浏览:24万+赞同:34
[最佳答案]千言万语浓缩成了一行URL。
知乎2016-03-27
【前端+面试问题|前端+面试技巧】看准网
面试的前端开发·北京 面试未通过 阿里影业一面 面试过程很愉快,面试官交流起来很舒服,下面的图片里是我记录的面试中的问题并附上答案,仅供参考。贡献于 2022-05-20 3 匿名用户 面试的前端...
看准网2022-05-20
前端应届生面试经验_韩哥、最强操盘手的博客-CSDN博客_前端应届生
2 年之内的小伙伴,大家酌情阅读~(更新:最后的面试题只是自己总结的一些偏基础的知识~刚毕业的小伙伴看着也不要有什么压力,不是代表初级前端必须掌握的技能,只是总结出前端面试中比较常见的...
CSDN技术社区2021-11-18
前端面试(1)—准备_乐夫天命兮的博客-CSDN博客_前端面试准备
每轮面试在一小时左右。概念:职位描述:注重的是工作职责。任职要求:要求的是工作能力。通常描述得很细致。PS:前端的知识庞大,不可能所有的内容都准备好,但是要向“任职要求”靠拢。分析...
CSDN技术社区
【前端开发/web前端设计面试|前端开发/web前端设计面试技巧】看准网
面试过程很愉快,面试官交流起来很舒服,下面的图片里是我记录的面试中的问题并附上答案,仅供参考。有用(3)|评论(0)|你还记得你曾经的面试情景吗?分享一条你的面试经历吧,...
看准网2022-06-11
web前端开发面试流程是怎样的?网络知道
回答:2
首先投简历,等待面试通知。第一次面试填资料,做测试题;等一面通过之后接着二面,二面一般是技术面试,有些公司是通过之后直接进行3面有些是改天再进行3面,3面一般就是项目经理或总经理问你一-些各种各样的问题,如果3面都过了,基本上就是面试成功了。但是不同公司的面试流程也不相同。...
网络知道2022-06-10
相关搜索
前端面试项目
前端面试题库
前端面试自我介绍
前端面试视频教程
前端面试题目
面试图片
前端性能优化面试
前端面试宝典
快速搞定前端面试
前端面试问项目中遇到的难题
11-20条

【截图】常见前端面试题_mus_木司的博客-CSDN博客
3.一道面向对象面试题 4.EventLoop 同步异步、宏任务微任务 5.使下面输出1 var a={ toString=function*(){ yield 1;yield 2;yield 3;} } a.toString 会转换,规则: 对象=字符串 对象.toString ...
CSDN技术社区2020-06-02
前端面试
前端面试自我介绍背景:1 面试官在你自我介绍的时候,才有时间看你的简历。人太多没时间看,看了也记不住。2 你在自我介绍中,他在想问你什么问题。3 了解你语言表达能力,自信气场,仪表形态。...
www.lwlwlw.com2017-07-04
前端面试作品-芝士回答
我建议最后去找电商项目,电商项目中的前端特效要求的比较高,如果电商的可以消化,那么面试就不再是问题了;2、对于已经工作了一段时间的前端开发工程师来说,最好的就是将自己在工作中做过的...
芝士回答2021-01-09
web前端经典面试题_约德尔蒙的博客-CSDN博客_前端面试题
阅读:8w+
web前端面试题 其他问题 1、请谈谈你对性能优化的认识?网页内容 减少http请求次数 80%的响应时间花在下载网页内容(images,stylesheets,javascripts,scripts,flash等)。减少请求次数是缩短响应...
CSDN技术社区
前端面试-项目流程_前端小兔子的博客-CSDN博客_前端面试流程
1、项目流程 (1)项目分多人、多角色参与 (2)项目分多阶段 (3)项目需要计划和执行 2、项目角色 (1)PM 产品经理 (2)UE 视觉设计师 (3)FE 前端开发 (4)RD 后端开发 (5)CRD 移动端...
CSDN技术社区2020-03-18
关于前端面试的十问十答(并附知识点思维导图)知乎
6.29 双越老师 在慕课网直播讲解了关于前端面试的一些技巧和经验,以下是同学的一些问题反馈和老师的解答 1、问题描述: 老师你好,我是计算机专业大二在校生,想了解前端需要重点掌握哪些算法呢...
知乎2019-07-04
Web前端初学者(应届生)面试攻略-知了乐了-博客园
前端技术日新月异,面试也有了不同的要求,各种框架层出不穷,到了你们那一年前端发展到了什么地步没有人知道,牢记法则,以不变应万变,绝对ok。明确一点,自己想去那种公司,大公司注重基础,...
博客园2018-02-26
前端面试(三)简书
前端面试(三) 一、图片整合 用background-position来实现背景图片的定位技术,又称为css精灵图。用法: 将一些小图片有规则的合成一张图片,即多张图片合为一张整图,再使用background-...
简书2019-10-20
前端面试要求-洺剑残虹-博客园
前端面试所遇到的技术点: HTML的问题 (1)行标签和块级标签分别有哪些?(2)常见HTML5的标签有哪些?(3)怎么页面结构会比较好?(4)如何减少HTTP请求和优化?减少请求的资源,将多个CSS资源打包到...
博客园2018-09-08
前端工程师面试汇总_尊哥的博客-CSDN博客_前端工程师面试
一、前端基础 1、HTTP,HTML,浏览器 说一下http和https tcp三次握手,一句话概括 TCP和UDP的区别 WebSocket的实现和应用 一个图片url访问后直接下载怎样实现?说一下web Quality(无障碍)几个很...
CSDN技术社区2020-01-28
相关搜索
前端面试项目
前端面试如何介绍自己的项目
前端面试
web前端面试
js前端面试
前端面试问题
2019前端面试
前端面试题库
前端电话面试
前端面试自我介绍
21-30条

前端面试-网络贴吧
小伙伴们,有很多小伙伴刚学完前端,想找一份好一点的公司去应聘,但是公司的面试又成了一大难题,今天我整理了一些关于web前端面试的试题,帮助大家可以更好的完成面试,早日找到工作。由于...
网络贴吧2020-01-25
前端面试流程_网络文库
前端面试流程 By漆黑小T 前面5个题,有两个答不出来就可以pass 遇到面试者反问,以时间有限为由,让其自行网络,面试印象减分 1、css问题,水平、垂直居中的写法,请至少写出4种?水平居中 行内...
网络文库
前端面试技巧-网络经验
前端面试技巧,马上就要进入前端面试的朋友们,对于前端面试的技巧还是比较模糊的,那么前端面试技巧都有哪些呢?
网络经验2019-12-03
前端面试到底要做到哪些?知乎
准备面试的时候,可以按照以下几个模块来准备: 无论前端技术栈日新月异,我们都得要扎实基础,脚踏实地,切记不可投机取巧、眼高手低。2.1 JavaScript 基础 JavaScript 基础非常重要,相比于...
知乎2021-07-29
常见的前端开发面试题(附答案)DreamTraveler-博客园
2.谈谈你对前端性能优化的理解 a.请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域 b.请求带宽:开启GZip,精简JavaScript,移除重复脚本,图像优化,将icon做成字体 c.缓存...
博客园2020-04-28
前端面试流程-漆黑小T-博客园
前端面试流程 By漆黑小T 前面5个题,有两个答不出来就可以pass 遇到面试者反问,以时间有限为由,让其自行网络,面试印象减分 1、css问题,水平、垂直居中的写法,请至少写出4种?水平居中 行内...
博客园2021-01-27
前端面试流程图-CSDN
csdn已为您找到关于前端面试流程图相关内容,包含前端面试流程图相关文档代码介绍、相关教程视频课程,以及相关前端面试流程图问答内容。为您解决当下相关问题,如果想了解更详细前端面试流程图...
CSDN技术社区2021-06-10
前端面试篇,应届生面试时被问项目经验不用慌,按这个步骤回答成功率高达95%_码民的飘柔的博客-CSDN博客
为了让大家在收到一家公司前端面试邀请之后,准备得更加充足,这里准备了一些高频和基础的前端面试题,希望可以帮助大家更加顺利完成求职,得到自己满意的offer。最全前端面试真题汇总 CSS面试...
CSDN技术社区2021-05-14
关于前端面试的注意事项-简书
前端现在越来越多人,那么面试的时候要注意哪些问题呢?1.简历一定要写的完善,多一些数据性的东西,项目业绩啊,项目效果之类的一定要写的好一点,这样面试官看到才能感觉到真实。2.简历上的...
简书2020-05-06
常见的前端开发面试题(附答案)
2.谈谈你对前端性能优化的理解 a.请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域 b.请求带宽:开启GZip,精简JavaScript,移除重复脚本,图像优化,将icon做成字体 c.缓存...
百家号2019-02-01
相关搜索
前端面试项目
前端面试如何介绍自己的项目
前端面试
web前端面试
js前端面试
前端面试问题
2019前端面试
前端面试题库
前端电话面试
前端面试自我介绍
31-40条

常见前端面试题及答案_冷小鱼的博客-CSDN博客_前端面试题
本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典、很有代表性。上面没有答案,我就整理了一下,从网上找了一些相关问题的答案。里面有一部分问题的答案我也没有...
CSDN技术社区2019-02-15
前端工作面试问题-前端开发博客
这段事件一直在整理有关前端的面试题目,整理这也题目,不只是为了能够学习应付即将到来的面试,更是为了补补基础知识。日常项目开发进度太快了,很多属性或者方法用了就忘,这样会造成另外一个...
m.caibaojian.com2017-04-06
前端面试之前要准备的那些事-祈澈姑娘-博客园
现在前端虽火但工作不好找,因为一些外力因素所导致,北上广这些大城市的招聘都是三年的工作经验起的。关于怎么写工作经验和工作项目,后续的文章里面会有更多的干货和经验。问题四,简历上常见...
博客园2017-10-26
如何面试前端工程师?
评论:1
近来几个月,一直在努力寻找前端战友,未果,一路的招聘经历下来,心生不少感慨,一直都很小心翼翼前端面试项目会给图片吗

7. 前端面试题(十五)

已知高度和宽度的元素:

设置父元素为相对定位relative,给子元素设置绝对定位absoluted,top: 0; right: 0; bottom: 0; left: 0; margin: auto;

设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

未知高度和宽度的元素:

设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translate(-50%,-50%);

设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform:translate(-50%,-50%);

组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data ,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data ,就会造成一个变了全都会变的结果。

for of:

支持 return ,并且是值 of 数组(不能遍历对象)
1. 可以避免所有 for-in 循环的陷阱
2. 不同于 forEach(),可以使用 break, continue 和 return
3. for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
4. 它也支持字符串的遍历
5. for-of 并不适用于处理原有的原生对象

for in:

forEach:

assets文件夹里是静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件

在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。

生命周期函数: activated( 组件激活时调用 )、deactivated( 组件停用时调用

常见的使用场景可以分为三类:

当频繁执行条件时,不适合使用 v-if ,用 v-show ;
反之执行条件的次数很少,使用 v-if 即可。

v-if 和 v-for ,不推荐两者一起使用在同一个元素上,虽然也能运行,但是编辑器会报警告;两者一起使用时,v-for比v-if具有更高的优先级,

8. 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、接口路径,给一个地址 http://localhost/projectname/resource/index(http://localhost/projectname/resource/index).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了解吗;

9. web前端开发面试流程是怎样的

首先投简历,等待hr通知面试,一般情况下先填资料,做测试题,接着开始第一面(一般问经你的个人情况,工作经历等),资料已经交给技术,等一面通过之后接着二面,二面一般是技术面试,问你开发相关的技术问题(例如布局问题,js,框架之类的),有些公司还需要上机操作(写一两个页面或者开发一个js方法等),有些公司是通过之后直接进行3面有些是改天再进行3面,3面一般就是项目经理或总经理问你一些各种各样的问题(随机应变就行,也有一些公司没有这个环节),如果3面都过了,基本上就是面试成功了,接下来就是4面,也就是人事主管和你谈工资待遇等问题了,这个谈好之后就会告诉你什么时候过来上班,要准备什么东西,当然一般还会有正式的工作邀请函发到你的邮箱。如果没有3面的公司,那人事这个环节就直接是3面了。
还有一些公司是一面之后等通知,通过的就通知你二面,然后再等通知,然后通过再三面(这样的公司我一般不会等,太浪费时间)