一起自学前端开发!

史上前端面试最全问答(附答案)

来源:网络    更新时间:2017-09-04 13:46:42    编辑:前端网    浏览:1254

史上前端面试最全知识点(附答案)

一.html & js & css

1.AMD和CMD是什么?它们的区别有哪些?

AMD和CMD是二种模块定义规范。现在都使用模块化编程,AMD,异步模块定义;CMD,通用模块定义。AMD依赖前置,CMD依赖就近。CMD的API职责单一,没有全局require,AMD的一个API可以多用。

2.web开发常见的漏洞。

XSS(跨站脚本攻击):其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码,当其它用户浏览该网站时,这段HTML代码会自动执行,从而达到攻击的目的。如,盗取用户Cookie、破坏页面结构、重定向到其它网站等。

SQL注入:用户可以提交一段数据库查询代码,根据程序返回的结果,获得某些他想得知的数据,这就是所谓的SQL Injection,即SQL注入。

3.cookie和session

当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,

都纪录下来。当下次你再光临同一个网站,WEB 服务器会先看看有没有它上次留下的 Cookie 资料,有的话,就会依据 Cookie
里的内容来判断使用者,送出特定的网页内容给你。
 当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识
(称为session id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来
使用(检索不到,会新建一个),如果客户端请求不包含session id,则为此客户端创建一个session并且生成一个与此session相
关联的session id

4.MVC BFC

mvc是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。MVC对应Html,CSS,js。

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。流体特性:块状水平元素,如div元素(下同),在默认情况下(非浮动、绝对定位等),水平方向会自动填满外部的容器;BFC元素特性表现原则就是,内部子元素不会影响外部的元素。

5.HTTP状态码:

 1.消息  2.成功 3.重定向 4.请求错误 5.服务器错误 304:响应禁止包含消息体,如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。 305:被请求的资源必须通过指定的代理才能被访问。 400:语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求,或者请求参数有误。 403:服务器已经理解请求,但是拒绝执行它。 404:请求失败,请求所希望得到的资源未被在服务器上发现。 500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器端的源代码出现错误时出现。

6.HTML 5 增加了一项新功能是 自定义数据属性 ,也就是  data- 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放。
<div id = "user" data-uid = "12345" data-uname = "愚人码头" > </div>

// 使用getAttribute获取 data- 属性
var user = document . getElementById ( 'user' ) ;
var userName =user . getAttribute ( 'data-uname' ) ; // userName = '愚人码头'
var userId = user . getAttribute ( 'data-uid' ) ; // userId = '12345'
 
使用setAttribute设置 data- 属性
user . setAttribute ( 'data-site' , 'http://www.css88.com' ) ;

7.使div水平垂直都居中

知道DIV的自身长度和宽度,其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。[style="position: absolute;top:50%;left: 50%"]只能实现DIV离左边框和上边框的距离为屏幕的物理尺寸的一半,忽略了DIV本身的长度和宽度,所以不会实现DIV的水平垂直居中。
不知道DIV的本身长度和宽度时:

        $(window).load(function(){
            $(".mydiv").css({                position: "absolute",                left: ($(window).width() - $(".mydiv").width())/2,                top: ($(window).height() - $(".mydiv").height())/2
            });
        });

8.Call()和apply()
构造函数:

 function showname(){    this.name="zygg";
}var qq=new showname();console.log(qq.name);

我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域,可以改变函数体内部 this 的指向:

      window.firstName = "diz";        window.lastName = "song";        var myname = { firstName: "my", lastName: " " };        function show() {        console.log("Hello " + this.firstName + " " +this.lastName, " glad to meet you!");
        }
        show();
        show.call(myname);//如果不这样写,对象myname是没法调用函数 show()的。

二者作用类似,区别就是参数不同:
call(thisObj, )
apply(thisObj,[argArray])

9.动态节点绑定事件

Live() delegate() bind()【处理文档中的静态部分,不用于。。。】
delegate()和live()作用类似,附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。但二者参数不一样。
$(selector).delegate(childSelector,event,function)

$(selector).live(event,function)

$("div").delegate("p","click",function(){

$(this).slideToggle();

});//只有DIV内的p元素会被绑定事件。
$("p").live("click",function(){

$(this).slideToggle();

});//文档内所有p元素都会被绑定事件
bind()可以向元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数。
$(selector).bind(event,function)
$("button").bind("click",function(){

$("p").slideToggle();

});//bind【捆绑】

10.Position的四个属性详解

Position的四个属性:static,fixed,absolute,relative
首先,static,是position属性的默认值,也就是无特殊定位,遵循html定位规则。
然后,fixed,是相对于浏览器窗口进行定位,不随页面的上下翻动而移动,比如固定在页面末端的二维码等。
下来,就是absolute,它是相对于它的第一个父元素进行定位,如果你想让这个div#demo里的一个子div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。 此时,它的第一个父元素就是id=demo的div;否则它的父元素就是body,这样它的位置在页面中保持不变,但是随着页面移动会发生变化(区别fixed)。
最后,relative,relative是相对于自己来定位的,相对于其正常位置进行定位。例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。 
P.S:采用左列left浮动,右列不浮动,采用margin-left定位的方式。

11.理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

CSS盒子模式
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。而且填充只有宽度属性。

12.区别 和mouseover

是Event 对象的一个属性,Mouseover是jQuery中的一个事件 。
推荐使用jQuery,直接执行方法$("#id").mouseover(function(){});
完全使用js则是如下写法:document.getElementById("id"). =function(){};
document.getElementsByTagName("body")[0].style.backgroundColor="pink”; //注意不要忘了style,深刻理解DOM的本质。

13.一个简单的AJAX 的请求

<  type="text/ ">function load Doc(){var  http;if (window. HttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   http=new  HttpRequest();
  }else
  {// code for IE6, IE5
   http=new ActiveX ("Microsoft. HTTP");
  }
 http. =function()  {  if ( http.readyState==4 &&  http.status==200)
    {    document.getElementById("myDiv").innerHTML= http.responseText;
    }
  }
 http.open("GET","/ajax/demo_get.asp",true);
 http.send();
}</ ></head><body><h2>AJAX</h2><button type="button"  ="load Doc()">请求数据</button><div id="myDiv"></div></body>

14. 的addEventListener()及attachEvent()区别分析

addEventListener()和attachEvent()是一个侦听事件并处理相应的函数,
可以动态的为网页内的元素添加一个或多个事件。可以将事件和元素分离,这样可编辑性就高了。
addEventListener的使用方式: 
target.addEventListener(type, listener, useCapture); 
target: 文档节点、document、window 或 HttpRequest。 
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 
listener :实现了 EventListener 接口或者是 中的函数。 
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 
而attachEvent()则是,target.attachEvent(type, listener); 

注意:attachEvent()中的type: 字符串,事件名称,含“on”,比如“ ”、“ ”、“ ”等。

15.关于事件监听

 比如,<button  ='A();' /> 就表示"你正在监听 click 事件", 而事件监听器就是我们为了要响应这个事件而写的函数。至于事件监听机制了,就是冒泡和捕获。

16.事件监听机制(冒泡和捕获)

事件捕获:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
假设一个元素div,它有一个下级元素p。
<div>
  <p>元素</p>
</div>
这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢? 
如div先触发,这就叫做事件捕获。
如p先触发,这就叫做事件冒泡。
IE只支持事件冒泡,其他主流浏览器两种都支持。
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。
事件的传播是可以阻止的:
? 在W3c中,使用stopPropagation()方法
在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~
propagation 【传播,蔓延】
3.阻止事件的默认行为,例如click a标签后的跳转~
? 在W3c中,使用preventDefault()方法;
? 在IE下设置window.event.returnValue = false;

17.DNS的工作原理(递归和迭代)(应用层)

DNS的工作原理及过程分下面几个步骤:
        第一步:客户机提出域名解析请求,并将该请求发送给本地的域名服务器。
        第二步:当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。 
        第三步:如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域) 的主域名服务器的地址。
        第四步:本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址。
        第五步:重复第四步,直到找到正确的纪录。
        第六步:本地域名服务器把返回的结果保存到缓存,以备下一次使用,同时还将结果返回给客户机。

18.什么是DOM事件处理程序?

     首先要理解什么是DOM?Dom是针对HTML文档的一个API。什么是事件流?事件流分为:事件冒泡(IE的事件流)和事件捕获。事件冒泡就是由最具体的元素开始接收,然后逐级向上;事件捕获就是由不太具体的元素开始接收,逐级向下,最具体的元素最后才接收到事件。
DOM事件处理程序分为DOM0级、DOM2级。DOM0级具有简单,跨浏览器的优势,它是把函数赋值给一个事件的处理程序属性。例如:btn.onlick=function(){。。。};DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作。addEventListener()和removeEventListener()。它们都接收三个参数,要处理的事件名、作为事件处理程序的函数和布尔值。布尔值为true表示在捕获阶段调用事件处理程序,布尔值为false是在冒泡处调用。注意:事件名要去掉“on”。通过addEventListener()添加的事件,只能由removeEventListener()删除。IE存在兼容问题,可以用attachEvent()添加事件和detachEvent()删除事件。接收两个参数,事件处理程序的名称和函数。注意:事件名此时要加”on”。

19.如果给一个元素同时绑定两个事件,会怎么样?

    Dom 0级和Dom 2级都可以给一个元素添加多个事件,Dom 0级的每个事件只支持一个事件处理程序,如果绑定同一个事件,那么后边的那个事件,函数会覆盖掉前边的那个事件函数。Dom2级可以添加多个事件处理程序,他们会按照添加的顺序触发。

20.深入理解闭包

要理解闭包,首先必须理解 特殊的变量作用域。我的理解是,闭包就是能够读取其他函数内部变量的函数。
示意图:

既然函数b可以读取函数a中的局部变量,那么只要把b作为返回值,我们不就可以在a外部读取它的内部变量了吗!

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

来自于:http://www.jb51.net/article/24101.htm

21.jQuery源码分析:

?选择器 Sizzle引擎 回调对象 - Callbacks 事件绑定 - 绑定设计
DOM操作方法与核心 Ajax - 整体结构
?选择器 Sizzle引擎:个人认为,sizzle选择器是增强版的querySelectorAll 函数:返回指定元素节点的子树中匹配selector的节点集合,采用的是深度优先预查找;如果没有匹配的,这个方法返回空集合) 

22.设计模式:

一共有23种设计模式
1.观察者模式
2.监听模式

  1. Factory Method(工厂方法):定义一个用于创建对象的接口,让子类决定实例化哪一个类。就行构造函数

  2. Abstract Factory(抽象工厂):。。。

  3. Prototype(原型):当要实例化的类是在运行时刻指定时,例如,通过动态装载。

    ......

23.CSS框架:

YUI、JQuery、Prototype,bootstrap。

24.几个前端框架的区别:

jQuery 
核心js只有50K,小而精,占用带宽小,侧重于对js dom编程。有灵活便捷的Ajax请求和回调操作。
ExtJS 
一整套带有UI的js库,封装得很多,核心js就600多K,这么大的东西门户网站当然就别想了,里面的效果当然也不会运用到门户网站,所以它是专门为管理系统而生的。
3、YUI 
或者是类似于网盘应用这种东东。 
4.Dojo 
Dojo是功能最为强大的 框架,刻意提醒一下:功能最强大。所以它几乎包含了所有你可能想要用到的东西。)。 Dojo更适合企业应用和产品开发的需要,
5、Prototype 
最成熟的。但个人认为可以被Jquery取代。两者相似度也比较高。

25.说说float和position

float:none|left|right|inherit
Inherit:规定应该从父元素继承 float 属性的值。

float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局!在局部可能会用到position进行定位!既然是布局,就用float好,这个我比较常用。这个浮动是可以清除的,一般不会影响整体布局。 而position,定位,是不受约束的,这个貌似都谈不上布局了,一般要是做什么特殊的定位或者浮动层的时候,可以考虑使用!float会影响后面的元素,而position不会影响后面的元素。

26.清除浮动:

父级div定义 height,父级div手动定义height,就解决了父级div无法自动获取到高度的问题。 
结尾处加空div标签 clear:both

父级div定义 overflow:hidden /auto

27.前端性能优化

①对于页面来说:尽量减少DOM元素的数量

              减少 的数量
              减少http的请求次数
              提前加载

②对于CSS来说:将样式表置顶

使用 代替@important

  区别1: 引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
  区别2: 是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。 支持定义RSS(简易信息聚合).
区别3: 支持使用 控制DOM去改变样式;而@import不支持。

③对于JS来说: 将脚本置底

              使用外部JS和CSS文件              精简JS和CSS文件,去除重复脚本
 目前,前端性能测试的执行工具也有很多,比如YSlow,Page Speed,dynaTrace AJAX Edition,webload等等。

28.HTML语义化

就是当你写html时,要按照人们的思考逻辑写。不但要自己能看懂,也要让别人也能看懂,不要让别人觉得你的代码很乱。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。

语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。

语义 Web 技术有助于利用基于开放标准的技术,从数据、文档内容或应用代码中分离出意义。

29.可以谈谈自己对SEO和 和keywords堆砌问题。

30.说说jsonp,getJSON(),get ():

Jsonp(解决跨域)

一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

因为,< > 元素的这个开放策略。

getJSON():

所以getJSON和ajax的方式(实际就是jsonp)想比较,也就是callback函数一个是自动生成的函数名,一个是手工指定的函数名。
get ():

客户端:

Tag标签标签:
						无标签  
						

评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜