关于前端工程师的面试题(如有错误希望大家指出来,共同进步)

问题
1.json与jsonp的区别?

json属于一种数据格式,而jsonp只是一种使用的方法、一种手段。但是注意在jsonp中可能会出现“跨域”的问题。

2.ajax的get和post的区别?

(1).get请求需注意缓存问题,post请求不需担心这个问题
(2).post请求必须设置Content-Type值为application/x-form-www-urlencoded
(3).发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数

3.垂直居中的问题? 

(1)用于行内标签(/* 水平居中text-align: center;*/ /*垂直居中vertical-align: middle;line-height: 50px;*/) (2) 用于多行文本(给父元素设置display:table,子元素设置:display:table-ceil)

4.如何实现一个弹出层的拖拽?会使用哪些事件?

要实现拖拽其实很简单,无非就是三个事件 mousedown,mousemove,mouseup,基本的思路就是,当mousedown时获取鼠标按下时(down)的位置,和当时元素的位置.当鼠标移动时(move)再次回去鼠标位置,那么移动时元素的位置就应该是:元素开始的位置 + (鼠标移动时的位置 - 鼠标点击时的位置),最后当鼠标松开时,移除移动事件,并最后设置元素位置.

事件:mousedown,mousemove,mouseup

5.jquery里的bind,live,on的用法和区别?
bind:(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
$("a").bind("click",function(){alert("ok");});

live:(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的
$("a").live("click",function(){alert("ok");});

on:(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
$("p").on("click", function(){alert("ok");});

6.讲一下什么是闭包?

内部函数可以使用外部函数里面的变量

官方:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

为什么:(变量的作用域)内部环境可以通过作用域链访问它之上的所有外部环境,但是外部环境不能访问内部环境中的任何变量和函数。这些环境是线性的,有次序的。每个环境都可以向上搜索作用域链,以查询变量和函数名;而任何环境都不能通过向下搜索作用域链而进入另一个执行环境。

7.现代派事件和传统派事件的区别?

现代派事件:addEventListener
传统派事件:attachEvent
现代派事件的参数('执行语句',函数名,false或true),则false代表冒泡阶段,true代表捕获阶段。

8.跨域问题?

当协议,子域名,主域名,端口号任意一个不同时,都算作不同域 ,不同域之间相互请求资源,就算作“跨域”

9.js的五种基本数据类型?

 Undefined   、 Null   、Boolean  、 Number 、 String 

10.怎么实现动画效果的?

点击网页上的“开始移动”按钮,则其中的指 
定图层就会从左到右移动,在这个过程中你点 
击“停止移动”按钮就会停止移动。
这里主要使用了一个叫setTimeout(function, 
interval)函数,这个函数的参数格式为: 
第一个参数“function”为超时后调用的函数 
名,第二个参数“interval”为超时值,以微 
秒为单位。 
注意一点是如果要停止这个计时器,必须保存 
调用这个setTimeout()函数后的返回值,通过 
clearTimeout(id)函数来取消计时器。

11.html5的标签有哪些(举例)?

<video> 标记定义一个视频
<source> 标记定义媒体资源
<canvas> 标记定义图片

12.get和post的区别和原理,能传递的最大和 
最小数据是多少?

get是从服务器上获取数据,post是向服务器 
传送数据
get不安全,用户能从地址栏上看到传输的数 
据;post安全,用户不能从地址栏上看到传输 
的数据
get方式提交的数据最多只能是1024字节
post数据量存在80K/100K的大小限制

13.css中的定位问题?

position 属性值的含义:

static(静态)

元素框正常生成。块级元素生成一个矩形框, 
作为文档流的一部分,行内元素则会创建一个 
或多个行框,置于其父元素中。

relative(相对)

元素框偏移某个距离。元素仍保持其未定位前 
的形状,它原本所占的空间仍保留。

absolute (绝对)

元素框从文档流完全删除,并相对于其包含块 
定位。包含块可能是文档中的另一个元素或者 
是初始包含块。元素原先在正常文档流中所占 
的空间会关闭,就好像元素原来不存在一样。 
元素定位后生成一个块级框,而不论原来它在 
正常流中生成何种类型的框。

fixed (动态)

元素框的表现类似于将 position 设置为 
absolute,不过其包含块是视窗本身。 
提示:相对定位实际上被看作普通流定位模型 
的一部分,因为元素的位置相对于它在普通流 
中的位置。

14. 说说你自己在做项目中遇到的浏览器兼容 
问题?

兼容问题一:各大浏览器之间存在着内外补丁 
差异,各自margin 和padding差异较大。
解决方法:进行CSS样式重设。
兼容问题二:标签的高度不受控制,超出自己 
设置的高度。
解决方法:给超出高度的标签设 
overflow:hidden;或者设置行高line-height 
小于你设置的高度。
兼容问题三:CSS3的动画效果在不同浏览器上 
会出现差异。
解决方法: (谷歌:Chrome)
-webkit-transition
(火狐: FireFox)
-moz-transition
(苹果:SaFari) 
-ms-transition
(世界之窗:Opera)
-o-transition:

15.获取节点的方式?


16.js的原生对象与JQuery对象的区别?

JQuery对象的主要内容是包装集和选择器 
,而JS原生对象拥有innerHTML属性,他们有 
自己的严格规定,其方法仅限于自己使用。
但是他们之间也可以相互转化,
(1)JS对象→JQuery对象
直接在原生对象外面包裹$();
(2) JQuery对象→JS对象
类似与数组,直接$(p)[0],就可以了。

17.盒模型的内容?

内容(content)、填充(padding)、边框 
(border)、边界(margin)

18.常用的CSS选择器有哪些,请举例?

ID选择器:#header {}
类选择器:.header {}
元素选择器:div {}
子选择器:ul > li {}
后代选择器:div p {}
伪类选择器:a:hover {}
属性选择器:input[type="text"] {}(此类 
选择器不常见可不提)

19.页面加载时用window.onload和JQuery的 
加载方法有什么区别?

window.onload = function(){....\}
虽然能够在DOM完整加载后, 在添加新的元素, 
但是不幸的是浏览器执行window.onload函数 
不仅仅是在构建完DOM树之后, 也是在所有图 
像和其他外部资源完整的加载并且在浏览器窗 
口显示完毕之后. 所以如果某个图片或者其他 
资源加载很长时间, 访问者就会看到一个不完 
整的页面, 甚至在图片加载之前就执行了需要 
依赖动态添加的元素的脚本而导致脚本错误.
而$( function() {....\}
使用$()将我们的函数包装起来即可. 而且可 
以在一个页面绑定多个函数, 如果使用传统的 
window.onload则只能调用一个函数.

 

华为公司面试题

1.localstorage,sessionStorage有什么区别?

(1)localStorage

 localStorage 没有时间限制的数据存储,也就是说, localStorage是永远不会过期的,除非主动删除数据。 数据可跨越多个窗口,无视当前会话,在同一个域中 被共同访问、使用。

(2)sessionStorage

 针对一个 session 的数据存储,任何一个页面存储的 信息在窗口中同一域下的页面都可以访问它存储的数 据。每个窗口的值都是独立的,它的数据会因窗口的 关闭而丢失,不同窗口间的sessionStorage是不可以 共享的

2.做分页没,怎么实现的,你说的这种方式有什么问题吗?

答:我做的分页一般都是用MySQL做的,主要用了limit语句;步骤:(1)计算总的记录条

数(2)设置当前页数和总的页数(3)根据判断取出所需要的数据

3.angularJS有几种启动方式?

答:一共有三种启动方式

方式1: 自动启动(Angular会自动的找到ng-app,将它作为启动点,自动启动)

方式2: 手动启动(在没有ng-app的情况下,只需要在js中添加一段注册代码即可)

方式3:多个ng-app启动,不常用

4.ng-module、{{}}、ng-blind三个的区别?

5.ng-app写在哪,可以写到body吗?

答:ng-app是写在head里面的,不可以写在body里面,他的意思是表示整个HTML由angularjs托管。

6.position的几种方式,区别?

答:Static:没有设置任何定位效果的默认值就是static,也就是标准文档流

    Relative(相对定位):使用相对定位的盒子,会相对与它原本的位置,通过偏移指定的距离,到达新的位置

    absolute(绝对定位):使用绝对定位的盒子,以他最近的一个“已经定位”的父元素为基准进行偏移,如果没有“已经定位”的父元素,就以浏览器窗口为基准[*脱离文档流*]

fixed(固定定位):基于浏览器的定位;

  1. 如果让一个元素隐藏你可以用到几种方法?

答:{display:none}彻底隐藏,隐藏元素不占居元素原来的位置。

{overflow:hidden;}隐藏元素的内容,但是元素原来的位置依然存在。

(还可以用到jQuery的方法: .hide选择隐藏 .show显示)

7.怎么执行一个方法?

8.怎么申明方法?

融智公司面试题

1.介绍一下css的盒子模型?

答:盒子模型分为:(1).Border(边框):属性主要有3个,color(颜色),width(粗细)和style(样式)

(2)Padding:内边距;(有四个参数为:上右下左)

(3).Margin:外边距;(有四个参数为:上右下左)

(4).Content:内容

2.Doctype是什么?严格模式和混乱模式区分它们的有何意义?

答:Doctype是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档;

区别:严格模式是浏览器根据规范去显示页面;混杂模式是以一种向后兼容的方式去显示

意义:决定浏览器如何渲染网站(浏览器使用那种规范去解析网页)

触发:浏览器根据doctype是否存在和使用的是那种dtd来决定

3.列出css选择符的优先级?

答:ID选择器>类选择器>元素选择器

3.xhtml和html有何种区别?

答:XML+HTML为XHTML,相对于HTML更友好也更加规范更严谨。而XHTML提出了三种选择(一、过渡型 ;二、严格型; 三、框架型;)HTML叫超文本标记语言;XHTML叫可扩展标记语言

4.css3有哪些新的特性?

答:新的特效有很多我也不是每个都用过,我就例举一下我用过的

(1)border-radius圆角边框(也叫边框半径)

(2)background-size 背景图片大小

(3)Box-shadow 元素阴影(x轴偏移位置,y轴偏移位置,模糊范围,阴影颜色)

(4)Opacity 透明度(由0到1)

5.列出display的值,并说出它们的作用?

答:display:block 为显示元素;

   Display:none为隐藏元素;

Display:inline  为默认值

Display:inline-block 行内块元素

6.JavaScript如何继承?

答:现目前主流的继承方式有:(1)原型链继承,优点(实例既是父类的实例,又是子类的实例,看起来似乎是最纯粹的继承)缺点(无法实现多重继承)

(2)利用构造函数继承,优点(可以实现多重继承,可以把子类特有的属性设置放在构造器内部。)缺点(对象不是父类的实例)

(3)拷贝继承,优点(支持多继承。)缺点(效率较低;无法获取父类不可枚举的方法)

7.新的HTML5文档类型和字符集是?

8.HTML5中canvas的作用是什么?

答:canvas它的作用是对图片进行一系列的操作,属于2D绘图。

10.列举IE和其他浏览器的不同之处?

答:首先IE浏览器为微软 Windows 系统的内核浏览器大多数浏览器都是基于IE这个内核浏览器设计开发出来的,其本质仍是实用IE浏览器的内核文件。但作为一个程序员来说我不喜欢IE浏览器,IE浏览器他不太准守W3C的标准规范,所以存在着很多的兼容性问题。

2.行内元素有哪些?块级元素有哪些?什么叫做盒子模型?
块级元素:
p,h1-h6,pre,ul,li,div,form,br,table,blockqute
内嵌元素:
span,a,img,
区别:块级元素定义文本要换行,而内嵌元素不换行。
盒子模型分为:
(1).Border(边框):属性主要有3个,color(颜色),width(粗细)和style(样式)
(2)Padding:内边距;(有四个参数为:上右下左)
(3).Margin:外边距;(有四个参数为:上右下左)
(4).Content:内容

3.css的引入方式有哪些?@import和link的区别?
答:(1)嵌入式样式表
(2)内联式样式表
(3)外部式样式表

@import和link的区别:
1. 老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
  2. 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
  3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
  4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的

4.css的选择符有哪些?优先级如何?那些可以继承?内联和important的优先级那个高?

答:css的选择符有: (1)元素选择器;类选择器;ID选择器;
(2)伪类选择器(元素:hover点击后;元素:link 未访问;元素:visted已访问;元素:active激活;);
(3)复合选择器(1.并集选择器:p h[中间以空格隔开];2.交集选择器:h1,h2[中间以逗号相隔];3.后代选择器:div下的任何元素)

*优先级问题:ID选择器 > 类选择器 > 元素选择器

可继承的有:font-size、 font-family 、color

使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外在同级样式按照申明的顺序后出现的样式具有高优先级。内联小于important的优先级

5.你做的页面在那些浏览器上测试过,这些浏览器的内核分别是?

谷歌浏览器chrome--内核是 WebKit内核(苹果浏览器用的也是WebKit内核)
火狐浏览器Firefox--内核是Gecko内核
IE浏览器--内核是IE内核

6.写出几种解决IE6中的bug办法?
一、IE6双倍边距bug

当页面上的元素使用float浮动时,不管是向左还是向右浮动;只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px。想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG

二、IE6中3像素问题及解决办法

当元素使用float浮动后,元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时3px的间隙在相邻容器的内部,当设定高度后又跑到容器的相反侧了。要解决这类BUG的话,需要使布局在同一行的元素都加上float浮动。

三、IE6中奇数宽高的BUG

IE6中奇数的高宽显示大小与偶数高宽显示大小存在一定的不同。其中要问题是出在奇数高宽上。要解决此类问题,只需要尽量将外部定位的div高宽写成偶数即可。

四、IE6中图片链接的下方有间隙

IE6中图片的下方会存在一定的间隙,尤其在图片垂直挨着图片的时候,即可看到这样的间隙。要解决此类问题,需要将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0

中兴公司

1.ajax是什么,同步与异步的区别,如何解决跨域问题;

答:  Ajax是多种技术组合起来的一种浏览器和服务器交互技术,基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用,并且用收到的数据来更新一个当前web页面而不必刷新整个页面。

      同步:脚本会停留并等待服务器发送回复然后再继续
       异步:脚本允许页面继续其进程并处理可能的回复

前端对于跨域的解决办法:
(1)document.domain+iframe

(2) 动态创建script标签

2.面向对象有没有用过call,apply?他们后面括号里面的参数是什么?

答:call方法:

  语法:call(thisObj, Object)

  定义:调用一个对象的一个方法,以另一个对象替换当前对象。

  说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

  apply方法:

  语法:apply(thisObj, [argArray])

  定义:应用某一对象的一个方法,用另一个对象替换当前对象。

  说明:如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数

3.nodeJS是基于什么执行的?

答:Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,是一个让 JavaScript 运行在浏览器之外的平台,Node 本身运行 V8 JavaScript

4.数组去重(写代码)?

答:方法一(原理:思路:1.构建一个新的数组存放结果    2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比    3.若结果数组中没有该元素,则存到结果数组中)

Array.prototype.unique1 = function(){
 var res = [this[0]];
 for(var i = 1; i < this.length; i++){
  var repeat = false;
  for(var j = 0; j < res.length; j++){
   if(this[i] == res[j]){
    repeat = true;
    break;
   }
  }
  if(!repeat){
   res.push(this[i]);
  }
 }
 return res;
}
var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]
alert(arr.unique1());

方法二(原理:1.先将原数组进行排序  2.检查原数组中的第i个元素 与 结果数组中的最后一个元素是否相同,因为已经排序,所以重复元素会在相邻位置  3.如果不相同,则将该元素存入结果数组中)

Array.prototype.unique2 = function(){
 this.sort(); //先排序
 var res = [this[0]];
 for(var i = 1; i < this.length; i++){
  if(this[i] !== res[res.length - 1]){
   res.push(this[i]);
  }
 }
 return res;
}
var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]
alert(arr.unique2());

方法二(原理:1.创建一个新的数组存放结果  2.创建一个空对象  3.for循环时,每次取出一个元素与对象进行对比,如果这个元素不重复,则把它存放到结果数组中,同时把这个元素的内容作为对象的一个属性,并赋值为1,存入到第2步建立的对象中。 )

Array.prototype.unique3 = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}

var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());

5.什么是闭包?谈一谈闭包的优缺点?

闭包内部函数可以使用外部函数里面的变量

闭包的好处:
(1)不增加额外的全局变量,
(2)执行过程中所有变量都是在匿名函数内部。
闭包的缺点:

(1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

(2)闭包会在父函数外部,改变父函数内部变量的值

6.用过哪些Linux系统?

答:1.ubuntu系统([ʊ'bʊntʊ])   2.deepin(底本)系统  3.startOS(是他题哦死)系统

7.你是怎么解决关于前端优化方面的问题的?

答:1.html、css、js三者相分离;

2.css的导入方式;

3.合理布局页面的内容。DOM的加载顺序是由上而下的,遇到css,加载css,遇到js,停滞下来,加载并解析js。在布局页面的时候,把主体内容优先显示,把重要内容靠上布局,让浏览器优先解析,是种较好的方案。 

4.图片文件格式的选择

原文地址:https://www.cnblogs.com/Victory-peng/p/5016862.html