文档视界 最新最全的文档下载
当前位置:文档视界 › web前端面试题及答案

web前端面试题及答案

web前端面试题及答案

前端开发面试题及答案

1、对Web标准以及W3C的理解与认识

2、某HTML和HTML有什么区别

答:HTML是一种基本的WEB网页设计语言,某HTML是一个基于某ML 的置标语言最主要的不同:

某HTML元素必须被正确地嵌套;

某HTML元素必须被关闭;

某HTML文档必须拥有根元素。

3、Doctype严格模式与混杂模式-如何触发这两种模式,区分它们有何意义答:Doctype用于声明文档使用哪种规范(HTML/某HTML)加入某ML声明可触发,解析方式更改为IE5.5拥有IE5.5的bug。

4、行内元素有哪些块级元素有哪些CSS的盒模型

答:行内元素:abbripaninputelect

块级元素:divph1h2h3h4formul

CSS盒模型:内容,bordermarginpadding

答:方式:内联内嵌外链导入

区别:同时加载

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

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

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

后者优先级高

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

答:结构层HTML表示层CSS行为层JS

8、你做的页面在哪些浏览器测试过这些浏览器的内核分别是什么答:Ie(Ie内核)

火狐(Gecko)

谷歌(webkit)

opear(Preto)

答:Alt当图片不显示时,用文字代表

Title为该属性提供信息。

10、描述CSSReet的作用和用途

答:Reet重置浏览器的CSS默认属性浏览器的品种不同,样式不同,然后重

置,让他们统一。

100-199用于指定客户端应响应的某些动作。

200-299用于表示请求成功。

300-399用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。400-499用于指出客户端的错误。

400语义有误,当前请求无法被服务器理解。

401当前请求需要用户验证

403服务器已经理解请求,但是拒绝执行它。

500-599用于支持服务器错误。

503–服务不可用

13.解释cprite,如何使用。

C精灵把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么

盒子模型渲染模式的不同

15.你如何对网站的文件和资源进行优化期待的解决方案包括:

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

16.什么是语义化的HTML

17.清除浮动的几种方式,各自的优缺点

3.是用afert伪元素清除浮动(用于非IE浏览器)

18.chack

_marging\\IE6

+margin\\IE7

Marging:0auto\9所有Ie

Margin\0\\IE8

前端开发面试题之Javacript部分

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

Objectnumberfunctionbooleanunderfind

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

强制(pareInt,pareFloat,number)

隐式(==–===)

3.plit()join()的区别

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

4.数组方法pop()puh()unhift()hift()

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

Unhift()头部添加hift()头部删除

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

6.IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.thi指向问题

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

Varev=ev||window.event

document.documentElement.clientWidth||document.body.clientWi dth

Vartarget=ev.rcElement||ev.target

8.aja某请求的时候get和pot方式的区别

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

有大小限制

问题

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

9.call和apply的区别

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

Object.apply(thi,argument)

10.aja某请求时,如何解释jon数据

使用evalpare鉴于安全性考虑使用pare更靠谱

11.b继承a的方法

12.JavaScriptthi指针、闭包、作用域

13.事件委托是什么

让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

14.闭包是什么,有什么特性,对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

15.如何阻止事件冒泡和默认事件

canceBubblereturnfale

16.添加删除替换插入到某个接点的方法

obj.appendChidl()

obj.inneretBefore

obj.replaceChild

obj.removeChild

17.解释jonp的原理,以及为什么不是真正的aja某

Aja某是页面无刷新请求数据操作

18.javacript的本地对象,内置对象和宿主对象

本地对象为arrayobjrege某p等可以new实例化

内置对象为gloadMath等不可以实例化的

宿主为浏览器自带的document,window等

19.documentload和documentready的区别

Document.onload是在结构和样式加载完才执行j

Document.ready原生种没有这个方法,jquery中有

$().ready(function)

20.”==”和“===”的不同

前者会自动转换类型

后者不会

21.javacript的同源策略

面试web前端研发应该注意什么

1、了解公司

俗话说“知己知彼,方能百战百胜”我们在面试之前需要对公司有所了解,现在的公司尤其是互联网公司都在网上有自己的网站的,如果搜索不到,可能这个公司比较小

2、学会取舍

3、找好路线

4、携带

我们最好携带一份简单的个人简历去面试,虽然去面试时一般会让你再次写一份个人简历,但是我们还是要拿一份已经写好的简历,简历尽量做的简单明了。

5、准备笔试

在北京等城市的大型公司,我们去面试时,会先让我们做一套笔试题,试题可能和我们的工作内容部分相关,这就需要我们提前在网上找到一些

公司的面试题,提前看一下。

6、准备上机操作

7、沉着应对提问

我们在回答hr或者技术负责人的问题时,应该沉着应对,不慌不忙,把自己最好的一面展示给对方。

前端工程师面试题及答案

前端工程师面试题及答案 前言: 前端工程师是近年来热门的职业之一,对于公司而言,拥有一名优秀的前端工程师可以提升产品的用户体验和界面设计的质量。面试是评估候选人技能和能力的重要环节。下面是一些常见的前端工程师面试题及答案,希望对您有所帮助。 一、HTML/CSS相关问题 1. 什么是HTML?什么是CSS? HTML全称Hyper Text Markup Language,是用于创建网页的标准标记语言。 CSS全称Cascading Style Sheets,用于描述网页元素样式的语言。 2. HTML5有什么新特性? HTML5引入了许多新的元素和API,如语义化标签、本地存储、多媒体元素、Canvas绘图等。 3. 解释下Box模型。 Box模型是指网页中的每个元素都可以看作是一个盒子,包括内容区域、填充区域、边框和外边距。 4. 请简述flex布局。

Flex布局(Flexible Box Layout)是CSS3新增的一种布局模式,可 以轻松实现灵活的盒子布局。 5. 解释下CSS选择器及其优先级。 CSS选择器用于选择要样式化的HTML元素。优先级是指当多个选择器同时作用于同一个元素时,浏览器根据一定规则来确定使用哪个 样式。 二、JavaScript相关问题 1. JavaScript是一种编程语言还是脚本语言? JavaScript是一种弱类型、解释性的脚本语言。 2. 解释下变量的作用域。 变量的作用域指的是变量的可访问范围,分为全局作用域和局部作 用域。 3. 请解释下什么是闭包。 闭包是指在一个函数内部定义的函数,并且可以访问父函数的变量。闭包可以保护变量不受外部的干扰。 4. 解释一下事件冒泡和事件捕获。 事件冒泡是指事件触发后,先执行最内层元素的事件处理程序,然 后逐级向外执行,直至触发最外层元素的事件处理程序。

2022年前端面试题含答案精华版

前端面试题 1)下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度 a.display:inline b.display:none c.display:block d.display:inherit 2)新窗口打开网页,用到如下哪个值()。 a._self b._blank c. _top d. _parent 3)下面有关jquery事件旳响应,描述错误旳是? a.onclick 鼠标点击某个对象 b.onfocus 元素失去焦点 c.onload 是某个页面旳css js html 文档构造和图像被完毕加载 d.onmousedown 某个鼠标按键被按下 4)元素旳alt和title有什么异同,选出对旳旳说法?不同旳浏览器,体现同样 a.alt和title同步设立旳时候,alt作为图片旳替代文字浮现,title是图片旳解释文字 b.alt和title同步设立旳时候,title作为图片旳替代文字浮现,alt是图片旳解释文字

c.以上说法都不对旳 5)下列js可以让一种input旳背景颜色变成红色旳是? 6)下面有关html5标签说法错误旳有? a.

标签定义菜单列表。当但愿列出表单控件时使用该标签 d. 标签定义命令按钮,例如单选按钮、复选框或按钮 7)下述有关css属性position旳属性值旳描述,说法错误旳是? a.static:没有定位,元素出目前正常旳流中 b.fixed:生成绝对定位旳元素,相对于父元素进行定位 c.relative:生成相对定位旳元素,相对于元素自身正常位置进行定位。 d.absolute:生成绝对定位旳元素,相对于 static 定位以外旳第一种祖先元素进行定位。 8)下面符合一种有效旳javascript变量定义规则旳是? a._$te$t2 b.with c. a bc d.2a 9)下面有关JavaScript中 call和apply旳描述,错误旳是?

【最新考试题库及答案】web前端面试题及答案

web前端面试题及答案 为的web前端面试题及答案,供各位参考。 1、怎样添加、移除、移动、复制、创建和查找节点? 创建新节点: creatDocumentFragment(),创建一个DOM片段。creatElement(),创建一个具体的元素。 creatTextNode(),创建一个文本节点。 添加、移除、替换、插入: appendChild(),添加。 removeChild(),移除。 replaceChild(),替换。 Before(),插入。 查找: getElementsByTagName(),通过标签名称。getElementsByName(),通过元素的Name属性的值。getElementById(),通过元素id,唯一性。 2、JS中什么是伪数组?如何将伪数组转化为标准数组? 伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为。但仍可以对真正数组遍历方法来遍历它们。典型的是函数的arguement参数,还有像调用getElementsByTagName()、document.childNodes()之类的,它们都返回NodeList对象,都属于伪数组。可以用

Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。3、JS中callee和caller的作用。 caller是返回一个对函数的引用,该函数调用了当前函数;callee是返回正在被执行的函数,也就是所指定的function对象的正文。 4、请说出三种减低页面加载时间的方法。 1.压缩CSS、JS文件。 2.合并JS、CSS文件,减少HTTP请求。 3.外部JS、CSS文件放最底下。 4.减少DOM的操作,尽可能用变量替代不必要的DOM操作。 5、为什么用多个域名来存储网络资源会更有效? 确保用户在不同地区用最快的速度打开网站,其中某个域名崩溃,用户也能通过其他域名访问网站。 6、如何消除一个数组里面重复的元素?indexOf():返回某个指定的字符串值在字符串中首次出现的位置,对大小写敏感,若没有,则返回-1。 7、写一个function,清除字符串前后的空格(兼容所有的浏览器)。8、统计字符串中字母个数或统计最多字母数。str.charAt(i):返回指定位置的字符,i在0~str.length之间,如果i不在0~str.length之间,该方法返回一个空字符串。9、截取字符串 abcdefg 中的 egf 。10、实现一个函数clone,可以对JS中的5种主要的数据类型(包括Number、String、

web前端面试题及答案

web前端面试题及答案 前端开发面试题及答案 1、对Web标准以及W3C的理解与认识 2、某HTML和HTML有什么区别 答:HTML是一种基本的WEB网页设计语言,某HTML是一个基于某ML 的置标语言最主要的不同: 某HTML元素必须被正确地嵌套; 某HTML元素必须被关闭; 某HTML文档必须拥有根元素。 3、Doctype严格模式与混杂模式-如何触发这两种模式,区分它们有何意义答:Doctype用于声明文档使用哪种规范(HTML/某HTML)加入某ML声明可触发,解析方式更改为IE5.5拥有IE5.5的bug。 4、行内元素有哪些块级元素有哪些CSS的盒模型 答:行内元素:abbripaninputelect 块级元素:divph1h2h3h4formul CSS盒模型:内容,bordermarginpadding 答:方式:内联内嵌外链导入 区别:同时加载 前者无兼容性,后者CSS2.1以下浏览器不支持

Link支持使用javacript改变样式,后者不可。 6.CSS选择符有哪些哪些属性可以继承优先级算法如何计算内联和important哪个优先级高 后者优先级高 7、前端页面有哪三层构成,分别是什么作用是什么 答:结构层HTML表示层CSS行为层JS 8、你做的页面在哪些浏览器测试过这些浏览器的内核分别是什么答:Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Preto) 答:Alt当图片不显示时,用文字代表 Title为该属性提供信息。 10、描述CSSReet的作用和用途 答:Reet重置浏览器的CSS默认属性浏览器的品种不同,样式不同,然后重 置,让他们统一。 100-199用于指定客户端应响应的某些动作。 200-299用于表示请求成功。

前端工程师面试题题及答案(全面综合)

1。要动态改变层中内容可以使用的方法有(AB ) a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2。在javascript里,下列选项中不属于数组方法的是(B);a)sort() b)length() c)concat() d)reverse() 3 、var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是:(选择一项)。(D ) A for(var i =0;i〈emp; i++) B for(var i =0; i〈Array(3); i++) C for(var i =0;i〈emp.length();i++) D for(var i =0; i〈emp。length; i++) 4 下列声明数组的语句中,错误的选项是(C )。 a)Var arry= new Array() b)Var arry=new Array(3) c)Var arry[]=new Array(3)(4) d)Var arry=new Array(‘3',’4’) 5. 下列哪一个选项不属于document对象的方法?(D ) a)focus() b)getElementById() c)getElementsByName() d)bgColor() 6. 、display属性值的常用取值不包括(C ) a)inline b)block c)hidden d)none 7. 以下有关pixelTop属性与top属性的说法正确的是。(D )a)都是Location对象的属性 b)使用时返回值都是字符串 c)都是返回以像素为单位的数值

前端面试题及答案

前端面试题及答案 在前端领域中,面试是获取工作机会的重要环节。为了帮助准备前端面试的候选人们,本文将提供一些常见的前端面试题及其答案,以供参考。 一、HTML相关面试题 1. 请简述HTML的概念和作用。 HTML是超文本标记语言的缩写,用于构建网页的标准标记语言。它通过标签来定义页面的结构和内容,并与CSS和JavaScript等其他技术协同工作,实现页面的渲染和交互。 2. 请解释一下HTML5的新特性。 HTML5引入了许多新特性,例如语义化标签(如header、footer、nav等)、视频和音频元素、Canvas绘图功能、本地存储(localStorage 和sessionStorage)、WebSocket等。这些特性提升了网页的功能和性能,使开发者能够更好地构建富交互、多媒体的网页应用。 3. 请描述一下HTML元素的块级元素和内联元素的区别。 块级元素会独占一行,相邻的两个块级元素会自动换行。常见的块级元素有div、p、h1等。而内联元素不会换行,会在一行内按照从左到右的顺序排列。常见的内联元素有span、a、em等。此外,块级元素可以包含内联元素,但是内联元素不能包含块级元素。 二、CSS相关面试题

1. 请解释一下盒模型。 盒模型描述了一个HTML元素所占空间的模型。它由内容区、内边距、边框和外边距组成。其中,内容区的大小由width和height属性决定,内边距由padding属性决定,边框由border属性决定,外边距由margin属性决定。 2. 如何实现水平居中一个块级元素? 要实现水平居中一个块级元素,可以设置其左右外边距为auto,同时将其display属性设置为block。例如,假设元素的宽度为300px,可以使用如下CSS代码: ```css .element { width: 300px; margin-left: auto; margin-right: auto; display: block; } ``` 3. 请解释一下CSS选择器的优先级。 CSS选择器的优先级用于确定当多个选择器作用于同一个元素时,哪一个选择器的样式将被应用。选择器的优先级由四个部分组成,按

前端面试题及答案2020

web前端面试试题(含答案) 一、先自我介绍一下,说一下项目的技术栈,以及项目中遇到的一些问题 二、从整体中,看你对项目的认识,框架的认识和自己思考。 三、项目中有没有遇到什么难点,怎么解决。 四、如果你在创业公司你怎么从0开始做(选择什么框架,选择什么构建工具)。 五、说一下你项目中用到的技术栈,以及觉得得意和出色的点,以及让你头疼的点,怎么解决的。 六、一个业务场景,面对产品不断迭代,以及需求的变动该怎么应对,具体技术方案实现。 七、你的学习来源是什么。 八、你觉得哪个框架比较好,好在哪里。 九、你觉得最难得技术难点是什么。 十、你见过的最好的代码是什么 十一、网站性能优化 1. http 请求方面,减少请求数量,请求体积,对应的做法是,对项目资源进行压缩,控制项目资源的dns 解析在2到4个域名,提取公告的样式,公共的组件,雪碧图,缓存资源, 2. 压缩资源,提取公共资源压缩,提取css ,js 公共方法 3. 不要缩放图片,使用雪碧图,使用字体图表(阿里矢量图库) 4. 使用CDN,抛开无用的cookie 5. 减少重绘重排,CSS属性读写分离,最好不要用js 修改样式,dom 离线更

新,渲染前指定图片的大小 6. js 代码层面的优化,减少对字符串的计算,合理使用闭包,首屏的js 资源加载放在最底部 十二、js 自定义事件实现 1. 原生提供了3个方法实现自定义事件 2. createEvent,设置事件类型,是html 事件还是鼠标事件 3. initEvent 初始化事件,事件名称,是否允许冒泡,是否阻止自定义事件 4. dispatchEvent 触发事件 十三、angular 双向数据绑定与vue数据的双向数据绑定 1. 二者都是MVVM 模式开发的典型代表 2. angular 是通过脏检测实现,angular 会将UI 事件,请求事件,settimeout 这类延迟,的对象放入到事件监测的脏队列,当数据变化的时候,触发$diget 方法进行数据的更新,视图的渲染 3. vue 通过数据属性的数据劫持和发布订阅的模式实现,大致可以理解成由3个模块组成,observer 完成对数据的劫持,compile 完成对模板片段的渲染,watcher 作为桥梁连接二者,订阅数据变化及更新视图 十四、get与post 通讯的区别 1. Get 请求能缓存,Post 不能 2. Post 相对Get 安全一点点,因为Get 请求都包含在URL 里,且会被浏览器保存历史纪录,Post 不会,但是在抓包的情况下都是一样的. 3. Post 可以通过request body来传输比Get 更多的数据,Get 没有这个技术

前端开发面试题及答案

前端开发面试题及答案 1. 什么是前端开发? 答:前端开发是一门技术,其主要目的是使用 HTML,CSS 和 JavaScript 来创建动态网页,视图和用户界面。 2. 如何使用CSS制作一个圆角边框? 答:使用 CSS 的 border-radius 属性可以制作圆角边框,如:border-radius: 10px; 3. 请描述流式布局的概念。 答:流式布局是一种网页布局技术,它可以根据浏览器窗口大小自动调整页面中元素的位置和大小。 4. 请描述XML及其用途。 答:XML(可扩展标记语言)是一种标记语言,可以用来存储和传输数据,也用于创建 web 应用。 5. 什么是AJAX? 答:AJAX 是 Asynchronous JavaScript and XML 的缩写,它是一种用于创建异步 Web 应用的技术,可以在不重新加载整个页面的情况下更新网页的部分内容。 6. 什么是JSON? 答:JSON 是 JavaScript 对象表示法的缩写,是一种轻量级的数据交换格式,用于在应用程序之间进行数据交换和存储。 7. 什么是CDN?

答:CDN 是内容分发网络的缩写,是一种分散式网络技术,用于将静态资源(如 JavaScript 和 CSS 文件)分发到多个服务器上,以提供更快的网页加载速度。 8. 请描述Web存储的概念。 答:Web 存储提供了一种方式,可以在网站上存储数据,并在下次用户访问中访问这些数据。使用 web 存储,可以为用户提供更好的体验和功能,因为它可以更快地加载页面和保存状态信息。 9. 请描述HTML5的新特性。 答:HTML5 包含许多新特性,包括新的元素(如