前端面试3

31.事件、IE与火狐的事件机制有什么区别? 如何阻止冒泡?

1.我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被JavaScript侦测到的行为

2.事件处理机制:IE是事件冒泡、firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件

3. ev.stopPropagation();

注意旧ie的方法:ev.cancelBubble = true;

32.Ajax是什么?Ajax的交互模型?同步和异步的区别?如何解决跨域问题?

Ajax是什么:

1.通过异步模式,提升了用户体验

2.优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

3. Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。

Ajax的最大的特点:

1. Ajax可以实现动态不刷新(局部刷新)

2. readyState属性 状态 有5个可取值:0 =未初始化,1 =启动,2 =发送,3 =接收,4 =完成

Ajax同步和异步的区别:

1.同步:提交请求->等待服务器处理->处理完毕返回,这个期间客户端浏览器不能干任何事

2.异步:请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕

ajax.open方法中,第3个参数是设同步或者异步。

Ajax的缺点:

1. Ajax不支持浏览器back按钮

2.安全问题Ajax暴露了与服务器交互的细节

3.对搜索引擎的支持比较弱

4.破坏了程序的异常机制

5.不容易调试

解决跨域问题:

1. jsonp

2. iframe

3. window.name、window.postMessage

4.服务器上设置代理页面

33.js对象的深度克隆代码实现

function clone(Obj) {

var buf;

if (Obj instanceof Array) {

buf = [];  //创建一个空的数组

var i = Obj.length;

while (i--) {

buf[i] = clone(Obj[i]);

}

return buf;

} else if (Obj instanceof Object){

buf = {};  //创建一个空对象

for (var k in Obj) {  //为这个对象添加新的属性

buf[k] = clone(Obj[k]);

}

return buf;

}else{

return Obj;

}

}

34.对网站重构的理解

网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是:

1.表格(table)布局改为DIV + CSS

2.使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

3.对于移动平台的优化

4.针对于SEO进行优化

5.深层次的网站重构应该考虑的方面

6.减少代码间的耦合

7.让代码保持弹性

8.严格按规范编写代码

9.设计可扩展的API

10.代替旧有的框架、语言(如VB)

11.增强用户体验

12.通常来说对于速度的优化也包含在重构中

13.压缩JS、CSS、image等前端资源(通常是由服务器来解决)

14.程序的性能优化(如数据读写)

15.采用CDN来加速资源加载

16.对于JS DOM的优化

17. HTTP服务器的文件缓存

35.如何获取UA

function whatBrowser() {

document.Browser.Name.value=navigator.appName;

document.Browser.Version.value=navigator.appVersion;

document.Browser.Code.value=navigator.appCodeName;

document.Browser.Agent.value=navigator.userAgent;

}

36.javascript数组去重

方法一:遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组

1 function removeDuplicatedItem(ar) {

2     var ret = [];

4     for (var i = 0, j = ar.length; i < j; i++) {

5         if (ret.indexOf(ar[i]) === -1) {

6             ret.push(ar[i]);

7         }

8     }

10     return ret;

11 }

方法二:遍历数组,利用object对象保存数组值,判断数组值是否已经保存在object中,未保存则push到新数组并用object[arrayItem]=1的方式记录保存

function removeDuplicatedItem2(ar) {

var tmp = {},

ret = [];

for (var i = 0, j = ar.length; i < j; i++) {

if (!tmp[ar[i]]) {

tmp[ar[i]] = 1;

ret.push(ar[i]);

}

}

return ret;

}

方法三:数组下标判断法, 遍历数组,利用indexOf判断元素的值是否与当前索引相等,如相等则加入

functionremoveDuplicatedItem3(ar) {

varret = [];

ar.forEach(function(e, i, ar) {

if(ar.indexOf(e) === i) {

ret.push(e);

}

});

returnret;

}

方法四:数组先排序,然后比较俩数组一头一尾进行去重

functionremoveDuplicatedItem4(ar) {

varret = [],

end;

ar.sort();

end = ar[0];

ret.push(ar[0]);

for(vari = 1; i < ar.length; i++) {

if(ar[i] != end) {

ret.push(ar[i]);

end = ar[i];

}

}

returnret;

}

37.HTTP状态码

100 Continue继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息

200 OK正常返回信息

201 Created请求成功并且服务器创建了新的资源

202 Accepted服务器已接受请求,但尚未处理

301 Moved Permanently请求的网页已永久移动到新位置

302 Found临时性重定向

303 See Other临时性重定向,且总是使用GET请求新的URI

304 Not Modified自从上次请求后,请求的网页未修改过

400 Bad Request服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求

401 Unauthorized请求未授权

403 Forbidden禁止访问

404 Not Found找不到如何与URI相匹配的资源

500 Internal Server Error最常见的服务器端错误

503 Service Unavailable服务器端暂时无法处理请求(可能是过载或维护)

38.cache-control

网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private。

Expires头部字段提供一个日期和时间,响应在该日期和时间后被认为失效。允许客户端在这个时间之前不去检查(发请求),等同max-age的效果。但是如果同时存在,则被Cache-Control的max-age覆盖。

Expires = "Expires" ":" HTTP-date

例如:

Expires: Thu, 01 Dec 1994 16:00:00 GMT(必须是GMT格式)

如果把它设置为-1,则表示立即过期

Expires和max-age都可以用来指定文档的过期时间,但是二者有一些细微差别

1. Expires在HTTP/1.0中已经定义,Cache-Control:max-age在HTTP/1.1中才有定义,为了向下兼容,仅使用max-age不够

2. Expires指定一个绝对的过期时间(GMT格式),这么做会导致至少2个问题:

2.1客户端和服务器时间不同步导致Expires的配置出现问题。

2.2很容易在配置后忘记具体的过期时间,导致过期来临出现浪涌现象

3. max-age指定的是从文档被访问后的存活时间,这个时间是个相对值(比如:3600s),相对的是文档第一次被请求时服务器记录的Request_time(请求时间)

4. Expires指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime),而max-age相对对的是文档的请求时间(Atime)

5.如果值为no-cache,那么每次都会访问服务器。如果值为max-age,则在过期之前不会重复访问服务器。

39.javascript操作获取和设置cookie

//创建cookie

function setCookie(name, value, expires, path, domain, secure) {

var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

if (expires instanceof Date) {

cookieText += '; expires=' + expires;

}

if (path) {

cookieText += '; expires=' + expires;

}

if (domain) {

cookieText += '; domain=' + domain;

}

if (secure) {

cookieText += '; secure';

}

document.cookie = cookieText;

}

//获取cookie

function getCookie(name) {

var cookieName = encodeURIComponent(name) + '=';

var cookieStart = document.cookie.indexOf(cookieName);

var cookieValue = null;

if (cookieStart > -1) {

var cookieEnd = document.cookie.indexOf(';', cookieStart);

if (cookieEnd == -1) {

cookieEnd = document.cookie.length;

}

cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));

}

return cookieValue;

}

//删除cookie

function unsetCookie(name) {

document.cookie = name + "= ; expires=" + new Date(0);

}


ps:在我搜集和整理面试题的时候发现,有些内容我越来越能理解和接受,甚至明白是怎么回事,而且那些曾经感觉模棱两可的东西 此刻越发清晰了,者应该就是学习过程中不断刺激记忆的结果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容

  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,328评论 0 25
  • 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型、W3C 盒子模...
    无目的阅读 344评论 0 1
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 5,070评论 0 7
  • 1.::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用经常会遇到的的伪元素...
    卡农me阅读 278评论 0 0
  • 我发现记日记真的很有必要性,提笔写的时候好像还要想想昨天和娃玩了什么。对,想起来了,昨天巧虎送的玩具不倒翁游戏圈和...
    巧虎小崔阅读 98评论 0 0