前端笔试（二）

阿里

AJAX跨域

设置 async：true即异步执行，设置async:false即同步执行

jquery中ajax处理跨域的三大方式   http://www.jb51.net/article/77470.htm

ajax本身不可以跨域，遇到跨域，用JSONP，即添加dataType:'jsonp'     http://www.cnblogs.com/sunxucool/p/3433992.html

比较一下json与jsonp格式的区别：

json格式：

{
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
}

jsonp格式：

callback({
    " message ": " 获取成功 " ,
    " state ": " 1 " ,
    " result ":{ " name ": " 工作组1 ", " id ": 1, " description ": " 11 " }
})

jsonp比json多了个callback

jsonp方法是一种非官方方法，只支持GET方式，不如POST方式安全。即使使用jQuery的jsonp方法，type设为POST，也会自动变为GET

官方方法：通过设置Access-Control-Allow-Origin来实现跨域访问        http://blog.csdn.net/fdipzone/article/details/46390573/  

ajax用JSON来传数据，靠JSONP来跨域   http://kb.cnblogs.com/page/139725/

JSON是一种数据交换格式，描述信息的格式

JSONP是一种非官方跨域数据交互协议，信息传递双方约定的方法

凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>

如何终止正在在发送的ajax请求   http://www.cnblogs.com/siqi/archive/2012/12/02/2798093.html

服务器支持跨域   http://blog.csdn.net/james_wade63/article/details/50772041

跨域是指html文件所在的服务器与ajax请求的服务器是不同的ip+port

跨域  CORS(跨域资源共享，Cross-Origin Resource Sharing)

http://blog.csdn.net/suhenhappy/article/details/18043241

代理的方法    http://www.jb51.net/article/80881.htm

xhr2   http://www.th7.cn/web/html-css/201502/82375.shtml

地址栏hash   http://www.tuicool.com/articles/6neUbeY    锚点

浏览器的同源策略

  http://www.cnblogs.com/net2012/p/3481993.html

同源策略规定：不同域的客户端脚本在没有明确授权的情况下，不能读写对方的资源

同域要求两个站点同协议、同域名、同端口

客户端脚本指JS、ActionScript（Flash的脚本语言）、JS与ActionScript都遵循的ECMAScript脚本标准

HTTP请求头里的Referer（表示请求来源）只可读

同源策略中的资源指Web客户端的资源

window.postMessage  http://www.webhek.com/window-postmessage-api/

window.postMessage功能是允许程序员跨域在两个窗口/frames间发送数据信息。类似AJAX，但是在两个客户端之间通信

js设置document.domain实现跨域的注意点分析   http://www.3lian.com/edu/2015/05-22/215443.html

meta viewport

http://blog.csdn.net/xiebaochun/article/details/17579107

主要参数有下面几个：

maximum-scale：用户可以缩放的最大值

minimum-scale：用户可以缩放的最小值

initial-scale：viewport的默认缩放大小

width：固定viewport的宽度

height：固定viewport的高度

user-scalable：是否允许用户缩放

移动端和桌面端不一样，它有2个视口(viewport)：可见视口(visual viewport)和 布局视口(layout viewport).

关于2者的区别，stack overflow有这样的解释：

想象下现在有一张不会改变尺寸和形状的大的图片，你手里拿着一个中空的框子(想象下砸空你手机的屏幕)，透过它你可以看到这张图片，并且这个框框的周围是用不透明的材料做成的，你只能通过中间的洞去看这张图片。你可以移动这个框子，靠近自己的眼睛的话可以看到更多的图片区域，也可以使它远离自己的眼睛，从而只看到这张图片的一部分小区域。

那张不可改变形状和尺寸的图片=布局视口(layout viewport)

你手中的中空的框子=可见视口(visual viewport)

也就是说我们在移动端用手指来缩放屏幕，其实改变的是可见视口(visual viewport)的尺寸，而布局视口(layout viewport)总是保持不变。

箭头函数   http://www.jb51.net/article/50770.htm

简明扼要，禁用new操作，this不可变，没有arguments对象

搜狗

页面跳转

window.location.assign和window.location.href区别  https://blog.tanteng.me/2015/06/window-location-assign-href/

window.location.assign(url)和window.location.href=url都是实现跳转到网页，但assign会添加记录到浏览历史，点击后退可以返回之前页面

location.assign 与 location.replace的区别    http://blog.sina.com.cn/s/blog_694c144f01016e15.html

location.replace(url)通过加载URL指定的文档替换当前文档，替换当前窗口页面，前后两个页面共用一个窗口，没有后退返回上一页

window.location和window.open的区别

window.location="url"跳转后没有后退功能

window.open(url)要新的窗口打开连接

jQuery

jQuery选择器总结     http://www.cnblogs.com/onlys/articles/jQuery.html

层叠选择器、基本过滤选择器、内容过滤选择器、可视化过滤选择器、属性过滤选择器、子元素过滤选择器、表单元素选择器、表单元素过滤选择器

ajax() 方法通过 HTTP 请求加载远程数据。$.ajax(opts);opts为json格式，常见参数url、type、data等。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。$(selector).load(URL,data,callback);

    必需的 URL 参数规定您希望加载的 URL。

    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

    可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

    必需的 URL 参数规定您希望请求的 URL。

    可选的 callback 参数是请求成功后所执行的函数名。

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

jQuery.getScript(url,success(response,status));

delete是一种post请求；

empty()是清空该匹配元素的内容，但是该匹配元素还是存在；

remove()是清空该匹配元素的内容，而且该匹配元素也会同时被清空；

$(A).append(content|fn) 在匹配的元素A内部结尾追加内容，父子关系

$(A).appendTo(B) 将A的内容追加到B内部结尾，父子关系

$(A).prepend(content) 在匹配的元素A内部的开头插入content内容

$(A).prependTo(B) 将匹配到的A元素追加到B的开头

$(A).after(content) 在匹配的元素A之后插入内容content，兄弟关系

$(A).before(content) 在匹配的元素A之前插入内容content

$(A).insertAfter(B) 将A的内容追加到B之后，兄弟关系

$(A).insertBefore(B) 将A的内容追加到B之前

其他

CSS Display(显示) 与 Visibility（可见性）   http://www.runoob.com/css/css-display-visibility.html

    visibility:hidden 隐藏的元素仍需占据未隐藏前一样的空间

    display:none 隐藏的元素原来占用的空间从页面布局中消失

Form表单标签的Enctype属性的作用及应用示例介绍   http://www.jb51.net/web/165444.html

    Enctype是指定将数据回发到服务器时浏览器使用的编码类型

    application/x-www-form-urlencoded： 在发送前编码所有字符（默认）。这是标准的编码格式。 不能用于文件上传

    multipart/form-data： 不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。 能完整的传递文件数据，是上传二进制数据上去

    text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

图片按钮   http://blog.csdn.net/evangel_z/article/details/7069425

table与td边框重叠问题   http://blog.csdn.net/dhj2020/article/details/42564289

 

避免表单重复提交与等待页面   http://www.jb51.net/article/41825.htm

display:table-cell 

HTML5自定义属性对象Dataset   http://www.zhangxinxu.com/wordpress/2011/06/html5自定义属性对象dataset简介/

data-前缀设置自定义属性，进行一些数据的存放

阻止a标签默认事件   http://blog.csdn.net/judas_jia/article/details/51166406

stopPropagation阻止JS事件冒泡

preventDefault阻止a标签默认行为的发生

event.returnValue返回窗口值

30类CSS选择器  http://www.oschina.net/news/57107/30-css-selector-you-should-remeber

HTTP/2.0 相比1.0有哪些重大改进   https://www.zhihu.com/question/34074946      http://www.infoq.com/cn/news/2015/02/https-spdy-http2-comparison/

    1、请求和响应头的大小

    http/2.0可以使用头部压缩，来提示性能

    2、响应消息小

    3、TCP连接数和页面加载时的SSL握手请求数

    http/2.0通过使用多路复用技术在单独的TCP和SSL连接上支持并发，通过在一个连接上一次性发送多个请求来发送或接收数据

    4、页面加载时间短

    5、服务器推送（Server Push）是一种在客户端请求之前发送数据的机制，服务器可以对客户端的一个请求发送多个响应

CSS选择器优先级   http://www.cnblogs.com/wangfupeng1988/p/4285251.html

ICE id100 class10 element 1

HTTP响应头信息和请求头信息   http://blog.csdn.net/mm2223/article/details/8089645/

http://www.cnblogs.com/smyhvae/p/4005034.html

Cache-Control 通用头 指定请求和响应遵循的缓存机制

Expires实体头 应答头 应该在什么时候认为文档已经过期，从而不再缓存它

Last-Modified实体头 应答头 指定服务器上保存内容的最后修订时间

Etag实体头 一个对象(URL)的标志值，供WEB服务器判断一个对象是否改变

hasOwnproperty方法能返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性，该属性必须为对象本身的属性。

语法 object.hasOwnProperty(propertyName);

substr,substring,indexOf,lastIndexOf   http://www.jb51.net/article/44921.htm

js中contains  判断元素包含关系    http://www.kuqin.com/shuoit/20131123/336498.html

DOMElement.contains(DOMNode);

charCodeAt()  返回一个数字，表示给定索引处的字符的Unicode值    http://www.jb51.net/article/67338.htm

语法：string.charCodeAt(index);

charAt()  http://www.jb51.net/article/46938.htm

返回指定位置的字符

语法：stringObject.charAt(index);

cookie    http://www.nowcoder.com/ta/front-end-interview/review?tpId=10&tqId=11077&query=&asc=true&order=&page=1

    优点：在持久保存客户端数据提供了方便，分担了服务器存储的负担

    缺点：

    1、cookie数量和长度的限制，每个特定的域名下最多生成20个cookie,一般不能超过4095字节

    2、安全性问题

    3、有些状态不可能保存在客户端

（{}+{}）.length的大小  30

({}+{}).length 等价于 ({}.toString() + {}.toString()).length，{}.toString()的值为[object Object]，所以最后结果为30。

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组   http://www.cnblogs.com/littledu/archive/2012/05/19/2508672.html

[].slice.call(arguments)相当于Array.slice.call(arguments)，目的是将arguments对象的数组提出来转化为数组，arguments本身并不是数组而是对象

HTML网页的浏览器标题栏显示小图标的方法     http://www.jb51.net/web/163883.html

Javascript实现浏览器标题栏文字滚动效果    http://blog.csdn.net/chenjinping123/article/details/7971541

改变鼠标样式：<body style="cursor:url(1.cur); ">

十大排序算法   http://gold.xitu.io/post/57dcd394a22b9d00610c5ec8