web前端知识汇总61-80

61、ajax请求的时候get和post方式的区别？

ajax是异步的JavaScript和XML，用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着在不重新加载整个网页的情况下可以对网页的某部分进行局部更新

使用get请求时，参数会在URL中显示，而是用post则不会

使用get发送数据量小不能大于2k，post请求发送数据量大一般默认不受限制

get安全性非常低，post安全性较高（get请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据）

get请求的目的是给予服务器一些参数以便从服务器获取列表，post请求的目的是向服务器发送一些参数

62、特性检测

起初前端工程师们就极力反对浏览器检测，他们认为类似user-agent嗅探的方法不是很好，理由是他并不是一种面向未来的代码，无法适应新版浏览器，更好的做法是使用特性检测，就像这样

f(navigator.userAgent.indexOf("MISE 7")>-1){
    alert("ho");
}
if(document.all){
    alert("ha");
}

第一个if是检测浏览器的特殊名称和版本，第二个if是检测浏览器的特性。UA嗅探能够精确得到浏览器的类型和版本，而特性检测则是去确定浏览器中是否拥有某个对象或支持某个方法

63、请解释jsonp的工作原理，以及他为什么不是真正的ajax

jsonp是json的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于a.com的网页无法与b.com的服务器沟通，而HTML的script元素是一个例外，利用<script>元素的这个开发策略，网页可以得到从其他来源动态产生的json资料，而这种使用模式就是jsonp。用jsonp抓到的资料并不是json而是任意的JavaScript，用JavaScript直译器执行而不是用json解析器解析

jsonp是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的JavaScript，于是我们可以通过script标记来动态加载其他域的资源。例如我们要从域A的页面pageA加载B的数据，那么在B的页面pageB中我已JavaScript的形式声明pageA需要的数据，然后在pageA里用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。jsonp在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的一些函数，所需要的数据会以参数的形式传递给该函数。jsonp易于实现，但是存在一些安全隐患，如果第三方的脚本随意执行，那么他就可以篡改页面内容，截获敏感数据，但是在受信任的双方传递数据jsonp是非常合适的选择。

ajax不是跨域的，而jsonp是一个跨域的，还有就是二者就收参数的形式不一样。

ajax和jsonp其实本质上是不同的东西，ajax的核心是通过XMLHTTPRequest获取非本页内容，而jsonp的核心是动态加载script标签来调用服务器提供的js脚本

说到ajax就会不可避免的面临两个问题，第一个是ajax以何种格式来交换数据，第二个是跨域的需求如何解决，目前的方案是用json来传递数据，用jsonp来跨域。json是一种数据交换格式，jsonp是一种非官方跨域数据交互协议。

64、ajax请求时，如何解释json数据？

使用eval或parse，鉴于安全性考虑，使用parse更靠谱

json是一种轻量级的数据格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时json是JavaScript原生格式，这意味着在JavaScript中处理json数据不需要任何特殊的API或工具包而且效率非常高

基本格式：var jsonData=‘{“data1”:"hello","data2":"world!"}’

调用方法：jsonData.data1,jsonData.data2

json的解析方式一共有两种：eval_r（）和json.parse（）

var jsonData='{"data1":"hello","data2":"world"}';

var evalJson=eval_r('('+jsonData+')');
var jsonParseJson=JSON.parse(jsonData);

这样就把jsonData这个json格式的字符串转换成了json对象

二者的区别在于eval在解析字符串时，会执行该字符串中的代码，这样的后果是相当恶劣的。所以尽可能使用JSON.parse（）方法来解析字符串本身

65、call和apply的区别？

call方法：call（thisObj，object）

调用一个对象的一个方法，以另一个对象替换当前对象

call方法可以用来代替另一个对象调用一个方法

apply方法：apply(thisObject,[argArray])

应用某一个对象的一个方法，用另一个对象替换当前对象

两个的区别在于调用时参数不一样，一个是object另一个必须是array

66、JavaScript的本地对象、内置对象和宿主对象

首先解释宿主环境：一般宿主环境由外壳程序创建与维护，只要能提供js引擎执行的环境都可以称之为外壳程序。如web浏览器，一些桌面应用系统等等。即由web浏览器或是这些桌面应用系统造就的环境即宿主环境

本地对象：独立于宿主环境的ECMAScript实现提供的对象包括：object、function、array、string、Boolean、number、date、regexp、error等简单来说本地对象就是ECMA-262定义的类

内置对象：global和math，根据定义每个内置对象都是本地对象

宿主对象：理解为浏览器提供的对象，所有BOM和DOM都是宿主对象（宿主对象就是执行js脚本的环境提供的对象）例如document、window等

67、描述一下cookies、sessionStorage和localStorage的区别？

sessionStorage和localStorage是HTML5 web storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器之间不必要的来回传递。sessionStorage、localStorage和cookies都是在浏览器端存储的数据。

sessionStorage是在同源同窗口中始终存在的数据，也就是说只要这个浏览器窗口没关即使刷新页面或进入同源的另一个页面，数据依然存在。关闭窗口后sessionStorage被销毁

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

cookies会发送到服务器端另两个不会。cookie的大小是受限制的，并且每次请求一个新页面cookie都会被发送过去无形中浪费了带宽，另外cookie还需要指定作用域也不可以跨域调用。cookie的作用是与服务器进行交互，作为http规范的一部分而存在。

68、data-属性的作用是什么？

data-*就是一种自定义的属性。可以往HTML标签上添加任意以data-开头的属性，这些属性在页面上是不显示的，他不会影响到页面的布局和风格，但它却是可读可写的。如何来读这些数据？JavaScript可以用dataset来获得和设置

<divid="div"data-id="hello">data-</div>
<script>
    varid=document.getElementById('div');
    id.dataset.my='yellow';
    console.log(id.dataset.id);
    console.log(id.dataset.my);
</script>

69、你用过媒体查询吗？或者针对移动端布局过吗？

媒体查询就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和统一媒介的不同条件

@media screen and(max-width:980px){
    body{
        background:#000;
    }  
    #wrap{
        width:90%;
        margin:0auto;
    }
    #content{
        width:60%;
        padding:5%;
    }
    #sidebar{
        width:30%;
    }
    #footer{
        padding:8%5%;
        margin-bottom:10px;
    }
}

70、如何优化网页的打印样式？

<linkrel="stylesheet"type="text/css"media="screen"href="xxx.css">

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是TV，投影仪是projection。打印样式实例如下

<linkrel="stylesheet"type="text/css"media="print"href="yyy.css">

打印样式要注意以下事项：

打印样式表中最好不要有背景图片，因为打印机不能打印CSS中的背景，如果要显示图片请用HTML插入到页面中

最好不要用像素做单位，建议用pt和cm

隐藏掉不必要的内容

少用浮动属性，如果想知道打印效果可以直接在浏览器上选择打印预览

71、在书写高效CSS时会有哪些问题需要考虑？

样式是从右向左解析一个选择器

ID最快

不要用tag和ID选择器合用，会让选择器变慢

后代选择器最慢

ID速度是很快但我们不能都用ID，不应该为了效率牺牲可读性和可维护性

72、如果设计中使用了非标准字体，应如何实现？

一种是用图片代替，另一种是采用在线字库

73、请罗列出你所知道的display属性的全部值

display：none；元素不会被显示

display：block；元素显示为块级

display：inline；元素显示为内联元素

display：inherit；从父元素继承属性

display：inline-block；行内块元素

74、请解释一下relative、fixed、absolute和static元素的区别，请解释一下inline和inline-block的区别

这四个是position的四个属性值

relative：相对定位，通过top、bottom、right、left设置相对其本来的位置进行定位，可以通过z-index进行层级分级

absolute：绝对定位，以谁为对象进行偏移呢？如果他的父对象也定义了position且为relative或absolute时以该父对象为标准进行偏移，否则继续往上找符合条件的父对象。通过top、bottom、right、left定位，可通过z-index进行层级分级

fixed：生成绝对定位元素，相对于浏览器窗口进行定位 z-index进行层级分级

static：默认值，没有定位

inline：此元素会被显示为内联元素，元素前后没有换行

inline-block：行内块元素，就是说将块元素嵌套在内联元素里，这样块元素就可以同行显示

75、解释浏览器如何判断元素是够匹配某个CSS选择器？

先产生一个元素集合，然后从后往前判断：

浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，知道整个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

例如body.ready #wrapper > .lol233先把所有class中的lol233的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素如果元素的父元素id不为wrapper则把元素从集合中删除，再向上，从父元素开始向上找，没有找到一个标签名为body且class为ready的元素则把元素从集合删掉最后集合中剩下的就是匹配的。

76、对盒模型的理解，以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局

盒模型分两种：W3C标准盒模型和IE盒模型

W3C标准盒模型：宽和高不包括margin border和padding

IE盒模型：宽高包括这些；

我们在编写页面代码时应尽量使用标准的W3C盒模型（需要在声明doctype）

77、js继承

js里常用有两种继承：原型链继承（对象间的继承）、类式继承（构造函数间的继承）

要想实现继承可以用js的原型prototype机制或者用apply和call来实现

类式继承是在子类型构造函数内部调用超类型的构造函数

functionSuper(){
    this.colors=["red","blue"];
}
function Sub(){
    Super.call(this);
}

原型链继承：借助已有的对象创建新的对象，将子类的原型指向父类，就相当于加入了父类这条原型链

functionParent(){
    this.name='mike';
}
function Child(){
    this.age=12;
}
Child.prototype=newParent();//child继承parent，通过原型，形成链条

var test=new Child();
alert(test.age);
alert(test.name);

其他继承还有：对象冒充、混合方式

78、你知道哪些针对jQuery的优化方法？

总是从ID选择器开始继承：在jQuery中最快的选择器是ID选择器，因为他直接来自于JavaScript的getElementById方法

在class前使用标签名：在jQuery中第二快的选择器是标签选择器

将jQuery对象缓存起来：不要让相同的选择器在你的代码里多次出现

如果打算在其他函数中使用jQuery对象，那么必须把他们缓存到全局环境中

合理使用冒泡：除非在特殊情况下，否则每一个js事件都会冒泡到父级节点。当我们要给多个元素调用同个函数时用冒泡非常好。

使用$(window).load对一些特效的功能比较合适，等所有元素都下载完成再执行可以减少页面载入时的CPU使用率

压缩JavaScript

尽量用ID代替class

给选择器一个上下文，这样能节省时间提高效率

慎用.live()方法：为新增的DOM元素动态绑定事件，这个方法比较占资源

79、请指出.bind() .live() .delegate()的区别

.bind（）最简单的绑定，jQuery找出所有a标签元素并把alert函数绑定在每个a元素的click事件上

$('a').bind('click',function(){
    alert("click the a");
});

给每个a标签都绑定了一个click事件

.live()将alert函数绑定到document元素上，并使用click和a做参数，任何时候只要有事件冒泡到document节点上，就查看该事件是否是一个click事件以及目标元素是否是a如果是则执行函数，另外还可以被绑定到具体元素而不是document上

live和bind相比好处是不需要在每个元素上再去绑定事件，而只在document上绑定一次就可以了

delegate有点像live但区别在于他不会把所有的event全部绑定到document，而是由你决定把它放在哪里

80、什么是效果队列？

jQuery中有个动画队列机制。当我们对一个对象添加多次动画效果时后添加的动作就会被加入这个动画队列中，等前面的动画完成后再开始执行。可是用户的操作往往都比动画快，如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积影响效果。jQuery中有stop这个方法可以停止当前执行的动画。并且他有两个布尔参，默认值都为false。第一个参数为true时会清空动画队列，第二个参数为true时会瞬间完成当前动画。所以我们经常用obj.stop(true,true)来停止动画