① 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
}
}
② 前端面试题,求大佬给个结果
第一题 true false false true
第二题 true 报错 false false true false
之前是为了赶着回答,所以随便答了,后来检查,发现也是对的了。后面说说分析:
第一个问题:
先分析最简单的页面代码function A(){};和function B(){};只是普通的函数A和B。
然后就是A的原型。
a是普通的构造函数。
先给你科普一下基础,我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象。这里面的关键字是指针!而原型属性的作用是,让对象A包含一些共享的属性和方法,而这里就是共享了方法,A原型里面的fun。
PS:有时候,面试官还会把a = new A()放在,A.prototype前面,这样就会导致原型指针混乱的问题,但是你这个问题,相对简单,没有这种情况,所以这里我也不说明了。
然后分析,问题的答案:
1、必定是true,因为每个构造函数都有一个constructor属性,且指向A。但是如果在原型对象里面自己去设置constructor属性,这样就会导致,指向Object对象,且属性变为可枚举的,如果你理解了这里,第二个问题就简单了。
2、false。上面已经提过了,如果在A的原型里面设置constructor,指向的对象肯定是Object,不信的话,你可以试试console.log(A.prototye.constructor === Object),这样一定是true。
3、就是对hasOwnProperty的理解。hasOwnProperty是检测a对象是否含有'constructor'这个属性,他检测的不是原型,而原型仅仅是一个指针,所以是false。
4、没啥好说的,很简单,就是true。
第二个问题
先对题目进行分析,new B()产生一个构造函数 而A的原型指向该构造函数
然后,var b = new A(); b和上面的a差不多 只不过A有点改变。
然后分析,答案:
1、在这里我必须说明一下A.prototye ={ } //无论对象里面是什么或者做了什么事,他一定有一个constructor属性,如果你不主动设置,他一定指向自己,也就是A,不信你自己实验,所以一定是true。
2、我实在没有发现代码中,有类似B.prototype的语句,但是B下面还是有原型属性B.prototype,只是这个属性没有被创建而已。为了确保正确,我查了查,constructor的概念,原来constructor的作用是返回对创建此对象的数组函数的引用。这里涉及了一个关键字,就是创建,所以我肯定这个问题的答案是报错的了。因为这个原型是存在的,但没被创建。而且constructor的概念,提及了一个重要的概念,引用,我不做说明了,自己网络。
3、其实这里只是绕了一个圈,等你绕过来的时候,他就是问A.prototye = new B();这里的问题了,这时候明显指向了B,不信,可以把A改为B 一定是true。而这个问题的答案是false。
4、不要被指针影响了,hasOwnProperty检测的不是原型指针,所以一定是false。
5、没什么好说的,明显为true
6、还是那句原型只是一个指针,b不可能是B的实例,只是A的原型指向了B
综合,本问题,主要考察的是对原型指针的理解,还有对constructor的认识。
③ 前端面试题目难吗 如何轻松面对前端面试
从以下五个方面做,可以轻松面对前端面试:
一、基本知识
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。
盒模型——外边距、内边距和边框之间的关系,IE8以下版本的浏览器中的盒模型有什么不同。
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
JSON——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。
二、少量提问
现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮,你可以单击它来刷新价格,但不会重新加载页面。请你描述一下实现这个功能的过程,假设服务器会负责准备好正确的股票价格数据。
这个问题牵扯到一组我想要考察的基本知识点:DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式,或者 让你在页面中显示其他信息,就可以把更多的知识点包括进来。对于经验比较丰富应聘者,我也可以自如地扩展要考察的知识范围,最简单像JOSN与XML的区别、安全问题、容量问题等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码,你就当页面中没有包含任何库。你说你对哪个库了解多少多少,但我不能把关于库的知识作为评判能力的因素,因为库是会随时间变化的。
三、解决问题
做为一名前端工程师,最值得高兴的事莫过于解决同一个问题会有很多种不同的方法,而你要做的就是找出最合适的方法来。我在提问的时候,经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说,假设你的这个方法由于种种原因被否决了,那么你还能不能给出另一种方法。这样做可以达到 两个目的。
首先,可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认,某些人确实有过目不忘的天赋,听他们在那里滔滔不绝地讲,你会觉得他们什么都明白。可是,只要一跟这些人谈到怎么查找方案无效的原因,以及能否拿出一个新方案来,他们往往就傻眼了。这时候,如果我听到“我不明白这个方案为什么不够 好”之类的反问,心里立刻就明白我的问题已经超出了他们的能力范围,而他们只是想拿自己死记硬背的结论来蒙混过关。
其次,可以测试出他们已经掌握的(还是那句话,“想都不用想”)浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解,想出解决同一问题的不同方案根本没有那么难。
注意:所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题,就能够考出某人解决Web技术问题的能力。在我看来,这无异于让素描大师画肖像,没有意义,也得不到任何有价值的信息。
四、有激情
要成为一名优秀的前端工程师,最重要的莫过于对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的,因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异,所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习,但想应聘前端工程师的人恐怕还是必须这么做的。
你怎么知道谁对这种工作有没有激情?实际上非常简单。我只问一个简单的问题:“目前你对什么Web技术最感兴趣?”这个问题永远不会过期,而且也几乎不可能出错……除非你答不上来。就眼下来说,我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库,等等。只有 对Web开发充满激情的人,才会坚持不懈地学习新知识、掌握新技能;
五、最后一点
计算机科学或者Web设计方面的知识当然也有用,但那都是基本知识之外的东西。只要基本知识在那儿了,一切就都有了基础,想扩充知识面也不难。可是,如果等到正式上班以后,还得从头学习基本技能,那种难度是不可同日而语的。
④ 前端面试会提问到哪些
在面试前端的过程中,有些问题是经常会被提问到的
一、基础篇
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、平时如何管理你的项目?
⑤ Web前端题目
答案是D,
Visual Basic电脑版是一种由微软公司开发的包含协助开发环境的事件驱动编程语言。
⑥ 你遇到过哪些比较有水准的前端面试题
我原来面试工作时候,面试官出了一个这样的题,题目是:我儿子叫你的儿子叫爸爸。当时我对于这个问题思考了很久。这个题目答案:是男问女的就是公公,女问女就是婆婆,男问男就是爸爸,女问男就是妈妈。这个题很好的考验了面试者的逻辑思考能力,还有看待事物的全面性,非常不错。
⑦ 前端笔试题目求解答!!求写出具体代码
其实很简单,就是一些js判断就可以实现了,可以先用冒泡排序对它们进行排序,然后将前100名塞进一个数组里面,当然还有排序的时间和用户的id等,然后在排行榜按顺序输出array[0 - 100] ,用户访问的时候判断一下用户id是否在这个数组,如果在输出数组的内容。如果不在然将 101 - 9999塞进另外一个数组,再查询用户id在不在这个数组,如果在,输出用户id 对应的排名,如果不在那就是直接输出未上榜
⑧ 恒华科技校招前端开发面试题
学哪一门web技术都要从基础开始深入的,而深入到一定的程度都会遇见瓶颈,突破了就会受益匪浅!——久久经验网
⑨ 前端面试题,哪里能找到案例或解析
如果你确定具体是什么题目的话,可以直接拿题目网络啊,虽然有时候网络查找到的资料是重复的,但也算是最快最直接的方法。
如果你希望找到大量的面试题,或者是附带答案,解析的问题。首先推荐小程序 —— 决胜前端。
另外,HTML5学堂,牛客,掘金等网站也有相关题目。
⑩ HTML5面试中常会被问到的面试题有哪些
1.XHTML和HTML有什么区别
HTML是一种网页设计语言,XHTML是一个置标语言。两者最大的不同是:XHTML元素必须被正确嵌套;XHTML元素必须被关闭;标签名必须用小写字母;XHTML文档必须拥有根元素。
2.前端页面有哪三层构成,分别是什么?作用是什么?
结构层HTML,表示层 CSS ,行为层 js。
3.什么是语义化的HTML?
HTML语义化就是让页面的内容结构化,便于对搜索引擎解析;在没有样式的情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。这样使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
4.Doctype作用?标准模式与兼容模式各有什么区别?
DOCTYPE作用是告知浏览器的解析器用什么文档标准解析这个文档。如果DOCTYPE不存在或者是格式上的不正确可以回会导致文档以兼容模式来呈现。标准模式和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以向后兼容的方式显示,模拟浏览器的行为以防止站点无法工作。
5. cookies,sessionStorage 和 localStorage 三者有何区别?
Cookie是在浏览器和服务器间来回传递的。sessionStorage和localStorage的存储空间比cookies会更大些;而且sessionStorage和localStorage相比cookies有更多的丰富易用的接口;另外,sessionStorage和localStorage都有它们各自独立的存储空间。
6.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等的本地存储方式可以实现浏览器内多个标签页之间的通信。
更多资讯,请及时关注本平台,小编会为您做详细的整理和总结。