初中级前端面试题整理

自由发挥题------
1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。
2.项目介绍
3.如何看待前端开发?
4.平时是如何学习前端开发的?
5.未来三到五年的规划是怎样的?

初级面试题------
第一题、谈谈你对web标准的理解
WEB标准不是某一个标准,而是一系列标准的集合。
网页主要由三部分组成:结构,表现和行为
1.结构(Structure)
结构化标准语言主要包括HTML和XHTML以及XML,在页面body里面我们写入的标签都是为了页面的结构
2.表现(Presentation)
表现标准语言主要包括CSS(Cascading Style Sheets)层叠式样式表,通过CSS样式表,W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言,通过CSS样式可以是页面的结构标签更具美感。
3.行为(Behavior)
行为是指页面和用户具有一定的交互,同时页面结构或者表现发生变化,标准主要包括对象模型(如W3C DOM)、ECMAScript并要求这三部分分离。
2、对W3C的认识
W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范:包含如下几点
1.对于结构的要求
1)标签字母要小写
2)标签要闭合
3)标签不允许随意嵌套
2.对于css和js的要求
1)尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。
2)样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版。
3)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。
3、WEB分为三个历史阶段(------答案是个人理解,不一定正确)
第一阶段、图文展示,通过html、css展示静态的文档,单一时代
第二阶段、随着js、ajax等新技术的出现动态交互,有实际的交互行为,随后jquery、bootstrap等框架提供了丰富的展现形式与交互方式,让WEB前端蓬勃发展
第三阶段、通过node.js发展出的三大单页面引擎框架,vue.js、angular.js、react.js;三大框架的最为核心的特色是:MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。这些新技术让WEB技术逐渐进入独立并渐入巅峰。

并列第一题、什么是盒子模型?
在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

第二题、CSS 选择器有哪些?
1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( *)
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li: nth - child)

5种以上合格

第三题、清楚浮动的方法?
1.父级div定义 height 
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。 
优点:简单、代码少、容易掌握 
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
2,结尾处加空div标签 clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度 
优点:简单、代码少、浏览器支持好、不容易出现怪问题 
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
3,父级div定义 伪类:after 和 zoom
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题 
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等) 
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持
4,父级div定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 
优点:简单、代码少、浏览器支持好 
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
两种以上合格

第四题、样式优先级算法如何计算?
优先级
优先级就近原则,同权重情况下样式定义最近者为准,载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高

必答中,这个答不出来基本GG

第五题、 CSS3新增伪类有哪些?
p:first-of-type 选择属于其父元素的首个<p> 元素的每个<p>元素。
p:last-of-type 选择属于其父元素的最后 <p>元素的每个<p>元素。
p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。
p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
4种以上合格

第六题、讲解下relative与absolute的使用区别。
relative:定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。

absolute:定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,则元素相对于根元素即html元素定位。设置了absolute的元素脱离了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据位置。

坑点:假如absolute不设top,botton,right,left等方位位置值,元素会展现在什么位置?有什么特性?
展现在它按正常文档渲染时出现的位置,但不会占用空间

第七题. Javascript中的定时器有哪些?他们的区别及用法是什么?
setTimeout 只执行一次
setInterval 会一直重复执行

第八题. box-sizing常用的属性有哪些?分别有什么作用?
属性值
· box-sizing:content-box
· box-sizing:border-box  
· box-sizing:inherit

content-box
· 这是box-sizing的默认属性值
· 是CSS2.1中规定的宽度高度的显示行为
· 在CSS中定义的宽度和高度就对应到元素的内容框
· 在CSS中定义的宽度和高度之外绘制元素的内边距和边框

border-box
· 在CSS中微元素设定的宽度和高度就决定了元素的边框盒
· 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制
· CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

必答中,这个答不出来基本GG

第九题、三个盒子,左右定宽,中间自适应有几种方法
第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法。
代码如下:
<div style="width:100%; margin:0 auto;"> 
   <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div>
   <div style="width:150px; float:left; background:#6FF">这是左侧的内容 固定宽度</div>
   <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容,自适应宽度</div>
</div>

第二种:左右两侧采用绝对定位 中间同样采用margin-left margin-right方法:

第三种负的margin
使用这种方法就稍微复杂了一些了,使用的是负的margin值,而且html标签也增加了,先来看其代码吧:
<div id="main">
 <div id="mainContainer">main content</div></div><div id="left">
 <div id="leftContainer" class="inner">left content</div></div><div id="right">
 <div id="rightContainer" class="inner">right</div></div>
#main {
 float: left;
 width: 100%;
}

#mainContainer {
 margin: 0 230px;
 height: 200px;
 background: green;
}

#left {
 float: left;
 margin-left: -100%;
 width: 230px} 
#right {
 float: left;
 margin-left: -230px;
 width: 230px;

#left .inner,
#right .inner {
 background: orange;
 margin: 0 10px;
 height: 200px;
}

两种以上合格

第十题、请简要描述margin重合问题,及解决方式
1.同向margin的重叠:
1图片的margin-top与3图片的margin-top发生重叠,2图片的margin-bottom与3图片的margin-bottom发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定;如果其中一个出现负值,则由最大的正边距减去绝对值最大的负边距,如果没有最大正边距,则由0减去绝对值最大的负边距。
解决同向重叠的方法:
(1)在最外层的div中加入overflow:hidden;zoom:1
(2)在最外层加入padding:1px;属性
(3)在最外层加入:border:1px solid #cacbcc;
2.异向重叠问题:
1图片的margin-bottom与2图片的margin-top发生重叠,这时候重叠之后的margin值由发生重叠两图片的最大值的决定的。
解决异向重叠问题:
float:left(只能解决IE6浏览器中的异向重叠问题,可以解决IE8以上、chorme、firefox、opera下的同向重叠问题)


第十一题、原生js怎样添加、移除、移动、复制、创建和查找节点?
 1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性

可用jquery里面的方法代替

第十二题、h5新特性
HTML5新特性 —— 新特性
(1)新的语义标签和属性
(2)表单新特性
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API

4种以上合格

第十三题、jquery中$.get()提交和$.post()提交有区别吗?
相同点:都是异步请求的方式来获取服务端的数据;
异同点:
1、请求方式不同:$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
2、参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。
3、数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多
4、安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

第十四题、CSS引入的方式有哪些? link和@import的区别是? 
CSS引入的方式包括内联 内嵌 外链 导入
link和@import的区别是 :
①link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
②页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
③import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
④后者优先级更高

第十五题、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?介绍一下你对浏览器内核的理解
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opera(blink)
对内核的理解:
主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
①渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
②JS引擎:解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

第十六题、块级元素水平垂直居中的方法有哪些   ---------这个问题可以早点问
让div等块级元素水平和垂直都居中,即永远处于屏幕的正中央,当我们做如登录块时非常有用!
 实现一、原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。
   CSS代码:
    .mycss{ 
       width:300px;  
       height:200px;  
       position:absolute;  
       left:50%;  
       top:50%;  
       margin:-100px 0 0 -150px 
    }


 实现二原理:利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。
   CSS代码:
    .mycss{
        position: absolute;
        left: 0px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 200px;
        width: 300px;
        background:red;
    }

实现三jQuery或者js实现水平和垂直居中
 原理:jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS,获取div等块级元素的左、上的边距偏移量,边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成,就是每次改变窗口大 小时,都要执行设置div等块级元素的CSS。
jquery代码:
$(window).resize(function(){
    $(".myblock").css({
        position: "absolute",
        left: ($(window).width() - $(".myblock").outerWidth())/2,
        top: ($(window).height() - $(".myblock").outerHeight())/2     
    });        
});
此外在页面载入时,就需要调用resize()方法
$(function(){
    $(window).resize();
});

实现四、css3 移动实现,移动端最佳选择
.mycss{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%);
}

实现五、通过display:inline-block; text-align:center; vertical-align:middle (最佳实现方式)


第十七题、bootstrap响应式实现的原理  (这个可以早点问)
百分比布局+媒体查询 (css 宽度设置百分比+ @media 根据终端不同屏幕宽度定义不同样式)


中级面试题
第一题、浏览器是如何渲染页面的?
渲染的流程如下:
1.解析HTML文件,创建DOM树。
   自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
3.将CSS与DOM合并,构建渲染树(Render Tree)
4.布局和绘制,重绘(repaint)和重排(reflow)

第二题、js的基本数据类型
JavaScript中有五种基本数据类型,它们分别是:undefined,null,boolean,number,string。
还有一种复杂数据类型-object。 

第三题、JavaScript中如何检测一个变量是一个String类型?请写出函数实现
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String


第四题、如何理解闭包?
1、定义和用法:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量,如果返回的这个函数在外部被执行,就产生了闭包。
2、表现形式:使函数外部能够调用函数内部定义的变量。
3、实例如下:
(1)、根据作用域链的规则,底层作用域没有声明的变量,会向上一级找,找到就返回,没找到就一直找,直到window的变量,没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。
var count=10;   //全局作用域 标记为flag1
function add(){
    var count=0;    //函数全局作用域 标记为flag2
    return function(){
        count+=1;   //函数的内部作用域        alert(count);
    }
}var s = add()
s();//输出1
s();//输出2
4、变量的作用域
要理解闭包,首先必须理解Javascript特殊的变量作用域。
变量的作用域分类:全局变量和局部变量。
特点:
1、函数内部可以读取函数外部的全局变量;在函数外部无法读取函数内的局部变量。
2、函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!
5、使用闭包的注意点
1)滥用闭包,会造成内存泄漏:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2)会改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

第五题、sessionStorage 、localStorage 和 cookie 之间的区别(常见)
共同点:用于浏览器端存储的缓存数据
不同点:
(1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;
        web storage,会将数据保存到本地,不会造成宽带浪费;
(2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;
(3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;

        sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;
(4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

第六题、ajax的特点与ajax原理
什么是ajax?
ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。

第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器,比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数

第七题、常见的HTTP状态码
2开头 (请求成功)表示成功处理了请求的状态代码。
200   (成功)  服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。 
201   (已创建)  请求成功并且服务器创建了新的资源。 
202   (已接受)  服务器已接受请求,但尚未处理。 
203   (非授权信息)  服务器已成功处理了请求,但返回的信息可能来自另一来源。 
204   (无内容)  服务器成功处理了请求,但没有返回任何内容。 
205   (重置内容) 服务器成功处理了请求,但没有返回任何内容。
206   (部分内容)  服务器成功处理了部分 GET 请求。
3开头 (请求被重定向)表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。
300   (多种选择)  针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。 
301   (永久移动)  请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
302   (临时移动)  服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
303   (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
304   (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。 
305   (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。 
307   (临时重定向)  服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
4开头 (请求错误)这些状态代码表示请求可能出错,妨碍了服务器的处理。
400   (错误请求) 服务器不理解请求的语法。 
401   (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。 
403   (禁止) 服务器拒绝请求。
404   (未找到) 服务器找不到请求的网页。
405   (方法禁用) 禁用请求中指定的方法。 
406   (不接受) 无法使用请求的内容特性响应请求的网页。 
407   (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
408   (请求超时)  服务器等候请求时发生超时。 
409   (冲突)  服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 
410   (已删除)  如果请求的资源已永久删除,服务器就会返回此响应。 
411   (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。 
412   (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。 
413   (请求实体过大) 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。 
414   (请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法处理。 
415   (不支持的媒体类型) 请求的格式不受请求页面的支持。 
416   (请求范围不符合要求) 如果页面无法提供请求的范围,则服务器会返回此状态代码。 
417   (未满足期望值) 服务器未满足"期望"请求标头字段的要求。
5开头(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。
500   (服务器内部错误)  服务器遇到错误,无法完成请求。 
501   (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。 
502   (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。 
503   (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。 
504   (网关超时)  服务器作为网关或代理,但是没有及时从上游服务器收到请求。 
505   (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

第八题、如何进行网站性能优化
1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
  总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
  前端优化的途径有很多,按粒度大致可以分为两类,
第一类是页面级别的优化,例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;
第二类则是代码级别的优化,例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外,本着提高投入产出比的目的,后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
优化细分
1. JavaScript 压缩和模块打包
2. 按需加载资源
3. 在使用 DOM 操作库时用上 array-ids
4. 缓存
5. 启用 HTTP/2
6. 应用性能分析
7. 使用负载均衡方案
8. 为了更快的启动时间考虑一下同构
9. 使用索引加速数据库查询
10. 使用更快的转译方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用于未来的一个建议:使用 service workers + 流
13. 图片编码优化
5个以上合格

第九题、JS哪些操作会造成内存泄露 (这个比较高级,反正我不知道)
1.意外的全局变量引起的内存泄露
function leak(){  
  leak="xxx";//leak成为一个全局变量,不会被回收  
}
2.闭包引起的内存泄露
3.没有清理的DOM元素引用
4.被遗忘的定时器或者回调 
5.子元素存在引起的内存泄露

第十题、iframe有哪些缺点?
1.iframe会阻塞主页面的Onload事件,搜索引擎的检索程序无法解读这种页面,不利于SEO;
2.iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。

第十一题、Javascript有哪些内置对象?javascript的typeof返回哪些数据类型?
内置对象:只有Math和Global(在浏览器环境中,Global就是Window)
返回类型值:object number function boolean undefind string

第十二题、this对象的理解
1.this总是指向函数的直接调用者(而非间接调用者);
2.如果有new关键字,this指向new出来的那个对象;
3.在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window;


第十三题、解释jsonp的原理,以及为什么不是真正的ajax
1.Ajax与JSONP这两种技术看起来很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jQuery等框架都把JSONP作为Ajax的一种形式。
2.实际上Ajax与JSONP有着本质上的不同。Ajax的核心是通过XMLHttpRequest获取数据,而JSONP的核心则是动态添加<script>标签来调用服务器提供的js文件。
3.Ajax与JSONP的区别也不在于是否跨域,Ajax通过服务端代理也可以跨域,JSONP也可获取同源数据


第十四题、对<meta></meta>标签有什么理解
什么是meta标签?
引自下W3school的定义说明一下。
元数据(metadata)是关于数据的信息。
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
其实对上面的概念简单总结下就是:<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
meta的作用
meta里的数据是供机器解读的,告诉机器该如何解析这个页面,还有一个用途是可以添加服务器发送到浏览器的http头部内容


第十五题、ES6的了解
1.新增模板字符串(为JavaScript提供了简单的字符串插值功能)
2.箭头函数(操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。)、
3.for-of(用来遍历数据—例如数组中的值。)我们都知道for in 循环用于遍历数组,类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。
4.arguments对象可被不定参数和默认参数完美代替。
5.ES6将promise对象纳入规范,提供了原生的Promise对象。Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,其实就是在应用promise模式。
6.增加了let和const命令,用来声明变量。
7.增加了块级作用域。let命令实际上就增加了块级作用域。
8.ES6规定,var命令和function命令声明的全局变量,属于全局对象的属性;let命令、const命令、class命令声明的全局变量,不属于全局对象的属性。。还有就是引入module模块的概念
9.类的支持
  ES6中添加了对类的支持,引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。
10.Map,Set 和 WeakMap,WeakSet
这些是新加的集合类型,提供了更加方便的获取属性值的方法,不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时,在进行属性值添加与获取时有专门的get,set 方法

转载于:https://my.oschina.net/dreambreeze/blog/2253649

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值