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


    问题
    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.图片文件格式的选择

  • 相关阅读:
    Vue.js 2.x笔记:安装与起步(1)
    EntityFramework Core笔记:保存数据(4)
    EntityFramework Core笔记:查询数据(3)
    EntityFramework Core笔记:表结构及数据基本操作(2)
    EntityFramework Core笔记:入门(1)
    ASP.NET MVC系列:web.config中ConnectionString aspnet_iis加密与AppSettings独立文件
    EntityFramework优化:第一次启动优化
    EntityFramework优化:查询性能
    EntityFramework优化:查询WITH(NOLOCK)
    SpringCloud学习笔记:熔断器Hystrix(5)
  • 原文地址:https://www.cnblogs.com/Victory-peng/p/5016862.html
Copyright © 2020-2023  润新知