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

前端面试问什么问题

发布时间: 2023-07-01 03:55:34

1. 前端面试一般问什么

web前端面试会问人事方面的内容和web前端技术的内容;

人事的面试

web前端人事面试方面,需要注意如何自我介绍、性格有哪些优劣势、职业规划方向是什么、你的特长是什么、对于加班之类你是怎么看待等人事面试内容;

web前端技术的面试

技术面试,需要注意HTML+CSS+JavaScript以及JS主流框架的使用,比如Vue、React等,前端相关技术,比如tcp握手协议、网络安全、后端技术等;

对于web前端面试准备,建议你去看“决胜前端”(min app),它里面包含了很多web前端技术面试、人事面试等面试真题,而且针对面试题做了详细的分析与解答。

我给你截图看一下例子吧

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

大家好,我是王我。

随着春节的结束,各个行业也普遍开始了上班的节奏, 不过本人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.项目经验,让你讲讲做过的项目,遇到的问题和解决之道

3. 常见的web前端面试题及答案分享

1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)


答:行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。兼容性:display:inline-block;*display:inline;*zoom:1。



2、box-sizing常用的属性有哪些?分别有什么作用?


答:box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。


border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。


3、Doctype作用?标准模式与兼容模式各有什么区别?


答:告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。


标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。


4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?


答:HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。


(1)绘画 canvas;


(2)用于媒介回放的 video 和 audio 元素;


(3)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;


(4)sessionStorage 的数据在浏览器关闭后自动删除;


(5)语意化更好的内容元素,比如 article、footer、header、nav、section;


(6)表单控件,calendar、date、time、email、url、search;


(7)新的技术webworker, websocket, Geolocation;


IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。


以上就是环球青藤小编关于web前端面试题的相关分享,希望对大家有所帮助,想要了解更多相关内容,请及时关注本平台并进行查看!

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

Web前端经常被问到的面试题及答案

一、HTML+CSS

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.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素:div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容,border ,margin,padding

5.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 :同时加载

前者无兼容性,后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式,后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

7.前端页面有哪三层构成,分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

8.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

二、Javascript

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换?

强制(parseInt,parseFloat,number)

隐式(== – ===)

3.split() join() 的区别

前者是切割成数组的形式,后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

6.IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

7.IE和标准下有哪些兼容性的写法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax请求的时候get 和post方式的区别

一个在url后面 一个放在虚拟载体里面

有大小限制

安全问题

应用不同 一个是论坛等只需要请求的,一个是类似修改密码的

9.call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax请求时,如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱

11.b继承a的方法

12.写一个获取非行间样式的函数

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

5. 前端常见面试题

前端开发可能问到的问题:
自我介绍(一定要对项目很熟悉)
ui-app web前端技术体系?

响应式怎么做?

render跟状态的差异
类组件的生命周期?
阻止冒泡,阻止事件默认行为
文本垂直居中。 line-height设置为元素高度。

用rece讲数组中的对象进行合并
解释localstorage sessionstorage cookie
eventbus满足event.on('eventname', callback)

display有几个值?默认值?
position有几个值?默认值?
div水平垂直居中?
position有哪些值

react相关问题(概念理解、通讯组件等)、react常用内置
React-router
html+css

页面增删改查

position的值 absolute relative fixed static

工作中是怎么联调和上线的(现场想合适的前后端联调方式,能和webpack环境切换联系起来)
antd的Form shouldUpdate增量更新方式,性能优化。
对Hooks的理解

3:操作dom点击事件向服务器上传数据,在上传未完成之前不可重复操作事件
4:日期格式化,日期不足前两位补0(2021-06-06 06:06:00)

用css写一个布局,左侧固定宽度,右侧自适应

你看

6. 前端面试会提问到哪些

在面试前端的过程中,有些问题是经常会被提问到的
一、基础篇
1. 在不使用第三个变量的情况下,如何调换a与b的值?
2. px与em的区别
3. 简述一下盒模型
4. 页面导入样式时,使用link和@import有什么区别?
5. 简述一下事件代理
二、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、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
06、display有哪些值?说明他们的作用。
07、position的值relative和absolute定位原点是?
08、CSS3有哪些新特性?
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
10、用纯CSS创建一个三角形的原理是什么?
四、JavaScript类的题目
01、JavaScript中this是如何工作的
02、请解释原型继承的原理。
03、什么是闭包(closure),如何使用它,为什么要使用它?
04、.call 和.apply的区别是什么?
05、请指出JavaScript 宿主对象(host objects) 和原生对象(native objects) 的区别?
06、请指出以下代码的区别:function Person(){}、var person = Person()、var person = new Person()?
07、请解释变量声明提升(hoisting)。
08、什么是 “use strict”; ? 使用它的好处和坏处分别是什么?
09、什么是事件循环 (event loop)?
10、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
五、开发及性能优化类题目
01、如何规避javascript多人开发函数重名问题?
02、请说出三种减低页面加载时间的方法.
03、说说你所了解到的Web攻击技术。
04、说说你说了解的前端性能优化方法?
05、前端开发中,如何优化图像?图像格式的区别?
06、浏览器是如何渲染页面的?
07、页面重构怎么操作?
08、什么叫优雅降级和渐进增强?
09、前端需要注意哪些SEO?如何做SEO优化?
10、平时如何管理你的项目?

7. 前端面试官常问的问题有哪些

1、重绘和重排的关系:

重绘不会引起重排,但重排一定会引起重绘,一个元素的重排通常会带来一系列的反应,甚至触发整个文档的重排和重绘,性能代价是高昂的。

2、重绘的概念:

重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。

但table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性值,比同等元素要多花两倍时间,这就是我们尽量避免使用table布局页面的原因之一。

3、触发重排的情况:

页面渲染初始化时;浏览器窗口改变尺寸;元素尺寸改变时;元素位置改变时;元素内容改变时;添加或删除可见的DOM元素时。

4、rex的缺点:

(1)一个组件所需要的数据,必须甶父组件传过来,而不能像flux中直接从store取。

(2)当一个组件相关数据更新吋,即使父组件不需要用到这个组件,父组件还是会重新render,可能会有效率影响,或者需要写复杂的shouldComponentUpdate进行判断。

5、对MVC和MVVM的理解:

(1)mvc:View传送指令到Controller Controller完成业务逻辑后,要求Model改变状态Model将新的数据发送到View,用户得到反馈所有通信都是单向的。Angular它采用双向绑定(data-binding):View的变动,自动反映在ViewModel,反之亦然。组成部分Model、View、ViewModel

(2)View:UI界面ViewModel:它是View的抽象,负责View与Model之间信息转换,将View的Command传送到Model;Model:数据访问层。

8. 假如让你进行Web前端的电话面试,你会问什么问题

如果我作为Web前端电话面试的面试官,那么我就要进行多方面的考量,不仅考量这个人的专业能力,也要考量这个人的综合素质等。


  • 第一个问题:自我介绍

这是面试中最常见的第一个问题,并且自我介绍十分重要,因为这短短的介绍将会在面试官的脑海里形成第一印象,也可能会成为被面试者的刻板印象。

  • 第四个问题:唠家常

前面的正题部分完成后,一般面试官不会很快结束对话,还会问面试者一些家常问题,比如“你是哪里人?”、“你是怎么学习的前端技术?”、“现在有没有女朋友/男朋友?”这些家常问题能让面试官快速的掌握到你在简历之外的东西,是否是本地人、打算何时结婚,都可能成为你能否稳定的完成这份工作的考量。

9. hr如何面试web前端工程师,该问哪些技术问题

一、基本知识

我们生活在互联网时代,你想知道的任何事情几乎都能在15分钟内找到相关信息。可是,能找到信息并不等于你会使用它。我认为所有前端工程师至少都应 该掌握某些基本的知识,才能有效地完成自己的工作。如果一遇到问题,就停下工作上网四处搜索解决方案,怎么可能保证按期完成工作呢?听听,还有谁在说“我 不知道,但我可以上网搜到。”请这些同学把手举起来,让大家认识一下(immediately raises a flag for me.)。下面我列出一些基本的知识点,这些都是我认为一名前端工程师(无论工作年头长短)在没有任何外来帮助的情况应该知道的。
[list][*]
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
[*]
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
[*]
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
[*]
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
[*]
严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。
[*]
盒模型——外边距、内边距和边框之间的关系,IE 8以下版本的浏览器中的盒模型有什么不同。
[*]
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
[*]
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
[*]
HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
[*]
JSON——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。
[/list]
重申一下,上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到,但我觉得你至少应该掌握这些,才有可能跟我坐到一间办公室里来。

二、少量提问

我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平,也很无聊。我在任何一次面试中,通常只问三个大问题,但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤,这样我就可以在每个步骤中穿插着问一些小问题。比如说:

现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮,你可以单击它来刷新价格,但不会重新加载页面。请你描述一下实现这个功能的过程,假设服务器会负责准备好正确的股票价格数据。

这个问题牵扯到一组我想要考察的基本知识点:DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式,或者 让你在页面中显示其他信息,就可以把更多的知识点包括进来。对于经验比较丰富应聘者,我也可以自如地扩展要考察的知识范围,最简单像JOSN与XML的区 别、安全问题、容量问题,等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码,你就当页面中没有包含任何库。你说你对哪个库了解多少多少,但我不能把 关于库的知识作为评判能力的因素,因为库是会随时间变化的。我需要的是真正理解库背后的机制,特别是能够徒手写出一个自己的库的人。

三、解决问题

做为一名前端工程师,最值得高兴的事莫过于解决同一个问题会有很多种不同的方法,而你要做的就是找出最合适的方法来。我在提问的时候,经常会在应聘 者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说,假设你的这个方法由于种种原因被否决了,那么你还能不能给出另一种方法。这样做可以达到 两个目的。
首先,可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认,某些人确实有过目不忘的天赋,听他们在那里滔滔不绝地讲,你会觉得他们什么都 明白。可是,只要一跟这些人谈到怎么查找方案无效的原因,以及能否拿出一个新方案来,他们往往就傻眼了。这时候,如果我听到“我不明白这个方案为什么不够 好”之类的反问,心里立刻就明白我的问题已经超出了他们的能力范围,而他们只是想拿自己死记硬背的结论来蒙混过关。
其次,可以测试出他们已经掌握的(还是那句话,“想都不用想”)浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解,想出解决同一问题的不同方案根本没有那么难。
对一名前端工程师来说,这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题(说你啦,IE6),应该说是一件很平常的事。一个方案无效就无计可施的人,做不了前端工程师。
考核应聘者解决问题能力的另一层原因,与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后,我就会想着问一个他们知识领域之外的问题。这样 做的目的,就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步,我也准备了一些提示,以防有人会卡壳打艮(在我面前15分钟一言不发,对我 评价这个人毫无帮助)。我真正感兴趣的,是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。
注意:所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题,就能够考出某人解决Web技术问题的能力。在我看来,这无异于让素描大师画肖像(或者让刘翔跟博尔特同场竞技),没有意义,也得不到任何有价值的信息。

10. 面试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?它们是如何工作的?
面试官会更多关注你是如何表达对这些问题的解释。他们会追问支持你的答案的工作案例。前面的问题你可能可以通过记忆而过关,你可能还会遇到这些问题的扩展,但这些答案的深度,将让你与众不同。通过你参与过的实际项目,来展示你的思考过程。