码迷,mamicode.com
首页 > 其他好文 > 详细

前端面试合集

时间:2019-09-02 09:21:32 ???? 阅读:715 ???? 评论:0 ???? 收藏:0 ???? [点我收藏+]

标签:ddl???文件下载???小图标???通配符???证书???esc???ie9???option???web标准???

VUE

1.什么是 vue 生命周期

2.vue生命周期的作用是什么

3.第一次页面加载会触发哪几个钩子

4.简述每个周期具体适合哪些场景

5.created和mounted的区别

?6.vue获取数据在哪个周期函数

7.请详细说下你对vue生命周期的理解?

vue路由面试题

mvvm 框架是什么?
vue-router 是什么?它有哪些组件

active-class 是哪个组件的属性?
怎么定义 vue-router 的动态路由? 怎么获取传过来的值
vue-router 有哪几种导航钩子?
6.$route 和 $router 的区别

7.vue-router响应路由参数的变化

8.vue-router传参

9.vue-router的两种模式

10.vue-router实现路由懒加载( 动态加载路由 )

vue常见面试题

1.vue优点
2.vue父组件向子组件传递数据?
3.子组件像父组件传递事件

4.v-show和v-if指令的共同点和不同点

5.如何让CSS只在当前组件中起作用

6.的作用是什么?

7.如何获取dom

8.说出几种vue当中的指令和它的用法?

9. vue-loader是什么?使用它的用途有哪些?

10.为什么使用key

11.axios及安装

12.axios解决跨域

13.v-modal的使用

14.scss的安装以及使用

15. 请说出vue.cli项目中src目录每个文件夹和文件的用法?

16.分别简述computed和watch的使用场景

17.v-on可以监听多个方法吗

18.$nextTick的使用

19.vue组件中data为什么必须是一个函数

20.vue事件对象的使用

21 组件间的通信

22.渐进式框架的理解

23.Vue中双向数据绑定是如何实现的

24.单页面应用和多页面应用区别及优缺点

25.vue中过滤器有什么作用及详解

26.v-if和v-for的优先级

27.assets和static的区别

28.列举常用的指令

29.vue常用的修饰符

30.数组更新检测

31.Vue.set视图更新

32.自定义指令详解

33.vue的两个核心点

34.vue和jQuery的区别

35 引进组件的步骤

Vue-cli打包命令是什么?打包后悔导致路径问题,应该在哪里修改
三大框架的对比
跨组件双向数据绑定
delete和Vue.delete删除数组的区别
SPA首屏加载慢如何解决
Vue-router跳转和location.href有什么区别
vue slot
你们vue项目是打包了一个js文件,一个css文件,还是有多个文件? 44.vue遇到的坑,如何解决的?
Vue里面router-link在电脑上有用,在安卓上没反应怎么解决? 46.Vue2中注册在router-link上事件无效解决方法
RouterLink在IE和Firefox中不起作用(路由不跳转)的问题
axios的特点有哪些
请说下封装 vue 组件的过程?
?vuex常见面试题

vuex是什么?怎么使用?哪种功能场景使用它?
vuex有哪几种属性
不使用Vuex会带来什么问题
Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
vuex一个例子方法
Vuex中如何异步修改状态
Vuex中actions和mutations的区别
ES6新增方法面试题

let const var比较
反引号(`)标识
函数默认参数
箭头函数
属性简写
方法简写
Object.keys()方法,获取对象的所有属性名或方法名
Object.assign ()原对象的属性和方法都合并到了目标对象
for...of 循环
import和export
Promise对象
解构赋值
set数据结构(可用于快速去重)
Spread Operator 展开运算符(...)
字符串新增方法
ES6数组面试题

forEach() 2.map() 3.filter() 4.reduce() 5.some() 6.every() 7.all()方法 ES6编程题
使用解构,实现两个变量的值的交换
利用数组推导,计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。 3.使用ES6改下面的模板
把以下代码使用两种方法,来依次输出0到9?
?

JS面试题

简述同步和异步的区别
2.怎么添加、移除、复制、创建、和查找节点

3.实现一个函数clone 可以对Javascript中的五种主要数据类型(Number、string、Object、Array、Boolean)进行复制

4.如何消除一个数组里面重复的元素

5.写一个返回闭包的函数

6.使用递归完成1到100的累加

7.Javascript有哪几种数据类型

8.如何判断数据类型

9.console.log(1+‘2‘)和console.log(1-‘2‘)的打印结果

10.Js的事件委托是什么,原理是什么

?11.如何改变函数内部的this指针的指向

12.列举几种解决跨域问题的方式,且说明原理

13.谈谈垃圾回收机制的方式及内存管理

14.写一个function ,清除字符串前后的空格

15.js实现继承的方法有哪些

16.判断一个变量是否是数组,有哪些办法

17.let ,const ,var 有什么区别

18.箭头函数与普通函数有什么区别

19.随机取1-10之间的整数

20.new操作符具体干了什么

21.Ajax原理

22.模块化开发怎么做

23.异步加载Js的方式有哪些

24.xml和 json的区别

25.webpack如何实现打包的

26.常见web安全及防护原理

27.用过哪些设计模式

28.为什么会有同源限制

?29.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

30.javascript有哪些方法定义对象

31.说说你对promise的了解

32.谈谈你对AMD、CMD的理解

33.web开发中会话跟踪的方法有哪些

34.介绍js有哪些内置对象?

35.说几条写JavaScript的基本规范?

36.javascript创建对象的几种方式?

37.eval是做什么的?

38.null,undefined 的区别?

39.[“1”, “2”, “3”].map(parseInt) 答案是多少?

40.javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么? 41.js延迟加载的方式有哪些?

42.defer和async

43.说说严格模式的限制

44.attribute和property的区别是什么?

45.ECMAScript6 怎么写class么,为什么会出现class这种东西?

46.常见兼容性问题

47.函数防抖节流的原理

48.原始类型有哪几种?null是对象吗?

49.为什么console.log(0.2+0.1==0.3) //false

50.说一下JS中类型转换的规则?

51.深拷贝和浅拷贝的区别?如何实现

52.如何判断this?箭头函数的this是什么

53.== 和 ===的区别

54.什么是闭包

55.JavaScript原型,原型链 ? 有什么特点?

56.typeof()和instanceof()的用法区别

57.什么是变量提升

58.all、apply以及bind函数内部实现是怎么样的

59.为什么会出现setTimeout倒计时误差?如何减少

?60.谈谈你对JS执行上下文栈和作用域链的理解

61.new的原理是什么?通过new的方式创建对象和通过字面量创建有什么区别?

?62.prototype 和 proto 区别是什么?

63.使用ES5实现一个继承?

64.取数组的最大值(ES5、ES6)

65.ES6新的特性有哪些?

66.promise 有几种状态, Promise 有什么优缺点 ?

?67.Promise构造函数是同步还是异步执行,then呢 ?promise如何实现then处理 ?

68.Promise和setTimeout的区别 ?

?69.如何实现 Promise.all ?

?70.如何实现 Promise.finally ?

71.如何判断img加载完成

72.如何阻止冒泡?

73.如何阻止默认事件?

74.ajax请求时,如何解释json数据

75.json和jsonp的区别?

76.如何用原生js给一个按钮绑定两个onclick事件?

77.拖拽会用到哪些事件

?78.document.write和innerHTML的区别

79.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别?

?80.浏览器是如何渲染页面的?

81.$(document).ready()方法和window.onload有什么区别?

82. jquery中$.get()提交和$.post()提交有区别吗?

?83.对前端路由的理解?前后端路由的区别?

84.手写一个类的继承

85.XMLHttpRequest:XMLHttpRequest.readyState;状态码的意思

?

?

浏览器/html/css面试题
1.什么是盒模型

2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别?

3.简述src和href的区别

4.什么是css Hack

5.什么叫优雅降级和渐进增强

6.px和em的区别

7.HTML5 为什么只写

8.Http的状态码有哪些

9.一次完整的HTTP事务是怎么一个过程

10.HTTPS是如何实现加密

11.浏览器是如何渲染页面的

12.浏览器的内核有哪些?分别有什么代表的浏览器

13.页面导入时,使用link和@import有什么区别

14.如何优化图像,图像格式的区别

15.列举你了解Html5. Css3 新特性

16.可以通过哪些方法优化css3 animation渲染

17.列举几个前端性能方面的优化

18.如何实现同一个浏览器多个标签页之间的通信

19.浏览器的存储技术有哪些

20.css定位方式

21.尽可能多的写出浏览器兼容性问题

22.垂直上下居中的方法

23.响应式布局原理

25.清除浮动的方法

26.http协议和tcp协议

27.刷新页面,js请求一般会有哪些地方有缓存处理

28.如何对网站的文件和资源进行优化

29.你对网页标准和W3C重要性的理解

30.Http和https的区别

31.data-属性的作用

32.如何让Chrome浏览器显示小于12px的文字

33.哪些操作会引起页面回流(Reflow)

34.CSS预处理器的比较less sass

35.如何实现页面每次打开时清除本页缓存

36.什么是Virtual DOM,为何要用Virtual DOM

37.伪元素和伪类的区别

38.http的几种请求方法和区别

39.前端需要注意哪些SEO

40.的title和alt有什么区别

41.从浏览器地址栏输入url到显示页面的步骤

42.如何进行网站性能优化

43.语义化的理解

44.HTML5的离线储存怎么使用,工作原理能不能解释一下?

45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

46.iframe有那些缺点?

47.WEB标准以及W3C标准是什么?

48.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

49.HTML全局属性(global attribute)有哪些

50.Canvas和SVG有什么区别?

51.如何在页面上实现一个圆形的可点击区域?

52.网页验证码是干嘛的,是为了解决什么安全问题

53.请描述一下 cookies,sessionStorage 和 localStorage 的区别?

?

?

hg网娱乐官网|免费注册小程序开发
?

初识小程序

????1.注册小程序

????2.hg网娱乐官网|免费注册开发者工具

????3.小程序与普通网页开发的区别

????4.小程序尺寸单位rpx

????5.样式导入(WeUI for)

????6.选择器

????7.小程序image高度自适应及裁剪问题

????8.hg网娱乐官网|免费注册小程序长按识别二维码

????9.给页面加背景色

????10.hg网娱乐官网|免费注册小程序获取用户信息

????11.代码审核和发布

????12.小程序hg网娱乐官网|免费注册认证

????13.小程序申请hg网娱乐官网|免费注册支付

????14.小程序的目录解构及四种文件类型

????15.小程序文件的作用域

????16.小程序常用组件

????????1.view

????????2.scroll-view

????????3.swiper组件

????????4.movable-view

????????5.cover-view

????????6.cover-image

小程序基础

????17.授权得到用户信息

????18.数据绑定

????19.列表渲染

????20.条件渲染

????21.公共模板建立

????22.事件及事件绑定

????23.引用

????24.页面跳转

????????1.wx.switchTab

????????2.wx.reLaunch

????????3.wx.redirectTo

????????4.wx.navigateTo

????????5.wx.navigateBack

????25.设置tabBar

????26.页面生命周期

????27.转发分享

小程序高级

????28.request请求后台接口

????29.http-promise 封装

????30.webview

????31.获取用户收货地址

????32.获取地里位置

????33.自定义组件

????34.hg网娱乐官网|免费注册小程序支付问题

小程序项目实战

????35.hg网娱乐官网|免费注册小程序本地数据缓存

????36.下拉刷新和下拉加载

????37.列表页向详情页跳转(动态修改title)

????38.客服电话

????39.星级评分组件

????40.小程序插槽的使用slot

????41.模糊查询

????42.wxs过滤

????43.小程序动画

????44.列表根据索引值渲染

????45.小程序动态修改class

????46.小程序常用框架

????47.参数传值的方法

????48.提高小程序的应用速度

????49.hg网娱乐官网|免费注册小程序的优劣势

????50.小程序的双向绑定和vue的区别

????51.hg网娱乐官网|免费注册小程序给按钮添加动画

????52.hg网娱乐官网|免费注册小程序的tab按钮的转换

????53.hg网娱乐官网|免费注册小程序引进echarts

????54.APP打开小程序流程

????55.小程序解析富文本编辑器

?

?

一些html5和css3的一些常见面试题
最近总结了一些有关于html5和css3的一些常见面试题,希望对正在找工作的你有所帮助。

还有欢迎大家补充~~~

一、HTML5 CSS3

CSS3有哪些新特性?
1. CSS3实现圆角(border-radius),阴影(box-shadow),

2. 对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器 多背景 rgba

5. 在CSS3中唯一引入的伪元素是 ::selection.

6. 媒体查询,多栏布局

7. border-image

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
新特性:

1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签(header,nav,footer,aside,article,section)

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件,calendar、date、time、email、url、search

9. 新的技术webworker, websocket, Geolocation

移除的元素:

1. 纯表现的元素:basefont,big,center,font, s,strike,tt,u;

2. 对可用性产生负面影响的元素:frame,frameset,noframes;

支持HTML5新标签:

1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架):

如何区分:

DOCTYPE声明新增的结构元素、功能元素

本地存储(Local Storage )和cookies(储存在用户本地终端上的数据)之间的区别是什么?
Cookies:服务器和客户端都可以访问;大小只有4KB左右;有有效期,过期后将会删除;

本地存储:只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器;每个域5MB;没有过期数据,它将保留知道用户从浏览器清除或者使用Javascript代码移除

如何实现浏览器内多个标签页之间的通信?
调用 localstorge、cookies 等本地存储方式

你如何对网站的文件和资源进行优化?
文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

什么是响应式设计?
它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

新的 HTML5 文档类型和字符集是?
答:HTML5文档类型:

HTML5使用的编码

HTML5 Canvas 元素有什么用?
答:Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

HTML5 存储类型有什么区别?
答:Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

用H5+CSS3解决下导航栏最后一项掉下来的问题
CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。

请用CSS实现:一个矩形内容,有投影,有圆角,hover状态慢慢变透明。
css属性的熟练程度和实践经验

描述下CSS3里实现元素动画的方法
动画相关属性的熟悉程度

html5\CSS3有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,地理定位等功能的增加。

* 绘画 canvas 元素

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素,比如 article、footer、header、nav、section

表单控件,calendar、date、time、email、url、search

CSS3实现圆角,阴影,对文字加特效,增加了更多的CSS选择器 多背景 rgba

新的技术webworker, websockt, Geolocation

移除的元素

纯表现的元素:basefont,big,center,font, s,strike,tt,u;

对可用性产生负面影响的元素:frame,frameset,noframes;

* 是IE8/IE7/IE6支持通过document.createElement方法产生的标签,

可以利用这一特性让这些浏览器支持HTML5新标签,

浏览器支持新标签后,还需要添加标签默认的样式:

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

你怎么来实现页面设计图,你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?
* 首先划分成头部、body、脚部;。。。。。

* 实现效果图是最基本的工作,精确到2px;

与设计师,产品经理的沟通和项目的参与

做好的页面结构,页面重构和用户体验

处理hack,兼容、写出优美的代码格式

针对服务器的优化、拥抱 HTML5。

你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

  区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。 

  “优雅降级”观点

  “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。

  在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。

  “渐进增强”观点

  “渐进增强”观点则认为应关注于内容本身。

  内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

?

  那么问题了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角,阴影(CSS3),要求兼容(使用图片背景,放弃CSS3),你会如何说服他?

为什么利用多个域名来存储网站资源会更有效?
CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

节约主域名的连接数,优化页面响应速度

防止不必要的安全问题

请谈一下你对网页标准和标准制定机构重要性的理解。
  (无标准答案)网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。

?

请描述一下cookies,sessionStorage和localStorage的区别?  
  sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

知道css有个content属性吗?有什么作用?有什么应用?
知道。css的content属性专门应用在 before/after 伪元素上,用来插入生成内容。最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码

.clearfix:after {

content:"."; //这里利用到了content属性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix {

*zoom:1;

}

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:both清除浮动。

  那么问题继续还有,知道css计数器(序列数字字符自动递增)吗?如何通过css content属性实现css计数器?

答案:css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。

如何在 HTML5 页面中嵌入音频?
HTML 5 包含嵌入音频文件的标准方式,支持的格式包括 MP3、Wav 和 Ogg:

Your browser does‘nt support audio embedding feature.

如何在 HTML5 页面中嵌入视频?
和音频一样,HTML5 定义了嵌入视频的标准方法,支持的格式包括:MP4、WebM 和 Ogg:

Your browser does‘nt support video embedding feature.

HTML5 引入什么新的表单属性?
Datalist datetime output keygen date month week time number range emailurl

CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。

(写)描述一段语义的html代码吧。
(HTML5中新增加的很多标签(如:

标签前(接近HTML文件底部)

?

这段代码意思是等到整个文档加载完后,再加载外部文件”defer.js”。

使用此段代码的步骤:

1).复制上面代码

?

2).粘贴代码到HTML的标签前 (靠近HTML文件底部)

?

3).修改”defer.js”为你的外部JS文件名

?

4).确保你文件路径是正确的。例如:如果你仅输入”defer.js”,那么”defer.js”文件一定与HTML文件在同一文件夹下。

?

注意:这段代码直到文档加载完才会加载指定的外部js文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。

30、同步和异步的区别?

同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

举个浏览器例子:普通B/S模式(同步)AJAX技术(异步)

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

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

再举个生活的例子:大家联系的时候如果使用手机通话,那么只能跟一个人联系,过程中做不了其他任何操作,如果使用短信或者聊天的方式,就可以同时跟很多人聊天,别人收到信息后会回复,在回复之前还可以跟另外的人进行聊天。

?

31、document.write和innerHTML的区别?

1.document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。

2.innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。

?

3.两者都可动态包含外部资源如JavaScript文件

通过document.write插入元素会自动执行其中的脚本;

大多数浏览器中,通过innerHTML插入元素并不会执行其中的脚本

?

innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。

?

32、.call()和.apply()的含义和区别?

1、call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性。既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同。

2、语法:foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);

3、相同点:两个方法产生的作用是完全一样的。

4、不同点:方法传递的参数不同,单个单数传入,另一个可以以数组方式传入

?

33、JQ和JQUI有啥区别?

?

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是”write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。

?

34、需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器的前进,后退时正确响应。给出你的技术实现方案?

用cookie或者localStorage来记录应用的状态即可,刷新页面时读取一下这个状态,然后发送相应ajax请求来改变页面即可

?

HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的

?

?

虽然ajax可以无刷新改变页面内容,但无法改变页面URL

?

其次为了更好的可访问性,内容发生改变后,改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题

?

有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变

?

再有,ajax的使用对搜索引擎很不友好,往往蜘蛛爬到的区域是空的

?

为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState, history.replaceState

?

可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。

?

pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。

?

如何调用

?

var state = { title: title, url: options.url, otherkey: othervalue};window.history.pushState(state, document.title, url);

state对象除了要title和url之外,也可以添加其他的数据,比如:还想将一些发送ajax的配置给保存起来。

?

replaceState和pushState是相似的,不需要多做解释。

?

如何响应浏览器的前进、后退操作

?

window对象上提供了onpopstate事件,上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。

?

window.addEventListener(‘popstate’, function(e){ if (history.state){ var state = e.state; //do something(state.url, state.title); }}, false);

这样就可以结合ajax和pushState完美的进行无刷新浏览了。

?

?

?

?

35、js的数据类型都有哪些?

字符串、数字、布尔、数组、对象、Null、Undefined

?

?

36、已知ID的input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)

document.getElementById(id).value;

?

?

?

37、希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)

document.getElementsByTagName(‘input’);

遍历循环

?

?

38、设置一个已知ID的div和html内容为xxx,字体颜色设置为黑色?(不使用第三方框架)

var div = document.getElementById(id);

div.innerHTML = ”;

div.style.color = ”;

?

?

?

39、当一个dom节点被点击时,我们需要能够执行一个函数,应该怎么做?

直接在DOM里绑定事件:”

xx
” …

?

在JS里通过onclick绑定:xxx.onclick = test

通过事件添加进行绑定:addEventListener(xxx, ‘click’, test)

  那么问题来了,Javascript的事件流模型都有什么?

“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播

“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的

“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

?

?

?

?

?

40、什么是Ajax和JSON,他们的优缺点?

Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。

  优点:

可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量

避免用户不断刷新或者跳转页面,提高用户体验

缺点:

对搜索引擎不友好(

要实现ajax下的前后退功能成本较大

可能造成请求数的增加

跨域问题限制

?

?

JSON是一种轻量级的数据交换格式,ECMA的一个子集

  优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)

?

?

?

41、请看下列代码输出什么?解释原因?

var a;

alert(typeof a); //undefined

?

alert(b); //报错

?

解释:Undefined是一个只有一个值的数据类型,这个值就是”undefined”,

在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。

注意未申明的变量和声明了未赋值的是不一样的。

?

ar a = null;

alert(typeof a); //object

?

  解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”

?

42、js的typeof返回哪些数据类型?

有如下6种返回值:

1)number;

2)string;

3)boolean;

4)object

5)function

6)undefined;

?

?

43、split() join()的区别?

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

指定分隔符方法join(“#”);其中#可以是任意

?

与之相反的是split()方法:用于把一个字符串分割成字符串数组.

?

?

44、数组方法pop() push() unshift() shift()?

push和pop方法,这两个方法只会对数组从尾部进行压入或弹出,而且是在原数组进行操作,任何的改动都是会影响到操作的数组。push(args)可以每次压入多个元素,并返回更新后的数组长度。pop()函数每次只会弹出最后一个结尾的元素,并返回弹出的元素,如果是对空组数调用pop()则返回undefined。 如果参数是数组则是将整个数组当做一个元素压入到原来的数组当中。并不会产生类似concat合并数组时产生的”拆分现象”

?

unshift和shift这两个方法都是通过对数组的头部进行的操作,其他基本跟push和pop类似

?

?

shift:从集合中把第一个元素删除,并返回这个元素的值。

?

unshift: 在集合开头添加一个或更多元素,并返回新的长度

?

push:在集合中添加元素,并返回新的长度

?

pop:从集合中把最后一个元素删除,并返回这个元素的值

?

?

?

45、ajax请求时,如何解释json数据?

1.$.JSON(url,params,fun);

2.$.ajax({}); dataType:’json’

都可以使用$each();进行遍历

$.each(object,function(index,item){

?

});

?

?

?

46、js的本地对象,内置对象和宿主对象?

本地对象:

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError官方定义好了的对象

内置对象: Global 和 Math,内置对象是本地对象的一种

宿主对象:所有的BOM和DOM对象都是宿主对象,是那些官方未定义,你自己构建的对象加上DOM和BOM对象组成的

?

?

?

47、列举所了解的前端框架并简述?

以下是常用的前端基础框架:

?

以下是常见的前端构建框架:

?

以下是场检的JS/CSS模块化开发的框架:

?

48、对web标准以及w3c的理解与认识?

(1)web标准规范要求,书写标签必须闭合、标签小写、不乱嵌套,可提高搜索机器人对网页内容的搜索几率。— SEO

(2)建议使用外链css和js脚本,从而达到结构与行为、结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容。

(3)样式与标签的分离,更合理的语义化标签,使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件, 从而降低维护成本、改版更方便

(4)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性

?

遵循w3c制定的web标准,能够使用户浏览者更方便的阅读,使网页开发者之间更好的交流。

?

?

?

49、xhtml和html有什么区别?

XHTML是HTML 4.01和XML1.0的杂交,XHTML1.0是基于HTML4.01的

HTML是一种基于标准通用标记语言(SGML)的应用,而XHTML则基于可扩展标记语言(XML),HTML和XHTML其实是平行发展的两个标准。本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。建立XHTML的目的就是实现HTML向XML的过渡

?

1、XHTML要求正确嵌套

2、XHTML所有元素必须关闭

3、XHTML区分大小写

4、XHTML属性值要加引号

5、XHTML用id属性代替name属性

6、属性值不能简写

?

?

?

50、行内元素有哪些?块级元素有哪些?css和盒子模型?

盒子模型:内容、填充(padding)、边框(border)、外边界(margin)

box-sizing:border-box; box-sizing:content-box;

?

?

?

?

?

?

51、css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和import哪个级别更高?

可继承的:font-size font-family color

不可继承的:border padding margin background-color width height

?

优先级:!important > [ id > class > tag ] important 比 内联优先级高

?

?

52、前端页面有哪三层构成,分别是什么?作用是什么?

结构层、表示层、行为层

?

结构层(structural layer)

由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:”这是一个文本段。”

?

表示层(presentation layer)

由 CSS 负责创建。 CSS对”如何显示有关内容”的问题做出了回答。

?

行为层(behaviorlayer)

负责回答”内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域

?

?

?

53、你如何对网站的文件和资源进行优化?期待的解决方法包括?

A、文件合并,减少http请求,合并JavaScript和CSS文件、CSS Sprites、图像映射 (Image Map)和使用Data URI来编码图片

B、文件最小化/文件压缩,减少文件下载的体积;常用的工具是YUI Compressor

C、使用 CDN 托管,尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定

D、缓存的使用(多个域名来提供缓存)

E、GZIP 压缩你的 JS 和 CSS 文件

?

54、看下列代码?输出什么?解释原因?

var a = null;

alert(typeof a);

答案:输出为object, JS类型值是存在32 BIT 单元里,32位有1-3位表示TYPE TAG,其它位表示真实值

而表示object的标记位正好是低三位都是0

000: object. The data is a reference to an object.

?

而js 里的Null 是机器码NULL空指针, (0x00 is most platforms).所以空指针引用 加上 对象标记还是0,最终体现的类型还是object..

?

这也就是为什么Number(null)===0吧…

The history of “typeof null”

2. 曾经有提案 typeof null === ‘null’.但提案被拒绝

harmony:typeof_null

55、看代码给答案?并进行解释?

var a = new Object();

a.value=1;

b = a;

b.value=2;

alert(a.value);

?

56、var numberArray = [3,6,2,4,1,5];

1) 实现对该数组的倒排,输出[5,1,4,2,6,3]

  2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]

?

var numberArray = [3,6,2,4,1,5];

numberArray.reverse(); // 5,1,4,2,6,3

numberArray.sort(function(a,b){ //6,5,4,3,2,1

return b-a;

})

?

57、你能描述一下渐进增强和优雅降级之间的不同吗?

如果提到了特性检测,可以加分。

检测浏览器,渐进增强就是让牛b的浏览器的效果更好,优雅降级就是让2b的浏览器在功能ok的情况下效果一般。

?

58、线程与进程的区别?

一个程序至少有一个进程,一个进程至少有一个线程.

线程的划分尺度小于进程,使得多线程程序的并发性高。

另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。

从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

?

59、请解释一下什么是”语义化的 HTML”?

语义化的好处:

1:去掉或样式丢失的时候能让页面呈现清晰的结构:

html本身是没有表现的,我们看到例如

是粗体,字体大小2em,加粗;是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是

的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器(如果访客有视障)会完全根据你的标记来”读”你的网页.

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱).

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记, 而只注重语义标记.

6.便于团队开发和维护

?

语义化的HTML就是:标题用h1-h6,文字段落用p,列表用ul li,大致如此

?

60、为什么利用多个域名来提供网站资源会更有效?

浏览器同一时间可以从一个域名下载多少资源?你的浏览器能同时保持对一个域名的多少连接?

三个最主流的原因:

1. CDN缓存更方便

2. 突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4换成 lh3,lh6 啥的,都照样能够访问,像地图之类的需要大量并发下载图片的站点,这个非常重要。)

3. Cookieless, 节省带宽,尤其是上行带宽 一般比下行要慢。。。

还有另外两个非常规原因:

4. 对于UGC的内容和主站隔离,防止不必要的安全问题( 上传js窃取主站cookie之类的) 。

正是这个原因要求用户内容的域名必须不是自己主站的子域名,而是一个完全独立的第三方域名。

5. 数据做了划分,甚至切到了不同的物理集群,通过子域名来分流比较省事. ^_^ 这个可能被用的不多。

PS: 关于Cookie的问题,带宽是次要的,安全隔离才是主要的。

关于多域名,也不是越多越好,虽然服务器端可以做泛解释,浏览器做dns解释也是耗时间的,而且太多域名,如果要走 https的话,还有要多买证书和部署的问题,^_^。

?

61、请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

1.优化图片

2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)

3.优化CSS(压缩合并css,如margin-top,margin-left…)

4.网址后加斜杠(如www.campr.com/目录,会判断这个”目录是什么文件类型,或者是目录。)

5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。

当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。)

6.减少http请求(合并文件,合并图片)。

?

62、如果你参与到一个项目中,发现他们使用 Tab 来缩进代码,但是你喜欢空格,你会怎么做?

1.建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范

2.为了保持一致性,接受项目原有的风格

3.直接使用 VIM 的 retab 命令

?

63、请写一个简单的幻灯效果页面

如果不使用JS来完成,可以加分。(如:纯CSS实现的幻灯片效果)

可以采用CSS3的单选按钮radio来实现图片的切换

64、你都使用哪些工具来测试代码的性能?

Profiler, JSPerf(http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout), Dromaeo

?

65、如果今年你打算熟练掌握一项新技术,那会是什么?

nodejs,html5,css3,less

?

66、请谈一下你对网页标准和标准制定机构重要性的理解?

(google)w3c存在的意义就是让浏览器兼容性问题尽量小,首先是他们对浏览器开发者的约束,然后是对开发者的约束。

?

67、什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

FOUC – Flash Of Unstyled Content 文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。

解决方法简单的出奇,只要在之间加入一个或者元素就可以了。

?

68、doctype(文档类型)的作用是什么?你知道多少种文档类型?

此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks

(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

?

69、浏览器标准模式和怪异模式之间的区别是什么?

W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircks mode和Standars mode,两种渲染方法共存在一个浏览器上。

?

IE盒子模型和标准W3C盒子模型:ie的width包括:padding\border。 标准的width不包括:padding\border

在js中如何判断当前浏览器正在以何种方式解析?

document对象有个属性compatMode ,它有两个值:

BackCompat 对应quirks mode

CSS1Compat 对应strict mode

?

70、使用 XHTML 的局限有哪些?

xhtml要求严格,必须有head、body每个dom必须要闭合。

如果页面使用’application/xhtml+xml’会有什么问题吗?

一些老的浏览器并不兼容。

十六、如果网页内容需要支持多语言,你会怎么做?

编码UTF-8,空间域名需要支持多浏览地址。

在设计和开发多语言网站时,有哪些问题你必须要考虑?

1、应用字符集的选择 2、语言书写习惯&导航结构 3、数据库驱动型网站

?

71、data-属性的作用是什么?

data-为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过 getAttribute方法获取

div.dataset.commentNum; // 10

?

需要注意的是,data-之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。

并不是所有的浏览器都支持.dataset属性,测试的浏览器中只有Chrome和Opera支持。

?

72、如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些?


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
38、把两个数组合并,并删除第二个元素。

var array1 = [‘a‘,‘b‘,‘c‘];
var bArray = [‘d‘,‘e‘,‘f‘];
var cArray = array1.concat(bArray);
cArray.splice(1,1); //splice() 方法用于插入、删除或替换数组的元素。
1
2
3
4
splice()方法如下所示:

//splice()方法
/*
* 删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数
* 会影响原始数组
*/
var fruits = ["apple", "mango", "banana", "pear"];
var fruit1 = fruits.splice(0, 2);
document.write(fruits + "
"); //banana,pear
document.write(fruit1); //返回删除的项apple,mango
document.write("
");
/*
* 插入:可以向指定位置插入任意数量的项,只需提供 3个参数:
* 起始位置、0(要删除的项数) 和要插入的项
*/
var fruit2 = ["apple", "mango", "banana", "pear"];
var fruit3 = fruit2.splice(2, 0, "strawberry", "lalala");
document.write(fruit2 + "
");//apple,mango,strawberry,lalala,banana,pear
document.write(fruit3 + "
");//未删除项,所以返回空数组
/*
* 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,
* 只需指定 3 个参数:起 始位置、要删除的项数和要插入的任意数量的项。
* 插入的项数不必与删除的项数相等。
*/
var fruit4 = ["apple", "mango", "banana", "pear"];
var fruit5 = fruit4.splice(1, 2, "aaa", "bbb", "ccc");
document.write("
" + fruit4 + "
");//apple,aaa,bbb,ccc,pear
document.write(fruit5); // 返回删除的项mango,banana
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
39、怎样添加、移除、移动、复制、创建和查找节点

详细讲解请见本人另一篇博客((完全详解)JavaScript 添加、复制、移除、移动、创建和查找节点)】

40、有这样一个 URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e, 请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定),将其 按 key-value 形式返回到一个 json 结构中,如{a:’ 1′, b:’ 2′, c:” , d:’ xxx’, e:undefined}。

截取问号后的字符串,按‘&’间隔拆分,再按‘=’拆分,再分情况判断。

var url=‘http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e‘;
function nameAndValue(url){
url=url.split(‘?‘)[1];
var group=url.split(‘&‘);
var res={};
for(var i=0;i<>
start=group[i].indexOf(‘=‘);
if(start!=-1){
name=group[i].slice(0,start);
value=group[i].slice(start+1,group[i].length);
res[name]=value;
}else{
res[group[i]]=undefined;
}
}
for(var key in res) {
document.write(key + ":" + " " + res[key]);
document.write("
");
}
}
nameAndValue(url);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
结果:

a: 1
b: 2
c:
d: xxx
e: undefined
41、正则表达式构造函数 var reg=new RegExp(“xxx”)与正则表达字面量 var reg=//有什么不同?匹配邮箱的正则表达式?

答案:当使用 RegExp()构造函数的时候,不仅需要转义引号(即\”表示”),并且还需要
双反斜杠(即\表示一个\)。
使用正则表达字面量的效率更高。

邮箱的正则匹配:

var regMail = /^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d\-]*\.)+[A-Za-z]{2,4}$/;
1
24.看下面代码,给出输出结果。

for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
}, 0);
};
1
2
3
4
5
答案:4 4 4。
原因: Javascript 事件处理器在线程空闲之前不会运行。
追问,如何让上述代码输出 1 2 3?

for(var i=1;i<=3;i++){
setTimeout((function(a){ //改成立即执行函数
console.log(a);
})(i), 0);
};
1
2
3
4
5
1 //输出
2
3

42、写一个 function,清除字符串前后的空格。(兼容所有浏览器)

使用自带接口 trim(),考虑兼容性:












1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
43、Javascript 中 callee 和 caller 的作用?

arguments.callee:获得当前函数的引用

caller 是返回一个对函数的引用,该函数调用了当前函数;

callee 是返回正在被执行的 function 函数,也就是所指定的 function 对象的正文。

那么问题来了?如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;
假定每对兔子都是一雌一雄,试问一对兔子,第 n 个月能繁殖成多少对兔子?(使用 callee
完成)

var result=[];
function fn(n){ //典型的斐波那契数列
if(n==1){
return 1;
}else if(n==2){
return 1;
}else{
if(result[n]){
return result[n];
}else{
//argument.callee()表示 fn()
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
44、 Javascript 中, 以下哪条语句一定会产生运行错误(BC)

A、 var _变量=NaN;
B、var 0bj = [];
C、var obj = //;
D、var obj = {};
1
2
3
4
45、以下两个变量 a 和 b,a+b 的哪个结果是 NaN? 答案( C )

A、var a=undefind; b=NaN //拼写
B、var a=‘123’; b=NaN //字符串
C、var a =undefined , b =NaN
D、var a=NaN , b=‘undefined‘//”Nan”
1
2
3
4
46、var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的?答案( B )

A、 34 B、35 C、36 D、37


47、下面的 JavaScript 语句中,( D )实现检索当前页面中的表单元素中的 所有文本框,并将它们全部清空

A.
for(vari=0;i
if(form1.elements.type==”text”)
form1.elements.value=”";
}
B.
for(vari=0;i
if(forms[0].elements.type==”text”)
forms[0].elements.value=”";
}
C.
if(document.form.elements.type==”text”)
form.elements.value=”";
D.
for(vari=0;i
for(var j=0;j
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
48、要将页面的状态栏中显示“已经选中该文本框”,下列 JavaScript 语句正确的是( A )

A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
1
2
3
4
49、以下哪条语句会产生运行错误:(A)正确答案:A

A.var obj = ();
B.var obj = [];
C.var obj = {};
D.var obj = //;
1
2
3
4
5
50、以下哪个单词不属于 javascript 保留字:(B)

A.with
B.parent
C.class
D.void
1
2
3
4
51、请选择结果为真的表达式:(C)

A.null instanceof Object
B.null === undefined
C.null == undefined
D.NaN == NaN
1
2
3
4
52、Javascript 中, 如果已知 HTML 页面中的某标签对象的 id=”username”, 用_document.getElementById(‘username’) _方法获得该标签对象。

53、typeof 运算符返回值中有一个跟 javascript 数据类型不一致,它是 ”function”_。

typeof Number
typeof Object
1
2
54、定义了一个变量,但没有为该变量赋值,如果 alert 该变量,javascript 弹出的对话框中显示___undefined 。

55、分析代码,得出正确的结果。

var a=10, b=20 , c=30;
++a;
a++;
e=++a+(++b)+(c++)+a++;
alert(e);
1
2
3
4
5
弹出提示对话框:77

?

57、写出程序运行结果

for(i=0, j=0; i<10, j<6; i++, j++){
k = i + j;
}
结果:10
1
2
3
4
5


58、阅读以下代码,请分析出结果:

var arr = new Array(1 ,3 ,5);
arr[4]=‘z‘;//[1,3,5,undefined,’z’]
arr2 = arr.reverse();//arr2=[’z’,undefined,5,3,1];
//arr=[’z’,undefined,5,3,1]
arr3 = arr.concat(arr2);
alert(arr3);
1
2
3
4
5
6
弹出提示对话框:z,,5,3,1,z,,5,3,1 reverse()方法颠倒数组中元素的位置,并返回该数组的引用。

59、补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗口;









1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
60、写出简单描述 html 标签(不带属性的开始标签和结束标签)的正则表达式, 并将以下字符串中的 html 标签去除掉

var str = “

这里是 div

里面的段落

”;
1

1
2
3
4
5
61、完成 foo()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框。









苹果

苹果

苹果

苹果

苹果

苹果






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
62、完成函数 showImg(),要求能够动态根据下拉列表的选项变化,更新图片的显示

注:图片路径和名称需根据自己实际情况设置





















1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
63、截取字符串 abcdefg 的 efg

alert(‘abcdefg‘.substring(4));
1
64、列举浏览器对象模型 BOM 里常用的至少 4 个对象,并列举 window 对象的常 用方法至少 5 个

对象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()

65、简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法并做 简单说明

Document.getElementById 根据元素 id 查找元素
Document.getElementByName 根据元素 name 查找元素
Document.getElementTagName 根据指定的元素名查找元素
1
2
3
66、希望获取到页面中所有的 checkbox 怎么做?(不使用第三方框架)





获取所有checkbox




姓名:


性别:





年龄:


爱好:

阅读
爬山
编程
旅行
逛街









1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
67、JavaScript 的数据类型都有什么?

基本数据类型:String,Boolean,Number,Undefined,Null
引用数据类型:Object(Array,Date,RegExp,Function)

70、简述创建函数的几种方式

第一种(函数声明):

functionsum1(num1,num2){
returnnum1+num2;
}
1
2
3
第二种(函数表达式):

var sum2 = function(num1,num2){ return num1+num2; }
1
匿名函数: function(){}:只能自己执行自己

第三种(函数对象方式):

var sum3 = newFunction("num1","num2","return num1+num2");
1
71、Javascript 如何实现继承?(《JavaScript高级程序设计》)

原型链继承,借用构造函数继承,组合继承(原型链、构造函数组合),寄生式继承,寄生组合继承。

注:《JavaScript高级程序设计》一书上都有对应的讲解

72、Javascript 创建对象的几种方式?

工厂方式,构造函数方式,原型模式,混合构造函数原型模式,动态原型方式

73、把 Script 标签 放在页面的最底部的 body 封闭之前 和封闭之后有什么区 别?浏览器会如何解析它们?

如果说放在 body 的封闭之前,将会阻塞其他资源的加载
如果放在 body 封闭之后,不会影响 body 内元素的加载。

74、iframe 的优缺点?

优点:
1. 解决加载缓慢的第三方内容问题,如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本
缺点:
1. iframe 会阻塞主页面的 Onload 事件
2. 即使内容为空,加载也需要时间

75、请你谈谈 Cookie 的弊端?

缺点:
1.Cookie数量和长度的限制。每个 domain 最多只能有 20 条 cookie,每个 cookie 长度不
能超过 4KB,否则会被截掉。

2.安全性问题。如果 cookie 被人拦截了,那人就可以取得所有的 session 信息。即使加密
也于事无补,因为拦截者并不需要知道 cookie 的意义,他只要原样转发 cookie 就可以达到
目的了。

3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存
一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

77、js 延迟加载的方式有哪些?

defer 和 async
动态创建 DOM 方式(创建 script,插入到 DOM 中,加载完毕后 callBack)
按需异步载入 js
78、documen.write 和 innerHTML 的区别?

1、write是DOM方法,向文档写入HTML表达式或JavaScript代码,可列出多个参数,参数被顺序添加到文档中 ;
innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。

2、两者都可向页面输出内容,innerHTML比document.write更灵活。

当文档加载时调用document.write直接向页面输出内容,文档加载结束后调用document.write输出内容会重写整个页面。
通常按照两种的方式使用 write() 方法:一是在使用该方在文档中输出 HTML,二是在调用该方法的的窗口之外的窗口、框架中产生新文档(务必使用close关闭文档)。

在读模式下,innerHTML属性返回与调用元素的所有子节点对应的HTML标记,在写模式下,innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。

3、两者都可动态包含外部资源如JavaScript文件
通过document.write插入


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
84、生成 5 个不同的随机数;

//思路:5 个不同的数,每生成一次就和前面的所有数字相比较,如果有相同的,则放弃当前生成的数字





生成5个不同的随机数





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
85、阶乘函数;9*8*7*6*5…*1











1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
86、window.location.search 返回的是什么

?

87、阻止冒泡函数

还不造“冒泡行为”和“默认行为”的道友,请移步至详解javascript如何阻止冒泡事件及阻止默认事件

阻止冒泡函数

function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C 阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE 阻止冒泡方法
}
}
document.getElementById(‘need_hide‘).onclick = function(e) {
stopPropagation(e);
}
1
2
3
4
5
6
7
8
9
10
11
12
阻止默认行为函数

function preventDefaultAction(e) {
e = e || window.event;
if(e.preventDefault) { //W3C方法
e.preventDefault();
}else { //IE方法
e.returnValue = false;
}
}
1
2
3
4
5
6
7
8
阻止事件冒泡和默认行为实例,可亲自逐步调试查看效果,加深印象





阻止事件冒泡和默认行为



我是最外层

我是第二层
我是最里层





我的博客主页


我是最外层

我是第二层
我是最里层







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
88、看题做答:

function f1(){
var tmp = 1;
this.x = 3;
console.log(tmp); //A
console.log(this.x); //B
}
var obj = new f1(); //(1)
console.log(obj.x) //(2)输出:1,3,3
console.log(f1()); //(3)输出 1,3,undefined
1
2
3
4
5
6
7
8
9
分析:
这道题让我重新认识了对象和函数,首先看代码(1)这里实例话化了 f1 这个类。相当于执行了 f1 函数。所以这个时候 A 会输出 1, 而 B 这个时候的 this 代表的是 实例化的当前对象 obj ,B 输出 3.。
代码(2)毋庸置疑会输出 3,
重点 代码(3)首先这里将不再是一个类,它只是一个函数。那么 A 输出
1, B 呢?这里的 this 代表的其实就是 window 对象,那么 this.x 就是一个全局变
量 相当于在外部 的一个全局变量。所以 B 输出 3。最后代码由于 f 没有返回值那
么一个函数如果没返回值的话,将会返回 underfined ,
所以答案就是 : 1, 3, 3,
1, 3, underfined 。

89、下面输出多少?

var o1 = new Object();
var o2 = o1;
o2.name = "CSSer";
console.log(o1.name); //CSSer
1
2
3
4
如果不看答案,你回答真确了的话,那么说明你对 javascript 的数据类型了解的还是比较清楚了。js 中有两种数据类型,分别是:基本数据类型和引用数据类型(object Array)。对于保存基本类型值的变量,变量是按值访问的,因为我们操作的是变量实际保存的值。

对于保存引用类型值的变量,变量是按引用访问的,我们操作的是变量值所引用(指向)的对象。
答案就清楚了: CSSer;

90、再来一个

function changeObjectProperty (o) {
o.siteUrl = "http://www.csser.com/";
o = new Object();
o.siteUrl = "http://www.popcg.com/";
}
var CSSer = new Object();
changeObjectProperty(CSSer);
console.log(CSSer.siteUrl); //"http://www.csser.com/"
1
2
3
4
5
6
7
8
如果 CSSer 参数是按引用传递的,那么结果应该是”http://www.popcg.com/“,但实际结果却仍是”http://www.csser.com/“。

事实是这样的:在函数内部修改了引用类型值的参数,该参数值的原始引用保持不变。(此处可以去读一读《JavaScript高级程序设计一书》)

我们可以把参数想象成局部变量,当参数被重写时,这个变量引用的就是一个局部变量,局部变量的生存期仅限于函数执行的过程中,函数执行完毕,局部变量即被销毁以释放内存。

(补充:内部环境可以通过作用域链访问所有的外部环境中的变量对象,但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链,以查询变量和函数名,反之向下则不能。)

91、输出多少?

var a = 6;
setTimeout(function () {
var a = 666;//由于变量 a 是一个局部变量
alert(a); // 输出 666,
}, 1000);
a = 66;
1
2
3
4
5
6
因为 var a = 666;定义了局部变量 a,并且赋值为 666,根据变量作用域链,
全局变量处在作用域末端,优先访问了局部变量,从而覆盖了全局变量 。

var a = 6;
setTimeout(function () {
//变量声明提前
alert(a); // 输出 undefined
var a = 666;
}, 1000);
a = 66;
1
2
3
4
5
6
7
因为 var a = 666;定义了局部变量 a,同样覆盖了全局变量,但是在 alert(a);之前
a 并未赋值,所以输出 undefined。

92、JS 的继承性

window.color = ‘red‘;
var o = {color: ‘blue‘};
function sayColor(){
alert(this.color);
}
1
2
3
4
5
考点:
1、this 的指向
2、call 的用法

sayColor(); //red
sayColor.call(this); //red this 指向的是 window 对象
sayColor.call(window); //red
sayColor.call(o); //blue
1
2
3
4
93、精度问题:JS 精度不能精确到 0.1

var n = 0.3,
m = 0.2,
i = 0.2,
j = 0.1;
alert((n - m) == (i - j)); //false
alert((n-m) == 0.1); //false
alert((i-j)==0.1); //true
1
2
3
4
5
6
7
94、、加减运算

alert(‘5‘+3); //53 string
alert(‘5‘+‘3‘); //53 string
alert(‘5‘-3); //2 number
alert(‘5‘-‘3‘); //2 number
1
2
3
4
95、为什么不能定义 1px 左右的 div 容器?

IE6 下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:

overflow:hidden | zoom:0.08 | line-height:1px
1
95、结果是什么?

function foo(){
foo.a = function(){alert(1)};
this.a = function(){alert(2)};
a = function(){alert(3)};
var a = function(){alert(4)};
};
foo.prototype.a = function(){alert(5)};
foo.a = function(){alert(6)};

foo.a(); //6
var obj = new foo(); //实例化的同时也相当于重新调用构造函数
obj.a(); //2
foo.a(); //1
1
2
3
4
5
6
7
8
9
10
11
12
13
96、输出结果

var a = 5;
function test(){
a = 0;
alert(a);
alert(this.a); //没有定义 a 这个属性
var a;
alert(a);
}

test(); // 0, 5, 0
new test(); // 0, undefined, 0 //由于类它自身没有属性 a, 所以是 undefined
1
2
3
4
5
6
7
8
9
10
11
12
97、计算字符串字节数:

new function(s){
if(!arguments.length||!s) return null;
var l=0;
for(var i=0;i<>
if(s.charCodeAt(i)>255) l+=2;
else l+=1; //charCodeAt()得到的是 uniCode码
} //汉字的 uniCode 码大于 255bit 就是两个字节
alert(l);
}("hello world!");
1
2
3
4
5
6
7
8
9
98、匹配输入的字符:第一个必须是字母或下划线开头,后面就是字母和数字 或者下划线构成,长度 5-20

/*
* 匹配输入的字符
* 第一个字符必须是字母或下划线开头
* 后面的字符由字母、数字、下划线组成
* 共5-20个字符
*/
var reg = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}/,
str1 = "WangWei",
str2 = "123Wang",
str3 = "_Wei",
str4 = "_wang";
document.write(reg.test(str1) + "
");//true
document.write(reg.test(str2) + "
");//false
document.write(reg.test(str3) + "
");//false 仅4个字符
document.write(reg.test(str4) + "
");//true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
99、如何在 HTML 中添加事件,几种方法?

1、标签之中直接添加 onclick="fun()";
2、JS 添加 Eobj.onclick = method;
3、现代事件 IE9 以前: obj.attachEvent(‘onclick‘, method);
标准浏览器: obj.addEventListener(‘click‘, method, false);

100、BOM 对象有哪些,列举 window 对象?

1、window 对象 ,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的
属性;
2、document 对象,文档对象;
3、location 对象,浏览器当前 URL 信息;
4、navigator 对象,浏览器本身信息;
5、screen 对象,客户端屏幕信息;
6、history 对象,浏览器访问历史信息

101、请用代码实现 outerHTML

//说明:outerHTML 其实就是 innerHTML 再加上本身;
Object.prototype.outerHTML = function(){
var innerCon = this.innerHTML, //获得里面的内容
outerCon = this.appendChild(innerCon); //添加到里面
alert(outerCon);
}
1
2
3
4
5
6
演示代码:





Document



hello




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
102、JS 中的简单继承 call 方法!

//定义一个父母类,注意:类名都是首字母大写的哦!
function Parent(name, money){
this.name = name;
this.money = money;
this.info = function(){
alert(‘姓名: ‘+this.name+‘ 钱: ‘+ this.money);
}
}
//定义孩子类
function Children(name){
Parent.call(this, name); //继承 姓名属性,不要钱。
this.info = function(){
alert(‘姓名: ‘+this.name);
}
}
//实例化类
var per = new Parent(‘parent‘, 800000000000);
var chi = new Children(‘child‘);
per.info();
chi.info();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
103、bind(), live(), delegate()的区别

bind: 绑定事件,对新添加的事件不起作用,方法用于将一个处理程序附加
到每个匹配元素的事件上并返回 jQuery 对象。

live: 方法将一个事件处理程序附加到与当前选择器匹配的所有元素(包含
现有的或将来添加的)的指定事件上并返回 jQuery 对象。

delegate: 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有
元素(现有的或将来的)的一个或多个事件上。

104、typeof 的返回类型有哪些?

alert(typeof [1, 2]); //object
alert(typeof ‘leipeng‘); //string
var i = true;
alert(typeof i); //boolean
alert(typeof 1); //number
var a;
alert(typeof a); //undefined
function a(){;};
alert(typeof a) //function
1
2
3
4
5
6
7
8
9
105简述 link 和 import 的区别?

区别 1:link 是 XHTML 标签,除了加载 CSS 外,还可以定义 RSS 等其他事务;@import
属于 CSS 范畴,只能加载 CSS。

区别 2:link 引用 CSS 时,在页面载入时同时加载;@import 需要页面网页完全载入
以后加载。

区别 3:link 是 XHTML 标签,无兼容问题;@import 是在 CSS2.1 提出的,低版本的浏
览器不支持。

区别 4:link 支持使用 Javascript 控制 DOM 去改变样式;而@import 不支持

106、、已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼 峰表示法”getElementById”。

答案:

function combo(msg){
var arr = msg.split("-");
var len = arr.length; //将 arr.length 存储在一个局部变量可以提高 for 循环效率
for(var i=1;i
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
}
msg=arr.join("");
return msg;
}
1
2
3
4
5
6
7
8
9
107、你如何优化自己的代码?

代码重用
避免全局变量(命名空间,封闭空间,模块化 mvc..)
拆分函数避免函数过于臃肿:单一职责原则
适当的注释,尤其是一些复杂的业务逻辑或者是计算逻辑,都应该写出这个业务逻辑的具体过程
内存管理,尤其是闭包中的变量释放
变量的命名规范:尤其是在实际项目中

$div:代表一个jquery对象

dom:代表一个原生的dom对象

希望一个函数是构造函数:函数的首字母都要大写

变量一定要语义化

108、请简要描述web前端性能需要考虑哪方面,你的优化思路是什么?

//参见雅虎14web优化规则

//0、减少http请求:

//1、小图弄成大图(雪碧图、精灵图),

//2、合理的设置缓存 localStorage cookie

//3、资源合并、压缩 html代码的最小化,压缩体积:就是减少带宽

//4、一些小的js文件合并成大的js文件

//5、将外部的js文件置底

109、、简述 readyonly 与 disabled 的区别

readonly 只针对 input(text/password)和 textarea 有效,

而 disabled 对于所有的表单元素都有效,

当表单元素在使用了 disabled 后,当我们将表单以 POST 或 GET 的方式提交的话,这个元素的值不会被传递出去,而 readonly 会将该值传递出 去

110、写出 3 个使用 this 的典型应用

构造函数中使用 this,
原型中使用 this,
对象字面量使用 this

111、请尽可能详尽的解释 ajax 的工作原理

思路:先解释异步,再解释 ajax 如何使用 Ajax 的原理

简单来说通过 XmlHttpRequest 对象来向服务器发送异步请求,从服务器获得数据, 然后用javascript来操作DOM而更新页面。

这其中最关键的一步就是从服务器获得请求数据。 要清楚这个过程和原理,我们必须对 XMLHttpRequest 有所了解。

XMLHttpRequest 是 ajax 的核心机制,它是在 IE5 中首先引入的,是一种支持异步请求的 技术。简单的说,也就是 javascript 可以及时向服务器提出请求和处理响应,而不阻塞用户。 达到无刷新的效果。

112、为什么扩展 javascript 内置对象不是好的做法?

因为扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性

113、浏览器标准模式和怪异模式之间的区别是什么?

标准模式是指,浏览器按 W3C 标准解析执行代码;

怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一 样,所以我们称之为怪异模式。

浏览器解析时到底使用标准模式还是怪异模式,与你网页中的 DTD 声明直接相关,DTD 声 明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页 并显示,忽略 DTD 声明,将使网页进入怪异模式

114、如果设计中使用了非标准的字体,你该如何去实现?

先通过 font-face 定义字体,再引用

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘), url(‘Sansation_Light.eot‘); /* IE9+ */
}
1
2
3
4
5
115、HTTP 协议中,GET 和 POST 有什么区别?分别适用什么场

景 ?
get 传送的数据长度有限制,post 没有
get 通过 url 传递,在浏览器地址栏可见,
post 是在报文中传递

适用场景:
post 一般用于表单提交
get 一般用于简单的数据查询,严格要求不是那么高的场景

116、HTTP 状态消息 200 302 304 403 404 500 分别表示什么

200:请求已成功,请求所希望的响应头或数据体将随此响应返回。

302:请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的,客户端应当 继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下, 这个响应才是可缓存的

304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上 次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304 响应禁 止包含消息体,因此始终以消息头后的第一个空行结尾。

403:服务器已经理解请求,但是拒绝执行它。

404:请求失败,请求所希望得到的资源未被在服务器上发现。

500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这 个问题都会在服务器端的源代码出现错误时出现。

117、 HTTP 协 议 中 , header 信 息 里 面 , 怎 么 控 制 页 面 失 效 时 间 (last-modified,cache-control,Expires 分别代表什么)

?

118、请列举 js 数组类型中的常用方法
————————————————

?

javascript:
JavaScript中如何检测一个变量是一个String类型?请写出函数实现

方法1、

function isString(obj){
return typeof(obj) === "string"? true: false;
// returntypeof obj === "string"? true: false;
}
方法2、

function isString(obj){
return obj.constructor === String? true: false;
}
方法3.

function isString(obj){
return Object.prototype.toString.call(obj) === "[object String]"?true:false;
}
如:
var isstring = isString(‘xiaoming‘);
console.log(isstring); // true
请用js去除字符串空格?

方法一:使用replace正则匹配的方法

去除所有空格: str = str.replace(/\s*/g,"");

去除两头空格: str = str.replace(/^\s*|\s*$/g,"");

去除左空格: str = str.replace( /^\s*/, “”);

去除右空格: str = str.replace(/(\s*$)/g, "");

str为要去除空格的字符串,实例如下:

var str = " 23 23 ";
var str2 = str.replace(/\s*/g,"");
console.log(str2); // 2323
方法二:使用str.trim()方法

str.trim()局限性:无法去除中间的空格,实例如下:

var str = " xiao ming ";
var str2 = str.trim();
console.log(str2); //xiao ming
同理,str.trimLeft(),str.trimRight()分别用于去除字符串左右空格。

方法三:使用jquery,$.trim(str)方法

$.trim(str)局限性:无法去除中间的空格,实例如下:

var str = " xiao ming ";
var str2 = $.trim(str)
console.log(str2); // xiao ming
你如何获取浏览器URL中查询字符串中的参数?

测试地址为:http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23

实例如下:

复制代码
function showWindowHref(){
var sHref = window.location.href;
var args = sHref.split(‘?‘);
if(args[0] == sHref){
return "";
}
var arr = args[1].split(‘&‘);
var obj = {};
for(var i = 0;i< arr.length;i++){
var arg = arr[i].split(‘=‘);
obj[arg[0]] = arg[1];
}
return obj;
}
var href = showWindowHref(); // obj
console.log(href[‘name‘]); // xiaoming
复制代码

js 字符串操作函数

  我这里只是列举了常用的字符串函数,具体使用方法,请参考网址。

concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。

indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。

charAt() – 返回指定位置的字符。

lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 。

match() – 检查一个字符串是否匹配一个正则表达式。

substr() 函数 -- 返回从string的startPos位置,长度为length的字符串

substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。

slice() – 提取字符串的一部分,并返回一个新字符串。

replace() – 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。

search() – 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。

split() – 通过将字符串划分成子串,将一个字符串做成一个字符串数组。

length – 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。

toLowerCase() – 将整个字符串转成小写字母。

toUpperCase() – 将整个字符串转成大写字母。

怎样添加、移除、移动、复制、创建和查找节点?

1)创建新节点

  createDocumentFragment() //创建一个DOM片段
  createElement() //创建一个具体的元素
  createTextNode() //创建