前端笔试(二)
来源:程序员人生 发布时间:2016-11-22 09:00:46 阅读次数:2585次
阿里
AJAX跨域
设置 async:true即异步履行,设置async:false即同步履行
jquery中ajax处理跨域的3大方式 http://www.jb51.net/article/77470.htm
ajax本身不可以跨域,遇到跨域,用JSONP,即添加dataType:'jsonp' http://www.cnblogs.com/sunxucool/p/3433992.html
比较1下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方法是1种非官方方法,只支持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是1种数据交换格式,描写信息的格式
JSONP是1种非官方跨域数据交互协议,信息传递双方约定的方法
凡是具有”src”这个属性的标签都具有跨域的能力,比如、
、
如何终止正在在发送的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⑵2/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:是不是允许用户缩放
移动端和桌面端不1样,它有2个视口(viewport):可见视口(visual viewport)和 布局视口(layout viewport).
关于2者的区分,stack overflow有这样的解释:
想象下现在有1张不会改变尺寸和形状的大的图片,你手里拿着1个中空的框子(想象下砸空你手机的屏幕),透过它你可以看到这张图片,并且这个框框的周围是用不透明的材料做成的,你只能通过中间的洞去看这张图片。你可以移动这个框子,靠近自己的眼睛的话可以看到更多的图片区域,也能够使它阔别自己的眼睛,从而只看到这张图片的1部份小区域。
那张不可改变形状和尺寸的图片=布局视口(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指定的文档替换当前文档,替换当前窗口页面,前后两个页面共用1个窗口,没有后退返回上1页
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 参数规定与要求1同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所履行的函数名称。
$.get() 方法通过 HTTP GET 要求从
服务器上要求数据。
$.get(URL,callback);
必须的 URL 参数规定您希望要求的 URL。
可选的 callback 参数是要求成功后所履行的函数名。
getScript() 方法通过 HTTP GET 要求载入并履行 JavaScript 文件。
jQuery.getScript(url,success(response,status));
delete是1种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 隐藏的元素仍需占据未隐藏前1样的空间
display:none 隐藏的元素原来占用的空间从页面布局中消失
Form表单标签的Enctype属性的作用及利用示例介绍 http://www.jb51.net/web/165444.html
Enctype是指定将数据回发到
服务器时阅读器使用的编码类型
application/x-www-form-urlencoded: 在发送前编码所有字符(默许)。这是标准的编码格式。 不能用于文件上传
multipart/form-data: 不对字符编码,在使用包括文件上传控件的表单时,必须使用该值。 能完全的传递文件数据,是上传2进制数据上去
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-前缀设置自定义属性,进行1些数据的寄存
禁止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连接上支持并发,通过在1个连接上1次性发送多个要求来发送或接收数据
4、页面加载时间短
5、
服务器推送(Server Push)是1种在客户端要求之前发送数据的机制,
服务器可以对客户真个1个要求发送多个响应
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实体头 1个对象(URL)的标志值,供WEB
服务器判断1个对象是不是改变
hasOwnproperty方法能返回1个布尔值,指出1个对象是不是具有指定名称的属性。此方法没法检查该对象的原型链中是不是具有该属性,该属性必须为对象本身的属性。
语法 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() 返回1个数字,表示给定索引处的字符的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,1般不能超过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
改变鼠标样式:
10大排序算法 http://gold.xitu.io/post/57dcd394a22b9d00610c5ec8