前端面试合集 / 憋错料

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.<keep-alive></keep-alive>的作用是什么?

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 为什么只写<!DOCTYPE HTML>

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.<img>的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 的区别？

微信小程序开发

初识小程序

1.注册小程序

2.微信开发者工具

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

4.小程序尺寸单位rpx

5.样式导入（WeUI for）

6.选择器

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

8.微信小程序长按识别二维码

9.给页面加背景色

10.微信小程序获取用户信息

11.代码审核和发布

12.小程序微信认证

13.小程序申请微信支付

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.微信小程序支付问题

小程序项目实战

35.微信小程序本地数据缓存

36.下拉刷新和下拉加载

37.列表页向详情页跳转（动态修改title）

38.客服电话

39.星级评分组件

40.小程序插槽的使用slot

41.模糊查询

42.wxs过滤

43.小程序动画

44.列表根据索引值渲染

45.小程序动态修改class

46.小程序常用框架

47.参数传值的方法

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

49.微信小程序的优劣势

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

51.微信小程序给按钮添加动画

52.微信小程序的tab按钮的转换

53.微信小程序引进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框架）：

<!--[if lt IE 9]>

<![endif]-->

如何区分：

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

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

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

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

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

文件最小化/文件压缩

使用CDN托管

缓存的使用

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

新的 HTML5 文档类型和字符集是？
答：HTML5文档类型：<!doctype html>

HTML5使用的编码<meta charset=”UTF-8”>

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> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

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

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

: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框架

<!--[if lt IE 9]>

<![endif]-->

你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?
* 首先划分成头部、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.

</audio>

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

Your browser does‘nt support video embedding feature.

</video>

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

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

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

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

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

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

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

(写)描述一段语义的html代码吧。
（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）

就是基于语义化设计原则）

< div id="header">

< h1>标题< /h1>

< h2>专注Web前端技术< /h2>

< /div>

语义 HTML 具有以下特性：

文字包裹在元素中，用以反映内容。例如：

段落包含在 <p> 元素中。

顺序表包含在<ol>元素中。

从其他来源引用的大型文字块包含在<blockquote>元素中。

HTML 元素不能用作语义用途以外的其他目的。例如：

<h1>包含标题，但并非用于放大文本。

<blockquote>包含大段引述，但并非用于文本缩进。

空白段落元素 ( <p></p> ) 并非用于跳行。

文本并不直接包含任何样式信息。例如：

不使用 <font> 或 <center> 等格式标记。

类或 ID 中不引用颜色或位置。

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage区别
sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间；

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

* 绘画 canvas

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

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

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

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

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

新的技术webworker, websockt, Geolocation

* 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

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

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

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

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

<!--[if lt IE 9]>

<![endif]-->

如何区分： DOCTYPE声明\新增的结构元素\功能元素
语义化的理解？
用正确的标签做正确的事情！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；

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

写出HTML5的文档声明方式

HTML5和CSS3的新标签

HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...

CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image,

border-color, transform...;

自己对标签语义化的理解
在我看来，语义化就是比如说一个段落，那么我们就应该用 <p>标签来修饰，标题就应该用 <h?>标签等。符合文档语义的标签。

第一阶段 HTML、CSS、HTML5、CSS3
1、XHTML与HTML的有何异同？

HTML是一种基于WEB的网络设计语言，XHTML是基于XML的置标语言，XHTML可以认为是XML版的HTML，所以它的语法比较严谨：元素必须关闭，嵌套必须正确，大小写区分，属性值必须用双引号，id属性代替name属性

2、介绍一下CSS的盒子模型？弹性盒子模型是什么？

盒子模型由content+padding+border+margin组成，分为标准盒子和IE盒子，标准盒子的width指content，IE盒子的width包括content，padding，border

3、Doctype的作用？标准模式与兼容模式各有什么区别?

声明在文档的第一行，位于html的前面，用于告知浏览器的解析器以什么样的文档标准来解析这个文档，如果没有声明文档就会以兼容模式呈现
标准模式的排版和JS都是以浏览器支持的最高的标准运行
兼容模式页面以宽松向后兼容的方式显示，模仿老式浏览器，防止站点无法工作

4、HTML5 为什么只需要写？

HTML不急于SGML，不用引用DTD

5、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
常见的空元素：br hr img input link meta
6、页面导入样式时，使用link和@import有什么区别？

link是XHTML的标签，不但可以引入CSS还可以引入RSS，定义REL属性等
@import是CSS2.1提出的，只能引入CSS
link在页面加载时同时加载，@import要等页面加载完才加载

7、介绍一下你对浏览器内核的理解？

浏览器内核分为渲染引擎和JS引擎

8、常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

9、HTML5有哪些新特性、移除了那些元素？

新特性：

画布canvas
用于媒介播放的video和audio
新的语义化标签：article，header，nav，section，footer
新的本地存储：localstorage，sessionstorage
新的表单控件：date，time，calendar，url
新的技术：websocket，web worker，geoloacation
移除得元素：
可以用css代替的元素，font，fontbase，center，s，tt，u
10、简述一下你对HTML语义化的理解？

可以清晰的向浏览器和开发者描述其意义，为了在丢失css的情况下也能很好的显示页面的结构，利于seo，seo可以根据标签和上下文己算权重，方便其他设备解析，方便开发和维护，可读性高

11、iframe有那些缺点？

会有过多的http请求，影响性能，会阻塞主页面的onload事件，不利于seo，页面调试样式很麻烦，会出现很多滚动条，浏览器后退按钮会没有效果，小型移动设备兼容性不好，会显示不全

12、列出display的值，说明他们的作用？position的值， relative和absolute定位原点是？

display：none，block，inline，inline-block，flex，grid，table，table-cell
position：static，relatice，absolute，fixed，sticky
relative定位原点是自己，absolute定位原点是离自己最近的父元素

13、一个满屏品字布局如何设计?

14、常见兼容性问题？

https://blog.csdn.net/xustart7720/article/details/73604651?utm_source=blogxgwz0

15、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里面试题）

除了电竞显示器，一般显示器是60hz，所以最小间隔为1000/60 = 16.7ms

16、列举IE 与其他浏览器不一样的特性？

IE支持currentStyle，FIrefox使用getComputStyle
IE 使用innerText，Firefox使用textContent
滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
事件方面：IE：attachEvent：火狐是addEventListener
鼠标位置：IE是event.clientX；火狐是event.pageX
IE使用event.srcElement；Firefox使用event.target
IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none
CSS圆角：ie7以下不支持圆角
25、cssSprite是什么？有什么优缺点？

精灵图是一种网页图片的应用技术，它把背景图片都整合到一张图片上，再利用background-position进行图片定位，优点是有效的减少了http请求，减少了图片的字节，缺点是合成比较麻烦，需要精准定位

27、前端页面有哪三层构成？分别是什么？作用是什么？

结构层由HTML负责，负责搭建页面的结构
表示层由CSS负责，负责页面的样式
行为层由JavaScript负责，负责页面的交互

29、如何用CSS分别单独定义ie6 IE7 IE8 IE9 IE10的width属性

用hack选择器，根据不同的浏览器识别不同的hack选择器的原理，给每一种浏览器都单独设定width属性

30、在CSS中哪些属性可以同父元素继承。

visibility，cursor，font-size，color…

31、谈谈以前端的角度出发做好seo需要做什么

1、提高页面加载速度。能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。
2、结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影响阅读的情况下再去加载JS文件。
3、优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能单独加个Sitemap页面，将网站结构一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。
4、集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。
5、文本强调标签的使用。当着重强调某个关键词需要加粗表示，选用strong标签比使用b标签要更有强调作用。
6、 a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。
7、图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上。
8、 H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。

32、css选择符有哪些？优先级算法如何计算？

标签选择符，类选择符，ID选择符，伪类选择符，相邻选择符，子代选择符，后代选择符，通配符选择符，属性选择符
优先级：

就近原则，下面覆盖上面
!important＞内联＞ID＞类＞标签
37、document load 和document ready 的区别

1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

39、哪些浏览器支持html5？

现代的浏览器都支持，早期不支持的浏览器也可以让他支持

40、css 中的使用列布局是什么？为了实现列布局我们需要指定哪些内容？

可以帮助你分配文字为一个个列，需要指定列数和列之间的间隔

41、描述css reset的作用和用途？

每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css reset

42、写出5 种以上ie6 bug 的解决方法，哪些你认为是解决起来最麻烦的？

float情况下有双边距的bug，使用display: inline解决
宽高为奇数时有bug，使用偶数
min-height设置不了，加!important
z-index问题，给父亲设置position：relative
设置高度小与10px左右的时候，实际高度高于设置高度，因为有默认行高，把行高也设置
44、什么是Web workers？为什么我们需要他？

一个运行在后台的JavaScript，有助于异步执行JavaScript，提高页面性能

46、写出至少三个CSS3中新添加的样式属性的名字及参数。

阴影，rgba，圆角

47、给一个元素添加CSS样式有哪几种方法说说他们的优先级。

引用css，内联样式，head里style标签内样式

48、多人项目中，你如何规划css文件样式命名。

写在一个文档里，大家按照文档命名

49、为了让网页更快的加载，你会如何处理你的css文件和js文件，以及图片文件，页面性能优化你还知道哪些方法。

51、HTML中div与span区别；

div是块级元素，独自占一行，宽度默认是占满父级的宽度，可以设置宽高
span是行内元素，排列在一行里，宽度是内容的宽度，不能设置宽高

52、HTML5 存储类型有哪些，以及与他们的区别；

cookies，localstorage，sessionstorage
cookies的存储容量比较小而且数量有限制，一般为4K左右，localstorage的可以高达5M以上
cookies在设置的时间之前有效，localstorage本地永久存储，sessionstorage在当前窗口有效
cookies每次http请求都会被携带，会造成带宽浪费，localstorage和sessionstorage是保存在本地

53、css实现垂直水平居中（口语描述）。

定位，top和left设置50%，再通过transform的translate(-50%, -50%)设置实现垂直水平居中
定位，top和left设置50%，再通过margin-top和margin-left自己宽高的一半设置实现垂直水平居中
定位，top，bottom，left，right都设置为0，再通过margin设置为auto实现垂直水平居中
flex布局，先设置justify-content为center实现水平居中，再设置align-items为center实现垂直居中
table布局，设置父元素display为table-cell，再设置vertical-align为middle实现垂直居中，把自己display设置为inline-block，父级设置text-align为center实现水平居中

55、列举5种以上表单元素中input的type类型；

text，password，submit，button，checkbox，reset，radio，date，time，url，email

56、alt和title分别表示什么含义以及具体应用体现；

alt是代替图片的文字，图片不能显示时会显示alt，title是鼠标指上去时的解释文字

67、什么事css预处理器；

less和sass等等，可以提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。

68、css3中你最常用的有哪些？说明用法。

选择器：nth-child，first-child，last-child
自定义字体@font-face
rgba，阴影，圆角之类的
transition，transform
animation 先绑定后使用

69、document.write、innerHTML和innerText 的区别？

document.write会重写页面，之前的html会被覆盖，innerHTML包括标签以及标签里面的内容，innerText不包括标签，只指里面的文本

72、实现 class为test的div 在屏幕宽为400一下的宽度为200，屏幕宽为400~800的情况下宽度为350；

@media screen and (max-width: 400) {
.test {
width: 200px;
}
}
@media (min-width:400px) and (max-width:800px) {
.test {
width: 350px;
}
}
1
2
3
4
5
6
7
8
9
10
73、实现当屏幕宽度大雨700,小于800是时引用外部样式style-7-9.css

74、HTML中input的6个新属性

time，date，url，email，search，calendar，number

76、对WEB标准以及W3C的理解与认识

WEB标准分为结构，表现和行为
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
1）。标签字母要小写
2）。标签要闭合
3）。标签不允许随意嵌套
2.对于css和js来说
1）。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2）。样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3）。不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

78、Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

79、行内元素有哪些?块级元素有哪些?CSS的盒模型?

80、CSS引入的方式有哪些? link和@import的区别是?

81、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

82、标签选择符类选择符 id选择符

83、标签上title与alt属性的区别是什么?

84、描述css reset的作用和用途

85、解释css sprites，如何使用。

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

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

88、清除浮动的几种方式，各自的优缺点

89、CSS3有哪些新特性？

90、CSS中的class和id有什么区别。

91、请说一下移动端常见的适配不同屏幕大小的方法。

92、一个高宽未知的图片如何在一个比他大的容器内水平居中。

93、Table标签的作用是什么。

94、定义链接四种状态的伪类的正确书写顺序是？

95、你知道的css选择器有哪些。

96、遇到疑难问题时，你通常时如何解决的？

97、Inline，inline-block和block的区别是。

98、页面导入样式时，使用link和@import有什么区别。

99、CSS超过宽度的文字显示点点，必须要设置的属性。

100、设置文字阴影属性。设置表格边框合并属性。

101、文本强制换行。

102、display：none与visibility:hidden的区别是什么？

103、超链接访问过后hover样式后会出现什么问题？如何解决。

104、前端页面有那三部分构成，其作用是什么。

105、写出至少三个css3中新添加的样式属性的名字及参数。

106、给一个元素添加css样式有哪几种方法说说他们的优先级。

107、多人项目中，你如何规划css文件样式命名。

108、为了让网页更快的加载，你会如何处理你的css文件和js文件，以及图片文件，页面性能优化你还知道哪些方法。

109、你经常遇到的浏览器兼容性有哪些？通常是怎么处理的。

110、HTML中div与span区别；

111、HTML5 存储类型有哪些，以及与他们的区别；

112、css实现垂直水平居中。

113、浏览器内核分别是什么；

114、列举5种以上表单元素中input的type类型；

115、alt和title分别表示什么含义以及具体应用体现；

116、css中position的属性值都有哪些？并描述其含义及具体解释；

117、对html语义化理解，以及语义化有哪些优点。

118、经常使用的页面开发工具级测试工具。

119、经常使用什么脚本库，开发或使用什么应用或组件；

120、使用css如何让一个宽度为200px的div水平居中，（要求兼容ie，可提供多种方法）；

121、简要画出盒模型，并描述关键要素的含义；

122、页面构造中你遇到过什么样的兼容问题，如何解决

123、Doctype作用？标准模式与兼容模式有什么区别；

124、html5有哪些新特性，移除了哪些元素；

125、介绍一下标准css盒子模型；

126、什么事css预处理器；

127、css3有哪些新特性；

128、html5 中的应用缓存是什么？

129、本地存储和cookies’之间的区别是什么

130、简单介绍boostrap栅格系统

131、你如何对网站的文件和资源进行优化？

132、ie 和标准下有哪些兼容性的写法

133、get和post区别？

134、Doctype的作用是什么？

135、浏览器标准模式和怪异模式的区别是什么。

136、解释一下浮动和它的工作原理。

137、列举不同的清除浮动的方法，并指出他们各自适用的场景。

HTML XHML HTML5的关系

HTML属于SGML
XHML属于XML,是Html进行XML严格化的结果
HTML5简单点理解成：h5≈ html+CSS 3+js+API，减少对外部插件的需求（比如 Flash），更优秀的错误处理，更多取代脚本的标记
HTML5新特性

新的语义化元素：article 、footer 、header 、nav 、section
表单增强，新的表单控件：calendar 、date 、time 、email 、url 、search
新的API：音频(用于媒介回放的video和audio元素)、图形（绘图canvas元素）
新的API：离线，通过创建 cache manifest 文件，创建应用程序缓存
新的API：本地存储，localStorage-没有时间限制的数据存储，sessionStorage-session数据存储（关闭浏览器窗口数据删除）
新的API：实时通讯，设备能力
JS获取宽高如何获取盒模型对应的宽高

1、dom.style.width/height
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的

2、dom.currentStyle.width/height
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到，只有IE浏览器支持该方式

3、window.getComputedStyle(dom).width/height
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些

4、 dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的

5、 dom.offsetWidth/offsetHeight

边距重叠

边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界

BFC

块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局

BFC的原理
1、内部的box会在垂直方向，一个接一个的放置
2、每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
3、box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
4、bfc的区域不会与浮动区域的box重叠
5、bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
6、计算bfc高度的时候，浮动元素也会参与计算

怎么创建bfc（边距重叠产生原因）

1、float属性不为none（脱离文档流）
2、position为absolute或fixed
3、display为inline-block,table-cell,table-caption,flex,inine-flex
4、overflow不为visible
5、根元素的垂直margin不会被重叠

防止外边距重叠解决方案

1、外层元素padding代替
2、内层元素透明边框 border:1px solid transparent;
3、内层元素绝对定位 postion:absolute
4、外层元素 overflow:hidden;
5、内层元素加float:left;或display:inline-block;
6、内层元素padding:1px;

BFC应用场景

1、自适应两栏布局 2、清除内部浮动

浮动float误解和误用

float 被设计出来的初衷是用于文字环绕效果，即一个图片一段文字，图片float:left之后，文字会环绕图片
但是，后来大家发现结合float + div可以实现之前通过table实现的网页布局，因此就被“误用”于网页布局了

为何 float 会导致父元素塌陷？

1、float 的破坏性 —— float 破坏了父标签的原本结构，使得父标签出现了坍塌现象。
2、导致这一现象的最根本原因在于：被设置了 float 的元素会脱离文档流，我们的浮动是左右浮动，所以我们的块级元素都是左右排列。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题
3、包裹性也是 float 的一个非常重要的特性，普通的 div 如果没有设置宽度，它会撑满整个屏幕，在之前的盒子模型那一节也讲到过。而如果给 div 增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容中的三个字包裹了——这就是包裹性。为 div 设置了 float 之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器清空格，对于高度不同的容器，float 排版出来的网页严丝合缝，

PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em

rem

REM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值

px em rem浏览器的兼容性

除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果

HTML渲染过程

构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree）
构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树
执行Javaｓｃｒｉｐｔ：加载并执行Javaｓｃｒｉｐｔ代码（包括内联代码或外联Javaｓｃｒｉｐｔ文件）
构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性
布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置
绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成
重排或者叫回流（reflow，relayout）

这个过程就是通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
将其安置在浏览器窗口的正确位置
触发：增加、删除、修改、移动、修改css样式
重绘(redraw)

浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
重绘不会带来重新布局，并不一定伴随重排
触发：dom改变，css移动，改变visibility、outline、背景色等属性

、
微信小程序面试资料

一：面试题

1、简单描述下微信小程序的相关文件类型？

答：微信小程序项目结构主要有四个文件类型,如下

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

一、WXML （WeiXin Markup Language）

是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。

二、WXSS (WeiXin Style Sheets)

是一套样式语言，用于描述 WXML 的组件样式，

二、js

逻辑处理，网络请求

三、json

小程序设置，如页面注册，页面标题及tabBar。

四、app.json

必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

我们简单说一下这个配置各个项的含义:

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

五、app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

六、app.wxss

全局配置的样式文件，项目非必须。

2、你是怎么封装微信小程序的数据请求的？

答：一、将所有的接口放在统一的js文件中并导出；

二、在app.js中创建封装请求数据的方法；

三、在子页面中调用封装的方法请求数据。

3、有哪些参数传值的方法？

答：一、给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象；

二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值；

三、在navigator中添加参数传值。

4、你使用过哪些方法，来提高微信小程序的应用速度？

答：一、提高页面加载速度；

二、用户行为预测；

三、减少默认data的大小；

四、组件化方案。

5、小程序与原生App哪个好？

答：小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。

6、简述微信小程序原理？

答：微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。

JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。

WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。

WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。

微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。

小程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理。

7、分析下微信小程序的优劣势？

答：优势：1、无需下载，通过搜索和扫一扫就可以打开。

2、良好的用户体验：打开速度快。

3、开发成本要比App要低。

4、安卓上可以添加到桌面，与原生App差不多。

5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。

劣势：1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。

2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。

3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。

4、依托于微信，无法开发后台管理功能。

8、微信小程序与H5的区别？

答：第一条是运行环境的不同:

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

第二条是开发成本的不同:

只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG

第三条是获取系统级权限的不同:

系统级权限都可以和微信小程序无缝衔接

第四条便是应用在生产环境的运行流畅度:

长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立.

9、怎么解决小程序的异步请求问题？

答：在回调函数中调用下一个组件的函数：

app.js

success: function (info) {

that.apirtnCallback(info)

}

index.js

onLoad: function () {

app.apirtnCallback = res => {

console.log(res)

}

｝

10、小程序的wxss和css有哪些不一样的地方？

答：一、wxss的图片引入需使用外链地址；

二、没有Body；样式可直接使用import导入.

11、webview中的页面怎么跳回小程序中？

答：首先要引入最新版的jweixin-1.3.2.js，然后

wx.miniProgram.navigateTo({

url: ‘/pages/login/login‘+‘$params‘

})

12、小程序关联微信公众号如何确定用户的唯一性？

答：使用wx.getUserInfo方法withCredentials为 true 时可获取encryptedData，里面有 union_id。后端需要进行对称解密。

13、如何实现下拉刷新？

答：用view代替scroll-view,,设置onPullDownRefresh函数实现

14、使用webview直接加载要注意哪些事项？

答: 一、必须要在小程序后台使用管理员添加业务域名；

二、h5页面跳转至小程序的脚本必须是1.3.1以上；

三、微信分享只可以都是小程序的主名称了，如果要自定义分享的内容，需小程序版本在1.7.1以上；

四、h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的。

15、小程序调用后台接口遇到哪些问题？

答：1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；

2.小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。

16、webview的页面怎么跳转到小程序导航的页面？

答：小程序导航的页面可以通过switchTab，但默认情况是不会重新加载数据的。若需加载新数据，则在success属性中加入以下代码即可：

success: function (e) {

var page = getCurrentPages().pop();

if (page == undefined || page == null) return;

page.onLoad();

}

webview的页面，则通过

wx.miniProgram.switchTab({

url: ‘/pages/index/index‘

})

17、小程序和Vue写法的区别？

答：一、循环遍历的时候：小程序是wx:for="list"，而Vue是v-for="infoin list"

二、调用data模型的时候：小程序是this.data.uinfo，而Vue是this.uinfo；给模型赋值也不一样，小程序是this.setData({uinfo:1})，而Vue是直接this.uinfo=1

18、小程序的双向绑定和vue哪里不一样？

答：小程序直接this.data的属性是不可以同步到视图的，必须调用：

this.setData({

noBind:true

})

二：常见问题

1.rpx（responsivepixel）

微信小程序新定义了一个尺寸单位，可以适配不同分辨率的屏幕，它规定屏幕宽为750rpx，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px =750物理像素，1rpx = 0.5px = 1物理像素。

2.40013错误

在微信小程序刚出来的时候如果没输入AppID，提示这个信息就表示没有破解，但是现在官方软件更新可以选择无AppID开发，我们可以通过选择无AppID，即可解决此错误。建议安装官方开发工具。

3.-4058错误

微信小程序创建项目时选择无AppID，创建项目时会生成app.json，app.josn是程序启动最重要的文件，程序的页面注册，窗口设置，tab设置及网络请求时间设置都是在此文件下的。如果你创建的项目目录下没有app.json文件就会报下面的错误。

我们看到上面的错误信息中有个数字-4058，这应该是初入微信小程序遇到最多的错误了，这种一般都是文件缺失，后面有个path，可以对着该路径看看是否存在这个文件。造成这种错误的原因一般都是创建项目选择的目录不正确，或者在app.json注册了一个不存在的页面。

当然还有一种情况就是在app.json文件的pages注册的页面是没有创建的，或者你删除了某个页面，但是没有取消注册也会是-4058错误。

4.Page注册错误

这个错误可能很容易理解，页面注册错误。页面是通过Page对象来渲染的，每个页面对应的js文件必须要创建page，最简单的方式就是在js文件下写入Page({})，在page中有管理页面渲染的生命周期，以及数据处理，事件都在这完成。这个错误引起的原因一般都是刚创建页面，js文件还有有处理或者忘了处理。所以要养成创建页面的同时在js文件先创建Page的习惯.

5.Page route错误

字面意思就是页面路由错误，在微信中有两种路由方式一种是在wxml文件使用

如下代码：

wxml文件：

<navigatorurl="search/search">

<viewclass="serach_view_show" bindtap="bindtap"> 搜索</view>

</navigator>

js文件事件处理函数：

bindtap:function(event){

wx.navigateTo({

url: "search/search"

})

}

如果你这样写的话，恭喜你，你就会看到上面提示的错误，这是因为重复调用路由引起的，处理方法就是删除一个路由，删除<navigator />组件或者删除wx.navigateTo。除了上面说的可能导致路由错误外，还有一种情况，类似于下面的代码

<navigatorurl="search/search">

<viewclass="serach_view_show" bindtap="bindtap"> 搜索</view>

</navigator>

这种也是不允许的，也就是说<navigator/>组件内部不能再嵌套<navigator/>组件。它只能是单层存在的。

6.Do not have * handler in currentpage.

大概意思就是当前页面没有此处理，让确定是否已经定义，还指出了错误出现的可能位置pages/message/message,其实这种问题出现一般就是我们在wxml定义了一些处理事件，但是在js文件中没有实现这个时事件的处理方法，就会出现这个错误。那么我们按提示在js文件加上事件处理，如下代码，加上后就不会再有此错误提示。

bindtap:function(event){

wx.navigateTo({

url:"search/search"

})

7.tabBar设置不显示

对于tabBar不显示，原因有很多，查找这个错误直接去app.json这个文件，最常见的也是刚学习微信小程序最容易犯的错误无外乎下面几种

注册页面即将页面写到app.json的pages字段中，如

"pages":[

"pages/message/message",

"pages/contact/contact",

"pages/dynamic/dynamic",

"pages/dynamic/music/music",

"pages/index/index",

"pages/logs/logs"

]

· tabBar写法错误导致的不显示，将其中的大写字母B写成小写，导致tabBar不显示。

· tabBar的list中没有写pagePath字段，或者pagePath中的页面没有注册

· tabBar的list的pagePath指定的页面没有写在注册页面第一个。微信小程序的逻辑是"pages"中的第一个页面是首页，也就是程序启动后第一个显示的页面，如果tabBar的list的pagePath指定的页面都不是pages的第一个，当然也就不会显示tabBar了。

· tabBar的数量低于两项或者高于五项，微信官方中明确规定tabBar的至少两项最多五项。超过或者少于都不会显示tabBar。

8. 生命周期函数

· onLoad: 页面加载

o 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

· onShow: 页面显示

o 每次打开页面都会调用一次。

· onReady: 页面初次渲染完成

o 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

o 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

· onHide: 页面隐藏

o 当navigateTo或底部tab切换时调用。

· onUnload: 页面卸载

o 当redirectTo或navigateBack的时候调用。

9.wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

10.本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用<image/>标签

11.页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中<navigator/>组件实现的，不管哪种实现都会有一个重要的参数就是url，它指定了要跳转的页面，并且页面之间数据传递也是通过url来实现的，这个数据传递有点类似于我们使用的get网络请求，把参数都拼接在要跳转界面地址的后面并以“？”连接。然后将要传入的数据以键和值的形式追加在"?"后面，多个参数直接用"&"符合。如我们点击消息聊天记录，将列表上的数据传到下一个页面，可以这样写。

<navigatorurl="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">

<viewclass="item" >

<viewclass="item-left">

<imagesrc="{{item.url}}" class="image"/>

</view>

<viewclass="item-middle">

<view>

<textclass="title">{{item.title}}</text>

</view>

<view>

<textclass="message">{{item.message}}</text>

</view>

<viewclass="item_right">

<viewclass="mark" wx:if="{{item.count>0}}"><textclass="text">{{item.count}}</text></view>

</view>

</navigator>

而数据接收是在js文件的page里接收的，page生命周期有一个onLoad函数，它就是做一些初始化数据的工作，onLoad函数有一个参数options，我们就可以通过key将数据获取，如下

Page({

data:{

// text:"这是一个页面"

isHiddenToast:true

}

onLoad:function(options){

// 页面初始化 options为页面跳转所带来的参数

console.log(options.title)

console.log(options.message)

onReady:function(){

// 页面渲染完成

onShow:function(){

// 页面显示

onHide:function(){

// 页面隐藏

onUnload:function(){

// 页面关闭

bindtap:function(event){

wx.navigateTo({

url: "/pages/message/search/search"

})

13.ajax的步骤

什么是ajax?

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。

如何使用ajax?

第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。

var xhttp;

if (window.XMLHttpRequest) {

//现代主流浏览器

xhttp = new XMLHttpRequest();

} else {

// 针对浏览器，比如IE5或IE6

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。

第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数

14.xml和json的区别，请用四个词语来形容

· JSON相对于XML来讲，数据的体积小，传递的速度更快些

· JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互

· XML对数据描述性比较好；

· JSON的速度要远远快于XML

15.清楚浮动的方法？(多次出现在面试题)

1.父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2，结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
3，父级div定义伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持
4，父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

16.box-sizing常用的属性有哪些？分别有什么作用？

属性值

· box-sizing：content-box

· box-sizing：border-box

· box-sizing：inherit

content-box

· 这是box-sizing的默认属性值

· 是CSS2.1中规定的宽度高度的显示行为

· 在CSS中定义的宽度和高度就对应到元素的内容框

· 在CSS中定义的宽度和高度之外绘制元素的内边距和边框

border-box

· 在CSS中微元素设定的宽度和高度就决定了元素的边框盒

· 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

· CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

17.css选择器有哪些，选择器的权重的优先级

选择器类型

1、ID　　#id

2、class　　.class

3、标签　　p

4、通用　　*

5、属性　　[type="text"]

6、伪类　　：hover

7、伪元素　　::first-line

8、子选择器、相邻选择器

三、权重计算规则

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 继承的样式没有权值。

18. 块级元素水平垂直居中的方法有哪些（三个方法）

让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！

　实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

CSS代码：

.mycss{

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin:-100px 0 0 -150px }

实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

CSS代码：

.mycss{

position: absolute;

left: 0px;

right: 0;

top: 0;

bottom: 0;

margin: auto;

height: 200px;

width: 300px;

}

jQuery实现水平和垂直居中

　原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置div等块级元素的CSS。

jquery代码：

$(window).resize(function(){

$(".myblock").css({

position: "absolute",

left: ($(window).width() - $(".myblock").outerWidth())/2,

top: ($(window).height() - $(".myblock").outerHeight())/2 });

});

此外在页面载入时，就需要调用resize()方法

$(function(){

$(window).resize();

});

19.三个盒子，左右定宽，中间自适应有几种方法

第一种：左右侧采用浮动中间采用margin-left 和 margin-right 方法。

代码如下：

<div style="width:200px; float:right; background-color:#960">这是右侧的内容固定宽度</div>

<div style="width:150px; float:left; background:#6FF">这是左侧的内容固定宽度</div>

<div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容，自适应宽度</div>

</div>

第二种：左右两侧采用绝对定位中间同样采用margin-left margin-right方法：

第三种负的margin

使用这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，先来看其代码吧：

<div id="mainContainer">main content</div></div><div id="left">

<div id="leftContainer" class="inner">left content</div></div><div id="right">

<div id="rightContainer" class="inner">right</div></div>

#main {

float: left;

width: 100%;

}

#mainContainer {

margin: 0 230px;

height: 200px;

background: green;

}

#left {

float: left;

margin-left: -100%;

width: 230px}

#right {

float: left;

margin-left: -230px;

width: 230px;

}

#left .inner,

#right .inner {

background: orange;

margin: 0 10px;

height: 200px;

}

20.js有几种数据类型，其中基本数据类型有哪些

五种基本类型: Undefined、Null、Boolean、Number和String。

1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。

Object、Array和Function则属于引用类型

21.undefined 和 null 区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分空指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。

javaScript权威指南： null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

22.http 和 https 有何区别？如何灵活使用？

http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

23.常见的HTTP状态码

2开头（请求成功）表示成功处理了请求的状态代码。

200   （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201   （已创建）请求成功并且服务器创建了新的资源。
202   （已接受）服务器已接受请求，但尚未处理。
203   （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。
204   （无内容）服务器成功处理了请求，但没有返回任何内容。
205   （重置内容）服务器成功处理了请求，但没有返回任何内容。
206   （部分内容）服务器成功处理了部分 GET 请求。

3开头（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。

300   （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301   （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302   （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303   （查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304   （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305   （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307   （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400   （错误请求）服务器不理解请求的语法。
401   （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403   （禁止）服务器拒绝请求。
404   （未找到）服务器找不到请求的网页。
405   （方法禁用）禁用请求中指定的方法。
406   （不接受）无法使用请求的内容特性响应请求的网页。
407   （需要代理授权）此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408   （请求超时）服务器等候请求时发生超时。
409   （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
410   （已删除）如果请求的资源已永久删除，服务器就会返回此响应。
411   （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。
412   （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。
413   （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414   （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。
415   （不支持的媒体类型）请求的格式不受请求页面的支持。
416   （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。
417   （未满足期望值）服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500   （服务器内部错误）服务器遇到错误，无法完成请求。
501   （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502   （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。
503   （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
504   （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505   （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

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

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
　　总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
　　前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
　　一、页面级优化
1. JavaScript 压缩和模块打包
2. 按需加载资源
3. 在使用 DOM 操作库时用上 array-ids
4. 缓存
5. 启用 HTTP/2
6. 应用性能分析
7. 使用负载均衡方案
8. 为了更快的启动时间考虑一下同构
9. 使用索引加速数据库查询
10. 使用更快的转译方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用于未来的一个建议：使用 service workers + 流
13. 图片编码优化

25. react和vue有哪些不同，说说你对这两个框架的看法

相同点

· 都支持服务器端渲染

· 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

· 数据驱动视图

· 都有支持native的方案,React的React native,Vue的weex

不同点

· React严格上只针对MVC的view层,Vue则是MVVM模式

· virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

· 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即‘all in js‘; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;

· 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

· state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

26.什么是mvvm mvc是什么区别原理

一、MVC（Model-View-Controller）

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

MVC使用非常广泛，比如JavaEE中的SSH框架

三、MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

27.px和em的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

em表示相对于父元素的字体大小。em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

28.优雅降级和渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容

29.eval()的作用

把字符串参数解析成JS代码并运行，并返回执行的结果；

eval("2+3");//执行加运算，并返回运算值。

eval("varage=10");//声明一个age变量

eval的作用域

functiona(){

1. eval("var x=1"); //等效于 var x=1;

2. console.log(x); //输出1

3. }

4. a();

5. console.log(x);//错误 x没有定

30. JS哪些操作会造成内存泄露

1）意外的全局变量引起的内存泄露

function leak(){

leak="xxx";//leak成为一个全局变量，不会被回收

}

2）闭包引起的内存泄露

3）3）没有清理的DOM元素引用

4）被遗忘的定时器或者回调 5）子元素存在引起的内存泄露

31. 浏览器缓存有哪些，通常缓存有哪几种

一、http缓存

二、websql

localstorage

sessionstorage

flash缓存

32:bootstrap响应式实现的原理

百分比布局+媒体查询

33.关于JS事件冒泡与JS事件代理（事件委托）

事件作为DOM操作重要的一环，需要大家好好理解和运用，今天特意看了一下事件冒泡和事件代理的相关资料，感触颇深，也深感自己的无知不知道多浪费了多少内存，废话不多说进入正题：

1.事件冒泡：

通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。

2.事件委托

事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托：

有可能在开发的时候会遇到这种情况：如导航每一个栏目都要加一个事件，你可能会通过遍历来给每个栏目添加事件：

事件委托是怎

1. var ul = document.getElementById(‘parentUl‘);

2. ul.οnclick=function (event) {

3. var e = event||window.event,

4. source = e.target || e.srcElement;//target表示在事件冒泡中触发事件的源元素，在IE中是srcElement

5. if(source.nodeName.toLowerCase() == "li"){ //判断只有li触发的才会输出内容

6. alert(source.innerHTML);

7. }

8. stopPropagation(e); //阻止继续冒泡

9. };

10. function addElement() {

11. var li = document.createElement(‘li‘);

12. li.innerHTML="我是新孩子";

13. ul.appendChild(li);

14. }

34. CSS样式覆盖规则

规则一：由于继承而发生样式冲突时，最近祖先获胜。

规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜

规则三：直接指定的样式发生冲突时，样式权值高者获胜。

样式的权值取决于样式的选择器，权值定义如下表。

CSS选择器
权值
标签选择器
1
类选择器
10
ID选择器
100
内联样式
1000
伪元素(:first-child等)
1
伪类(:link等)
10
可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。

规则四：样式权值相同时，后者获胜。

规则五：!important的样式属性不被覆盖。

!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。

35. 介绍一下box-sizing属性

兼容问题
首先，box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容。

属性值

· box-sizing：content-box

· box-sizing：border-box

· box-sizing：inherit

content-box

· 这是box-sizing的默认属性值

· 是CSS2.1中规定的宽度高度的显示行为

· 在CSS中定义的宽度和高度就对应到元素的内容框

· 在CSS中定义的宽度和高度之外绘制元素的内边距和边框

border-box

· 在CSS中微元素设定的宽度和高度就决定了元素的边框盒

· 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

· CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

36. css选择符有哪些？优先级算法如何计算？（常见）

37. 请简要描述margin重合问题，及解决方式

1.同向margin的重叠：
1图片的margin-top与3图片的margin-top发生重叠，2图片的margin-bottom与3图片的margin-bottom发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。
解决同向重叠的方法：
（1）在最外层的div中加入overflow:hidden;zoom:1
（2）在最外层加入padding:1px;属性
（3）在最外层加入：border:1px solid #cacbcc;
2.异向重叠问题：
1图片的margin-bottom与2图片的margin-top发生重叠，这时候重叠之后的margin值由发生重叠两图片的最大值的决定的。
解决异向重叠问题：
float:left（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）

38：position的值，relative\absolute\fixed分别相对于进行谁定位，有什么区别，什么时候用？

39.解释下CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置

40.什么是闭包，如何使用它，为什么要使用它？

包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点：

· 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

· 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

41.请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

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

AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

42.请解释一下JavaScript的同源策略。

在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议, 相同的端口，相同的host，那么我们就可以认为它们是相同的域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

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

1）创建新节点

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

2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

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

回收机制方式

1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

3、实例如下：

function fn1() {

var obj = {name: ‘hanzichi‘, age: 10};

}

function fn2() {

var obj = {name:‘hanzichi‘, age: 10};

return obj;

}var a = fn1();var b = fn2();

fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。

4、垃圾回收策略：标记清除(较为常用)和引用计数。

标记清除：

　　定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。

　　到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

引用计数：

　　定义和用法：引用计数是跟踪记录每个值被引用的次数。

　　基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

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

(1)、bind 【jQuery 1.3之前】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：bind(type,[data],function(eventObject))；

特点：

(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。

(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。

实例如下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之后】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：live(type, [data], fn);

特点：

(1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。

(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。

(3)、使用live（）方法但却只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；

实例如下：$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定义和用法：将监听事件绑定在就近的父级元素上

语法：delegate(selector,type,[data],fn)

特点：

(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。

(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。

实例如下：

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

定义和用法：将监听事件绑定到指定元素上。

语法：on(type,[selector],[data],fn)

实例如下：$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。

说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。

总结：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()

46、px和em的区别

相同点：px和em都是长度单位；

异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

47、浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

48、什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

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

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

49、sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据

不同点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；

web storage,会将数据保存到本地，不会造成宽带浪费；

(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；

sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

50、浏览器是如何渲染页面的？

渲染的流程如下：

1.解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

51:js的基本数据类型

JavaScript中有五种基本数据类型，它们分别是：undefined，null，boolean，number，string。

还有一种复杂数据类型-object。

52：事件委托

事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件，委托给更大范围的dom去处理。好比送信员，如果每次都把信件送给每一户，非常繁琐。但是如果交给一个大范围的管理者，比如小区的传达室，那么事情会变得非常简单。事件委托就类似这种原理，我页面中有很多按钮，如果不使用事件委托，我只能在每个按钮上注册事件。非常麻烦。但如果我把事件注册在一个大范围的div（假设所有的按钮都在这个div中），那么我只要注册一次事件，就可以处理所有按钮（只要按钮包含在上述div中）事件的响应了

53：CSS3新增了很多的属性，下面一起来分析一下新增的一些属性：

1.CSS3边框：

· border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;

· box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;

· border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round;

2.CSS3背景：

· background-size：属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

· background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

3.CSS3文字效果：

· text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;

· word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}

4.CSS3 2D转换：

transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

· translate()：元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

· rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。

· scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高x() 5.CSS3 3D转换：

· rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg);

· rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg);

6.CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。

7.CSS3动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

8.CSS3多列：

· column-count：属性规定元素应该被分隔的列数。

· column-gap：属性规定列之间的间隔。

· column-rule ：属性设置列之间的宽度、样式和颜色规则。

9.CSS3用户界面：

· resize：属性规定是否可由用户调整元素尺寸。

· box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。

· outline-offset ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

54：从输入url到显示页面，都经历了什么

第一步：客户机提出域名解析请求,并将该请求发送给本地的域名服务器。

第二步：当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。

第三步：如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址。
第四步：本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址。
第五步：重复第四步,直到找到正确的纪录。

第2种解释：

一般会经历以下几个过程：

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询

55：对<meta></meta>标签有什么理解

什么是meta标签？

引自下W3school的定义说明一下。

元数据（metadata）是关于数据的信息。

标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

其实对上面的概念简单总结下就是：<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

meta的作用

meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容

56：new操作符到底到了什么

先看代码

[javascript] view plain copy

1. var Func=function(){

2. };

3. var func=new Func ();

new共经过了4几个阶段

1、创建一个空对象

[javascript] view plain copy

1. varobj=new Object();

2、设置原型链

[javascript] view plain copy

1. obj.__proto__= Func.prototype;

3、让Func中的this指向obj，并执行Func的函数体。

[javascript] view plain copy

1. var result =Func.call(obj);

4、判断Func的返回值类型：

如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

[javascript] view plain copy

1. if (typeof(result) == "object"){

2. func=result;

3. }

4. else{

5. func=obj;;

6. }

57：h5新特性

HTML5新特性 —— 新特性
(1)新的语义标签和属性
(2)表单新特性
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
58：vue的生命周期

58：请写出你对闭包的理解，并列出简单的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包有三个特性：

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

59：display none visibility hidden区别？

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

60：JavaScript中如何检测一个变量是一个String类型？请写出函数实现

typeof(obj) === "string"

typeof obj === "string"

obj.constructor === String

61：如何理解闭包？

1、定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。

2、表现形式：使函数外部能够调用函数内部定义的变量。

3、实例如下：

(1)、根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，找到就返回，没找到就一直找，直到window的变量，没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。

var count=10; //全局作用域标记为flag1function add(){

var count=0; //函数全局作用域标记为flag2

return function(){

count+=1; //函数的内部作用域 alert(count);

}

}var s = add()

s();//输出1

s();//输出2

4、变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。

变量的作用域分类：全局变量和局部变量。

特点：

1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。

2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

5、使用闭包的注意点

1）滥用闭包，会造成内存泄漏：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

62：谈谈垃圾回收机制方式及内存管理

回收机制方式

1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

3、实例如下：

function fn1() {

var obj = {name: ‘hanzichi‘, age: 10};

}

function fn2() {

var obj = {name:‘hanzichi‘, age: 10};

return obj;

}var a = fn1();var b = fn2();

4、垃圾回收策略：标记清除(较为常用)和引用计数。

标记清除：

　　到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

引用计数：

　　定义和用法：引用计数是跟踪记录每个值被引用的次数。

　　基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

63：判断一个字符串中出现次数最多的字符，统计这个次数

var str = ‘asdfssaaasasasasaa‘;

var json = {};

for (var i = 0; i < str.length; i++) {

if(!json[str.charAt(i)]){

json[str.charAt(i)] = 1;

}else{

json[str.charAt(i)]++;

}

};var iMax = 0;var iIndex = ‘‘;for(var i in json){

if(json[i]>iMax){

iMax = json[i];

iIndex = i;

}

} console.log(‘出现次数最多的是:‘+iIndex+‘出现‘+iMax+‘次‘);

64、$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

65、 jquery中$.get()提交和$.post()提交有区别吗？

相同点：都是异步请求的方式来获取服务端的数据；

异同点：

1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

66、jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？（常见）

(1)、bind 【jQuery 1.3之前】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：bind(type,[data],function(eventObject))；

特点：

(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。

(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。

实例如下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之后】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：live(type, [data], fn);

特点：

(1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。

(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。

实例如下：$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定义和用法：将监听事件绑定在就近的父级元素上

语法：delegate(selector,type,[data],fn)

特点：

(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。

(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。

实例如下：

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

定义和用法：将监听事件绑定到指定元素上。

语法：on(type,[selector],[data],fn)

实例如下：$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。

说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。

总结：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()

67、px和em的区别（常见）

相同点：px和em都是长度单位；

68、浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

69、什么叫优雅降级和渐进增强？（常见）

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

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

70、sessionStorage 、localStorage 和 cookie 之间的区别（常见）

共同点：用于浏览器端存储的缓存数据

不同点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；

web storage,会将数据保存到本地，不会造成宽带浪费；

(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；

sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

1、html5为什么只需要写<!doctype html>?

答：html5不是基于sgml（标准通用标记语言），不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为，

否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型

2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素有：a b span img input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

知名的空元素：

鲜为人知的是：

3、页面导入样式时，使用link和@import有什么区别？

两者都是外部引用CSS的方式，但是存在一定的区别：

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

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

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

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

补充：@import最优写法

@import的写法一般有下列几种：

@import ‘style.css’ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import “style.css” //Windows IE4/ NS4, Macintosh IE4/NS4不识别

@import url(style.css) //Windows NS4, Macintosh NS4不识别

@import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import url(“style.css”) //Windows NS4, Macintosh NS4不识别

由上分析知道，@import url(style.css) 和@import url(“style.css”)是最优的选择，兼容的浏览器最多。

从字节优化的角度来看@import url(style.css)最值得推荐。

4、常见的浏览器内核有哪些？

使用Trident内核的浏览器：IE、Maxthon、TT、The World等；

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari、Chrome。

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

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

内容元素，article、footer、header、nav、section。

表单控件，calendar、date、time、email、url、search。

控件元素，webworker, websockt, Geolocation。

移出的元素有下列这些：

显现层元素：basefont，big，center，font, s，strike，tt，u。

性能较差元素：frame，frameset，noframes。

如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

处理兼容问题有两种方式：

1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

2.使用是html5shim框架

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

6、iframe有哪些优缺点？

优点：

1.用来实现长连接，在websocket不可用的时候作为一种替代，最开始由google发明。Comet：基于 HTTP 长连接的”服务器推”技术

2.跨域通信。JavaScript跨域总结与解决办法，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。

3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代。

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换，这样就不用在页面上插入一个非常巨大的编码映射表文件了

缺点：

　1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。

　　如果你想销售产品，你需要客户;如想得到客户，你首先要让人们访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。

　　2、框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。

　　3、链接导航问题。使用框架结构时，你必须保证正确设置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地方可去。

7、label的作用是什么？是怎么使用的？

Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

FOR属性

功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

用法：<Label FOR=”InputBox”>姓名</Label><input ID=”InputBox” type=”text”>

ACCESSKEY属性：

功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

用法：<Label FOR=”InputBox” ACCESSKEY＝”N”>姓名</Label><input ID=”InputBox” type=”text”>

局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

8、实现不使用border，画出1px高的线，在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果？

9、网页验证码是干嘛的？是为了解决什么安全问题？

网页验证码介绍：”验证码”的英文表示为CAPTCHA（Completely Automated Public Turing test to tell Computers and Humans Apart），翻译过来就是”全自动区分计算机和人类的图灵测试”，顾名思义，它是用来区分计算机和人类的。在 CAPTCHA 测试中，作为服务器的计算机会自动生成一个问题由用户来解答。这个问题可以由计算机生成并评判，但是必须只有人类才能解答。由于计算机无法解答 CAPTCHA 的问题，所以回答出问题的用户就可以被认为是人类。 CAPTCHA 是由计算机来考人类，而不是标准图灵测试中那样由人类来考计算机，因此人们有时称 CAPTCHA 是一种反向图灵测试。

验证码的原理：服务器端随机生成验证码字符串，保存在内存中，并写入图片，发送给浏览器端显示，浏览器端输入验证码图片上字符，然后提交服务器端，提交的字符和服务器端保存的该字符比较是否一致，一致就继续，否则返回提示。攻击者编写的robot程序，很难识别验证码字符，顺利的完成自动注册，登录；而用户可以识别填写，所以这就实现了阻挡攻击的作用。而图片的字符识别，就是看图片上的干扰强度了。就实际的效果来说，验证码只是增加攻击者的难度，而不可能完全的防止。

10、介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？

盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading

11、如何居中div，如何居中一个浮动元素？如何让绝对定位的div居中？

a.margin:xpx auto;

b.确定容器的宽高，这里宽度是必须的，高度可以不设，设置外层的上外边距和左外边距分别是宽高的一半。

实现居中关键在于 margin设置与 position:relative.

.div {

width:500px ;

height:300px;

margin: -150px 0 0 -250px;

position:relative;

left:50%;

top:50%;

}

c.position:absolute;

top: 50%;

left: 50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -100

12、display有哪些值？说明他们的作用？

block :块对象的默认值。用该值为对象之后添加新行

none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline :内联对象的默认值。用该值将从对象中删除行

compact :分配对象为块对象或基于内容之上的内联对象

marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用

inline-table :将表格显示为无前后换行的内联对象或内联容器

list-item :将块对象指定为列表项目。并可以添加可选项目标志

run-in :分配对象为块对象或基于内容之上的内联对象

table :将对象作为块元素级的表格显示

13、position的值relative和absolute的定位原点是什么？

Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

14、display设置为inline-block时，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格等等）的影响，这些空白也会被应用样式，占据空间，所以会有间隔

解决：设置ul的font-size为0，缺陷是必须重新在li中去设置字体大小

15、请解释下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

a.添加新的元素、应用 clear：both;

b.父级定义 overflow: auto（注意：是父级div也就是这里的 div.outer）一个对seo比较友好，另个hidden对seo不是太友好

在IE6中还需要触发 hasLayout ，例如 zoom：1；

c.据说是最高大上的方法 :after

方法：（注意：作用于浮动元素的父亲）IE6-7不支持:after，

使用 zoom:1触发 hasLayout

{zoom:1;} /*==for IE6/7 Maxthon2==*/

:after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

d.使用 br标签和其自身的 html属性,<br clear=”all” /> clear=”all | left | right | none” 属性

e.父元素也设置浮动

f.父元素设置display:table 盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

16、在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数字号相对更容易和 web 设计的其他部分构成比例关系

使用奇数号字体不好的地方是，文本段落无法对齐

17、margin和padding分别适合什么场景使用？

何时应当使用margin：

（1）需要在border外侧添加空白时，

（2）空白处不需要有背景（色）时，

（3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白（注意地方见第三点）。

何时应当使用padding

（1）需要在border内侧添加空白时（往往是文字与边框距离的设置），

（2）空白处需要背景（色）时，

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

margin使用时应该注意的地方

margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠。但是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正边界减去负边界的绝对值，也就是说，把正的边界值和负的边界值相加。

18、元素竖向的百分比设定是相对于容器的高度吗？

答：相对于父容器的宽度

19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容较低版本的IE？

答：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

respond.js和css3-mediaqueries-js

20、设置元素浮动后，该元素的display值是多少？

display:block;

21、怎么让chrome支持小于12px的文字？

chrome私有属性：-webkit-text-size-adjust:none;

-webkit-transform:scale(0.8);

行内元素设置:-webkit-transform:scale(0.8);display:inline-block

22、display:inline-block什么时候会显示间隙？

1.给父元素写font-size:0

2.把标签写到一行，不要在编辑器里敲回车换行，但是这种写法对于标签很多的情况可读性太差，适用与例如<a></a><a></a>这样简单的结构

23、有一个高度自适应的div。里面有2个div，一个高度100px，希望另一个填满剩下的高度？

外层box-sizing: border-box; 同时设置padding: 100px 0 0；

内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间；

另一个元素直接height: 100%;

外层position: relative；

百分百自适应元素直接position: absolute; top: 100px; bottom: 0; left: 0

24、什么是window对象？什么是document对象？

window它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。

document对象是window对象的一个对象属性

25、null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。

null表示”没有对象”，即该处不应该有值

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

26、什么是闭包（closure）？为什么要用它？

闭包就是能够读取其他函数内部变量的函数

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途：

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

重用变量又不能造成全局污染

27、js代码中”use strict”是什么意思？使用它区别是什么？

进入”严格模式”的标志，老版本的浏览器会把它当作一行普通字符串，加以忽略

将”use strict”放在脚本文件的第一行，则整个脚本都将以”严格模式”运行。如果这行语句不在第一行，则无效，整个脚本以”正常模式”运行。如果不同模式的代码文件合并成一个文件，这一点需要特别注意。

(严格地说，只要前面不是产生实际运行结果的语句，”use strict”可以不在第一行，比如直接跟在一个空的分号后面。)

将”use strict”放在函数体的第一行，则整个函数以”严格模式”运行

因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中

– 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

– 消除代码运行的一些不安全之处，保证代码运行的安全；

– 提高编译器效率，增加运行速度；

– 为未来新版本的Javascript做好铺垫。

28、js中有一个函数，执行对象查找时，永远不会去查找原型，这个函数是什么？

hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有，返回true，否则返回false。该方法属于Object对象，由于所有的对象都”继承”了Object的对象实例，因此几乎所有的实例对象都可以使用该方法。

29、js延迟加载的方式有哪些？

js的延迟加载有助与提高页面的加载速度，以下是延迟加载的几种方法：

1.使用setTimeout延迟方法的加载时间

延迟加载js代码，给网页加载留出更多时间

function A(){

$.post(“/lord/login”,{name:username,pwd:password},function(){

alert(“Hello”);

});

}

$(function (){

setTimeout(‘A()’, 1000); //延迟1秒

})

</script>

2.让js最后加载

例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

3.上述方法2也会偶尔让你收到Google页面速度测试工具的”延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

//这些代码应被放置在</body>标签前(接近HTML文件底部)

function downloadJSAtOnload() {

var element = document.createElement(“script”);

element.src = “defer.js”;

document.body.appendChild(element);

}

if (window.addEventListener)

window.addEventListener(“load”, downloadJSAtOnload, false);

else if (window.attachEvent)

window.attachEvent(“onload”, downloadJSAtOnload);

else window.onload = downloadJSAtOnload;

</script>

这段代码意思是等到整个文档加载完后，再加载外部文件”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插入<script></script>元素会自动执行其中的脚本；

大多数浏览器中，通过innerHTML插入<script></script>元素并不会执行其中的脚本

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里绑定事件：”<div onclick=”test()”>xx</div>” …

在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本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是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导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script></script>元素就可以了。

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 看作做一个开放平台，那它的构建模块有哪些？

73、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

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

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个”浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时”独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的

cookies会发送到服务器端。其余两个不会。

Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。

　　Firefox每个域名cookie限制为50个。

　　Opera每个域名cookie限制为30个。

Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。

　　Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。

　　InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

74、描述下 “reset” CSS 文件的作用和使用它的好处。

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。

75、解释下浮动和它的工作原理？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留

76、列举不同的清除浮动的技巧，并指出它们各自适用的使用场景？

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2.使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

*{margin:0;padding:0;}

body{font:36px bold; color:#F00; text-align:center;}

#layout{background:#FF9;}

#layout:after{display:block;clear:both;content:””;visibility:hidden;height:0;}

#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

<div id=”right”>Right</div>

</div>

77、解释下 CSS sprites，以及你要如何在页面或网站中使用它？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”，”background- repeat”，”background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

78、你最喜欢的图片替换方法是什么，你如何选择使用？

<h2> <span 图片丢这里></span>Hello World </h2> 把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。

一般都是：alt，title，onerror

79、讨论CSS hacks，条件引用或者其他？

background-color:blue; 各个浏览器都认识，这里给firefox用；

background-color:red\9;\9所有的ie浏览器可识别；

background-color:yellow\0; \0 是留给ie8的

+background-color:pink; + ie7定了；

_background-color:orange; _专门留给神奇的ie6；

:root #test { background-color:purple\9; } :root是给ie9的，

@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

80、如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？

百度谷歌 SO SOGOU Bing

81、如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？

1.display:none;的缺陷

搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

2. visibility: hidden ;的缺陷

这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法

.texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height: 0; }

就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

82、你用过栅格系统吗？如果使用过，你最喜欢哪种？

比如：Bootstrap，流式栅格系统

83、你用过媒体查询，或针对移动端的布局/CSS 吗？

@media screen and (min-width: 400px) and (max-width: 700px) { … }

@media handheld and (min-width: 20em), screen and (min-width: 20em) {….}

媒体查询，就是响应式布局。

84、你熟悉 SVG 样式的书写吗？

<text x=”250″ y=”150″ font-family=”Verdana” font-size=”10px” fill=”blue”>Hello, out there</text>

</svg>

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

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。

但打印样式表也应有些注意事项：

1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。

2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。

3、隐藏掉不必要的内容。（@print div{display:none;}）

4、打印样式表中最好少用浮动属性，因为它们会消失。

如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。

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

1.样式是：从右向左的解析一个选择器

2.ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal

3.不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）

4.后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）

5.想清楚你为什么这样写

6.CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）

7.我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性

87、使用 CSS 预处理器的优缺点有哪些？

(SASS，Compass，Stylus，LESS)

描述下你曾经使用过的 CSS 预处理的优缺点

88、如果设计中使用了非标准的字体，你该如何去实现？

Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)

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

浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

举个例子，有选择器：

body.ready #wrapper > .lol233

先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。

至此这个选择器匹配结束，所有还在集合中的元素满足。

大体就是这样，不过浏览器还会有一些奇怪的优化。

为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。

为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

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

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距) – 清除边框外的区域，外边距是透明的。
Border(边框) – 围绕在内边距和内容外的边框。
Padding(内边距) – 清除内容周围的区域，内边距是透明的。
Content(内容) – 盒子的内容，显示文本和图像。

91、解释下事件代理？

JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。

当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。

function getEventTarget(e) {

e = e || window.event;

return e.target || e.srcElement;

}

92、解释下 JavaScript 中 this 是如何工作的？

this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 window

1.如果是call，apply,with，指定的this是谁，就是谁

2.普通的函数调用，函数被谁调用，this就是谁

93、解释下原型继承的原理？

function getProperty(obj, prop) {

if (obj.hasOwnProperty(prop)) {

return obj[prop];

}else if (obj.__proto__ !== null) {

return getProperty(obj.__proto__, prop);

}else{

return undefined;

}

94、生成时间戳的两种方法？

JavaScript 获取当前时间戳：

第一种方法：

var timestamp = Date.parse(new Date());

结果：1280977330000

第二种方法：

var timestamp = (new Date()).valueOf();

结果：1280977330748

第三种方法：

var timestamp=new Date().getTime()；

结果：1280977330748

第一种：获取的时间戳是把毫秒改成000显示，

第二种和第三种是获取了当前毫秒的时间戳。

95、用原型链的方式给Array对象添加一个数组去重的方法？

Array.prototype.delRepeat=function() {

//tempRepeat保存重复数组项

var tempRepeat = [];

var obj = {}; //保存数组中每项，及其出现的次数

//遍历数组

for (var i = 0; i < this.length; i++) {

if (obj[this[i]]) {

if(obj[this[i]]==1) {

tempRepeat.push(this[i]);

obj[this[i]]++;

delete(this[i]);

}

else {

obj[this[i]] = 1;

}

this.filter(function(){ return true;});

return tempRepeat;

}

var a=[1,3,”eirkgm”,4,6,”eirkgm”,3,3,”eirkgm”,3,3,3,”eirkgm”,4];

alert(a.delRepeat());

96、定义一个方法，对所有传入的数字参数的第三位小数进行

四舍五入，使得返回值保留两位小数，不够的补0

97、定义一个方法，实现阶乘

function factorial(num) {

if(num <= 1) {

return 1;

} else {

return num * arguments.callee(num – 1);

}

98、定义一段代码，页面载入完成1分钟后非缓存模式刷新当前页面

window.onload=function()

{

setTimeout(function(){

location.reload();//要执行刷新的代码

},60000);

}

99、document.getElementById(“HEAD”).onclick=function(oEvent){

var A = oEvent.type.B = oEvent.target

}

A和B的值是什么？

100、阻止事件默认行为和事件冒泡的方法是什么

默认行为：event.preventDefault();

冒泡：event.stopPropregation();

event.cancelBubble();

101、把Object的实例化对象A、B、C合并赋值给对象C

102、设置一个已知ID的DIV的html内容为xxx，字体颜色设置为黑色（不使用第三方框架）

103、当一个DOM节点被点击的时候，我们希望能够执行一个函数，应该怎么做？

直接在DOM里绑定事件：

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

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

104、什么是Ajax和JSON，他们的优缺点？

Ajax是一种异步提交数据的方法。

通常在html中，要想重新获取页面的数据。更新某一个地方的数据时。就必须得刷新整个页面，才能重新刷新数据。那么问题来了，当我们仅仅只需要更新某一个小地方的数据时。我们也来刷新整个页面的话，就显得有点麻烦了，于是Ajax就帮我们完成了这个功能，让我们单独开辟一条道路来进行获取数据，然后页面不需要刷新，用JS把AJAX请求的数据显示到该显示的地方。AJAX叫无刷新获取技术

json 是一种数据的载体，可以把他想象成数组一样的东西，只不过，它有点牛，就是很多格式都可以自动支持。就差不多这样了。

105、看下列代码输出为何？解释原因？

var a;

alert(typeof a);//undefined

alert(b); //报错

106、看下列代码，输出什么？解释原因？

var a = null;

alert(typeof a); //object

107、看下列代码，输出什么？

1.var undefined;

2.undefined == null; //true

3.3==true; // true

4.2==true; //false

5.0==false; //true

6.0==”; //true

7.NaN == NaN; //false

8.[]==false; //true

9.[] == ![]; //true

108、看代码给答案？

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.value); //2

109、输出今天的日期，以YYYY-MM-DD的方式，比如今天是2016年4月12日，则输出2016-04-12

var d = new Date();

// 获取年，getFullYear()返回4位的数字 //今年：2016

var year = d.getFullYear();

// 获取月，月份比较特殊，0是1月，11是12月

var month = d.getMonth() + 1;

// 变成两位

month = month < 10 ? ‘0’ + month : month;

// 获取日

var day = d.getDate();

day = day < 10 ? ‘0’ + day : day;

alert(year + ‘-‘ + month + ‘-‘ + day);

110、将字符串”<tr><td>{$id}</td><td>${name}</td></tr>”中的${id}替换成10，{$name}替换成Tony(使用正则表达式)

答案：”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);

111、为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写出一个函数escapeHtml，将< , > & , ” 进行转义

String.prototype.escapeHTML = function
() {

return
this.replace(/&/g,’&’).replace(/>/g,’>’).replace(/</g,’<’).replace(/”/g,’"’);

};

112、foo = foo || bar ,这行代码是什么意思？为什么要这样写？

foo和bar应该都是bool型变量，||是表示或的意思，只要foo或者bar有一个为真，那么这个表达式的值就为真，并把它赋给foo

113、看下列代码，将会输出什么?

var foo = 1;

function(){

console.log(foo);

var foo = 2;

console.log(foo);

}

结果：undifined，2

var foo=1; 它的作用域是window；但是函数体内有同名局部变量，在执行函数时，第一句会寻找体内变量。

如果想调用该定义，需明确指定作用域，不指定则默认函数体本身。

console.log(window.foo); //1

114、用js实现随机选取10~100之间的10个数字，存入一个数组，并且排序

function sortNumber(a,b){

return a-b;//升序

//return b-a;//降序

}

//js实现随机选取10–100之间的10个数字，存入一个数组，并排序

var iArray =[];

function getRandom(iStart,iEnd){

var iChoice = iStart-iEnd+1;

return Math.abs(Math.floor(Math.random()*iChoice))+iStart;

}

for(var i=0;i<10;i++){

iArray.push(getRandom(10,100))

}

iArray.sort(sortNumber);

alert(iArray);

115、写一个function 清除字符串前后的空格（兼容所有浏览器）

第一种：循环替换

//供使用者调用

function trim(s){

return trimRight(trimLeft(s));

}

//去掉左边的空白

function trimLeft(s){

if(s == null) {

return “”;

}

var whitespace = new String(” \t\n\r”);

var str = new String(s);

if (whitespace.indexOf(str.charAt(0)) != -1) {

var j=0, i = str.length;

while (j < i && whitespace.indexOf(str.charAt(j)) != -1){

j++;

}

str = str.substring(j, i);

}

return str;

}

//去掉右边的空白 www.2cto.com

function trimRight(s){

if(s == null) return “”;

var whitespace = new String(” \t\n\r”);

var str = new String(s);

if (whitespace.indexOf(str.charAt(str.length-1)) != -1){

var i = str.length – 1;

while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){

i–;

}

str = str.substring(0, i+1);

}

return str;

}

第二种：正则替换

<!–

String.prototype.Trim = function()

{

return this.replace(/(^\s*)|(\s*$)/g, “”);

}

String.prototype.LTrim = function()

{

return this.replace(/(^\s*)/g, “”);

}

String.prototype.RTrim = function()

{

return this.replace(/(\s*$)/g, “”);

}

//–>

</SCRIPT>

//去左空格;

function ltrim(s){

return s.replace(/(^\s*)/g, “”);

}

//去右空格;

function rtrim(s){

return s.replace(/(\s*$)/g, “”);

}

//去左右空格;

function trim(s){

return s.replace(/(^\s*)|(\s*$)/g, “”);

}

第三种：使用jquery

$().trim();

jquery的内部实现为：

function trim(str){

return str.replace(/^(\s|\u00A0)+/,”).replace(/(\s|\u00A0)+$/,”);

}

第四种：使用motools

function trim(str){

return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, ”);

}

第五种：剪裁字符串方式

function trim(str){

str = str.replace(/^(\s|\u00A0)+/,”);

for(var i=str.length-1; i>=0; i–){

if(/\S/.test(str.charAt(i))){

str = str.substring(0, i+1);

break;

}

return str;

}

//———————————————————-

// 去掉字符串前后的空格

// 返回值：

// 去除空格后的字符串

//———————————————————-

function trim(param) {

if ((vRet = param) == ”) { return vRet; }

while (true) {

if (vRet.indexOf (‘ ‘) == 0) {

vRet = vRet.substring(1, parseInt(vRet.length));

} else if ((parseInt(vRet.length) != 0) && (vRet.lastIndexOf (‘ ‘) == parseInt(vRet.length) – 1)) {

vRet = vRet.substring(0, parseInt(vRet.length) – 1);

} else {

return vRet;

}

1、javascript 的 typeof 返回哪些数据类型

object
number
function
boolean
undefined
string
1
2
3
4
5
6
2、例举 3 种强制类型转换和 2 种隐式类型转换?

强制（parseInt(),parseFloat(),Number()）
隐式（==）
1==”1”//true
null==undefined//true
1
2
3
4
3、split()和 join() 的区别

前者是切割成数组的形式，
后者是将数组转换成字符串
1
2
4、数组方法 pop() push() unshift() shift()

Push()尾部添加
pop()尾部删除
Unshift()头部添加
shift()头部删除
1
2
3
4
5、事件绑定和普通事件有什么区别

传统事件绑定和符合 W3C 标准的事件绑定有什么区别？

div1.οnclick=function(){}; <button onmouseover=””></button>
1
1、如果说给同一个元素绑定了两次或者多次相同类型的事件，那么后面的绑定会覆盖前面的绑定；
2、不支持 DOM 事件流事件捕获阶段?目标元素阶段=>事件冒泡阶段

addEventListener
1、如果说给同一个元素绑定了两次或者多次相同类型的事件，所有的绑定将会依次触发
2、支持 DOM 事件流
3、进行事件绑定传参不需要 on 前缀 addEventListener(“click”,function(){},true);//此时的事件就是在事件冒泡阶段执行

ie9 开始，ie11edge：addEventListener
ie9 以前：attachEvent/detachEvent
1、进行事件类型传参需要带上 on 前缀
2、这种方式只支持事件冒泡，不支持事件捕获事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件

6、IE 和 DOM 事件流的区别

1.执行顺序不一样、
2.参数不一样
3.事件加不加 on
4.this 指向问题
IE9 以前：attachEvent(“onclick”)、detachEvent(“onclick”)
IE9 开始跟 DOM 事件流是一样的，都是 addEventListener
1
2
3
4
5
6
7、IE 和标准下有哪些兼容性的写法

var ev=ev||window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target
1
2
3
8、call 和 apply 的区别

call 和 apply 相同点：
都是为了用一个本不属于一个对象的方法，让这个对象去执行
1
2
toString.call([],1,2,3)
toString.apply([],[1,2,3])
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
1
2
3
4
9、b 继承 a 的方法

考点：继承的多种方式

js继承有5种实现方式：

1、继承第一种方式：对象冒充

function Parent(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child(username,password){
//通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
//第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
//第二步：执行this.method方法，即执行Parent所指向的对象函数
//第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
this.method = Parent;
this.method(username);//最关键的一行
delete this.method;

this.password = password;
this.world = function(){
alert(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello(); //zhangsan
child.hello(); //lisi
child.world(); //123456
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
2、继承第二种方式：call()方法方式

call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

function test(str){
alert(this.name + " " + str);
}
var object = new Object();
object.name = "zhangsan";
// 此时，第一个参数值object传递给了test类(即方法)中出现的this，而第二个参数"langsin"则赋值给了test类(即方法)的str
test.call(object,"langsin"); //zhangsan langsin

function Parent(username){
this.username = username;
this.hello = function(){
document.write(this.username + "<br>");
}
}
function Child(username,password){
Parent.call(this,username);

this.password = password;
this.world = function(){
document.write(this.password+ "<br>");
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello(); //zhangsan
child.hello(); //lisi
child.world(); //123456
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
3、继承的第三种方式：apply()方法方式

apply方法接受2个参数，
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数

function Parent(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child(username,password){
Parent.apply(this,new Array(username));

即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承

function Person(){
}
Person.prototype.hello = "hello";
Person.prototype.sayHello = function(){
alert(this.hello);
}

function Child(){
}
Child.prototype = new Person();//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
Child.prototype.world = "world";
Child.prototype.sayWorld = function(){
alert(this.world);
}

var c = new Child();
c.sayHello();
c.sayWorld();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
5、继承的第五种方式：混合方式

混合了call方式、原型链方式

function Parent(hello){
this.hello = hello;
}
Parent.prototype.sayHello = function(){
alert(this.hello);
}

function Child(hello,world){
Parent.call(this,hello);//将父类的属性继承过来
this.world = world;//新增一些属性
}

Child.prototype = new Parent();//将父类的方法继承过来

Child.prototype.sayWorld = function(){//新增一些方法
alert(this.world);
}

var c = new Child("zhangsan","lisi");
c.sayHello();
c.sayWorld();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
10、JavaScript this 指针、闭包、作用域

this：指向调用上下文
闭包：内层作用域可以访问外层作用域的变量
作用域：定义一个函数就开辟了一个局部作用域，整个 js 执行环境有一个全局作用域
1
2
3
11、事件委托是什么

符合 W3C 标准的事件绑定 addEventLisntener/attachEvent
利用事件冒泡的原理，让自己本身要触发的事件，让他的父元素代替执行！

12、闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量
永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数。

弄清楚闭包的概念及运行机制非常重要，详见博客（）

13、如何阻止事件冒泡和默认事件

阻止事件冒泡

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9 之前
1
2
阻止默认事件：
为了不让 a 点击之后跳转，我们就要给他的点击事件进行阻止

return false
e.preventDefault();
1
2
14、添加删除替换插入到某个接点的方法

obj.appendChild() //添加
obj.insertBefore() //插入。原生的 js 中不提供 insertAfter();
obj.replaceChild()//替换
obj.removeChild()//删除
1
2
3
4
15、javascript 的本地对象，内置对象和宿主对象

本地对象
Object、Function、Array、String、Number、Date、RegExp、Boolean、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError等可以用new 实例化的对象
由此得出，JS的本地对象就是ECMA-262中定义的类（引用类型）

内置对象
ECMA-262把内置对象定义为：由ECMAScript提供实现的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现。
这意味着内置对象都是已经实例化好的，不需要我们再进行实例化了，这里我们首先会想到的就是Math对象。
ECMA-262定义的内置对象只有两个：Global和Math。（本地对象和内置对象都是独立于宿主对象，根据定义可以看出来内置对象也是本地对象，在JS中所有的内置对象都是本地对象）。

Math对象是我们经常用到的，但是Global就比较少见了。其实我们经常用到Global对象，只是没有用Global这个名字。

Global对象是一个比较特殊的对象，它是一个全局对象，在程序中只有一个，它的存在伴随着整个程序的生命周期，全局对象不能通过名字来访问，但是它有一个window属性，这个属性指向它本身。

大家也要清楚，在ECMAScript中不存在独立的函数，所有的函数都应该是某个对象的方法。类似于isNaN()、parseInt()、parseFloat()等方法都是Global对象的方法。

宿主对象
宿主对象：由ECMAScript实现的宿主环境提供的对象。
可能这样不是很好理解，上面已经说过了宿主环境包括Web浏览器，所以我们可以这样理解，浏览器提供的对象都是宿主对象。

也可以这样理解，因为本地对象是非宿主环境的对象，那么非本地对象就是宿主对象，即所有的BOM对象和DOM对象都是宿主对象。
那么还有一种对象，那就是我们自己定义的对象，也是宿主对象。

最简单的理解：ECMAScript官方未定义的对象都属于宿主对象。
如浏览器自带的 document,window 等

总结
官方的定义太绕口，还不好理解。说的简单点：
本地对象就是ECMAScript中定义好的对象，如String、Date等，
内置对象是本地对象中比较特殊的一种，它不用实例化，包括Global和Math，
宿主对象就是BOM、DOM和自己定义的对象。

16、document load 和 document ready 的区别

Document.onload 是在结构和样式加载完就执行 js
window.onload：不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，全部加载完才会触发 window.onload 事件
Document.ready 原生中没有这个方法，jquery 中有 $(document).ready(function)

17、”==”和“===”的不同

前者会自动转换类型
后者不会
1==”1”
null==undefined
===先判断左右两边的数据类型，如果数据类型不一致，直接返回 false
之后才会进行两边值的判断

18、JavaScript的同源策略

详细解答请点击链接进入我的另一篇博客查看（JavaScript的同源策略详解）

19、编写一个数组去重的方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>去除一个数组中重复的元素</title>
</head>
<body>
<script type="text/javascript">
/*
* 方法一：
*/
var arr = [1, 0, 2, 1, 8, 1, 0, 10, 8];
var obj = {};
var temp = [];
for(var i=0; i<arr.length; i++) {
if(!obj[arr[i]]) {
obj[arr[i]] = 1;
temp.push(arr[i]);
}
}
console.log(temp); //1,0,2,8,10

/*
* 方法二：
*/
var arr2= [1, 0, 2, 1, 8, 1, 0, 10, 8, 9, 11];
var arr3 = [];
for(var i=0; i<arr2.length; i++) {
//indexOf()方法从数组的开头（位置 0）开始向后查找,返回索引号
//若未找到则返回-1
if((arr3.indexOf(arr2[i])) < 0) {
arr3.push(arr2[i]);
}
}
console.log(arr3);//1,0,2,8,10,9,11
/*
* 方法三：
*/
//filter()：对数组中的每一项运行给定函数，返回该函数会返回 true的项组成的数组。
var arr4 = [0, 10, 22, 0, 10, 1, 2, 3, 1];
var arr5 = arr4.filter(function(element, index, arr4) {
return arr4.indexOf(element) == index;
});
console.log(arr5); //0,10,22,1,2,3
</script>
</body>
</html>
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
21、JavaScript 的数据类型都有什么？

基本数据类型：String,Boolean,number,undefined,object,Null

引用数据类型：Object(Array,Date,RegExp,Function)

那么问题来了，如何判断某变量是否为数组数据类型？

方法一.判断其是否具有“数组性质”，如 slice()方法。可自己给该变量定义 slice 方法，
故有时会失效

方法二.obj instanceof Array 在某些 IE 版本中不正确

方法三.方法一二皆有漏洞，在 ECMA Script5 中定义了新方法 Array.isArray(), 保证其兼
容性，最好的方法如下：

toString.call(18);//”[object Number]”
toString.call(“”);//”[object String]”
1
2
解析这种简单的数据类型直接通过 typeof 就可以直接判断

toString.call 常用于判断数组、正则这些复杂类型
toString.call(/[0-9]{10}/)//”[object RegExp]”
if(typeof Array.isArray==="undefined"){
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"
};
}
1
2
3
4
5
6
7
22、已知 ID 的 Input 输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

document.getElementById(“ID”).value
1
23、希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];//返回的所有的 checkbox
var len = domList.length; //缓存到局部变量
while (len--) { //使用 while 的效率会比 for 循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
1
2
3
4
5
6
7
8
24、设置一个已知 ID 的 DIV 的 html 内容为 xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”
1
2
3
25、当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？

直接在 DOM 里绑定事件：<div onclick=”test()”></div>

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

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

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

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM 事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

26、看下列代码输出为何？解释原因。

var a;
alert(typeof a); // “undefined”
//alert(b); // 报错
b=10;
alert(typeof b);//”number”
1
2
3
4
5
解释：Undefined 是一个只有一个值的数据类型，这个值就是“undefined”，在使用 var
声明变量但并未对其赋值进行初始化时，这个变量的值就是 undefined。而 b 由于未声明将
报错。注意未申明的变量和声明了未赋值的是不一样的。

undefined 会在以下三种情况下产生：

1、一个变量定义了却没有被赋值
2、想要获取一个对象上不存在的属性或者方法:
3、一个数组中没有被赋值的元素
注意区分 undefined 跟 not defnied(语法错误)是不一样的

27、看下列代码,输出什么？解释原因。

var a = null;
alert(typeof a); //object
1
2
解释：null 是一个只有一个值的数据类型，这个值就是 null。表示一个空指针对象，所以
用 typeof 检测会返回”object”。

28、看下列代码,输出什么？解释原因。

var undefined;//此时 undefined 这个变量的值是 undefined
undefined == null; // true
1 == true; // true
1
2
3
此时会把布尔类型的值转换为数字类型

true=1 false=0
2 == true; // false
0 == false; // true
0 == ‘‘; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true
1
2
3
4
5
6
7
undefined 与 null 相等，但不恒等（===）
一个是 number 一个是 string 时，会尝试将 string 转换为 number
尝试将 boolean 转换为 number，0 或 1
尝试将 Object 转换成 number 或 string，取决于另外一个对比量的类型
所以，对于 0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类
型，类型不匹配时为 false。

那么问题来了，看下面的代码，输出什么，foo 的值为什么？

var foo = "11"+2-"1";
console.log(foo);//111
console.log(typeof foo);
1
2
3
执行完后 foo 的值为 111，foo 的类型为 number。

29、看代码给答案。

var a = new Object();
a.value = 1;
b = a; //{value:1}
b.value = 2;
alert(a.value);//2
1
2
3
4
5
答案：2（考察引用数据类型细节）

30 、已知数组 var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert 出”This is Baidu Campus”。

答案：

alert(stringArray.join(“ ”))
1
31、已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法”：getElementById”。

function combo(msg){
var arr=msg.split("-");//[get,element,by,id]
for(var i=1;i<arr.length;i++){
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);//Element
}
msg=arr.join("");//msg=” getElementById”
return msg;
}
1
2
3
4
5
6
7
8
(考察基础 API)

32、输出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月 26 日，则输出 2014-09-26

var d = new Date();
// 获取年，getFullYear()返回 4 位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0 是 1 月，11 是 12 月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? ‘0‘ + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? ‘0‘ + day : day;
alert(year + ‘-‘ + month + ‘-‘ + day);
1
2
3
4
5
6
7
8
9
10
11
33、使用正则表达式替换字符串

将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成 10，{$name}替换成 Tony （使用正则表达式）
答案：

"<tr><td>{$id}</td><td>{$name}</td></tr>".replace(/{\$id}/g, ‘10‘).replace(/{\$name}/g, ‘Tony‘);
1
34、为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数 escapeHtml，将<, >, &, \进行转义

这种写法称之为短路表达式

意思为：if(!foo) foo = bar; //如果 foo 存在，值不变，否则把 bar 的值赋给 foo。

短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要
最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

注意 if 条件的真假判定，记住以下是 false 的情况：
空字符串、false、undefined、null、0

36、看下列代码，将会输出什么?(变量声明提升)

var foo = 1;
function(){
console.log(foo); //undefined
var foo = 2;
console.log(foo); //2
}
1
2
3
4
5
6
答案：输出 undefined 和 2。上面代码相当于：

var foo = 1;
function(){
var foo;
console.log(foo); //undefined
foo = 2;
console.log(foo); // 2;
}
1
2
3
4
5
6
7
函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部，但是只提升名
称不会提升赋值部分。

37、用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* 随机选取[10, 100]内的10个数
*并排序
* Math.floor(num); 取得num整数部分
* Math.ceil(num); 取得大于等于num的最小整数
* Math.round(num); num四舍五入后的整数
*/
var pushArray = []; //存放取出的数
//产生一个10到100之间的数
function getRandom(start, end) {
var choice = end - start + 1;
return Math.floor(Math.random() * choice + start);
}
//Math.random()就是获取 0-1 之间的随机数（永远获取不到 1）
for(var i=0; i<10; i++) {
var result = getRandom(10, 100);
pushArray.push(result);
}
pushArray.sort();
console.log(pushArray); //12,19,21,28,34,39,44,54,65,86
</script>

</body>
</html>
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 + "<br>"); //banana,pear
document.write(fruit1); //返回删除的项apple,mango
document.write("<br>");
/*
* 插入：可以向指定位置插入任意数量的项，只需提供 3个参数：
* 起始位置、0（要删除的项数）和要插入的项
*/
var fruit2 = ["apple", "mango", "banana", "pear"];
var fruit3 = fruit2.splice(2, 0, "strawberry", "lalala");
document.write(fruit2 + "<br>");//apple,mango,strawberry,lalala,banana,pear
document.write(fruit3 + "<br>");//未删除项，所以返回空数组
/*
* 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，
* 只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。
* 插入的项数不必与删除的项数相等。
*/
var fruit4 = ["apple", "mango", "banana", "pear"];
var fruit5 = fruit4.splice(1, 2, "aaa", "bbb", "ccc");
document.write("<br>" + fruit4 + "<br>");//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}。

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

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()，考虑兼容性：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<script type="text/javascript">
if(!String.prototype.trim) {
String.prototype.trim = function() {
//\s 匹配空白字符：回车、换行、制表符 tab 空格
return this.replace(/^\s+/, "").replace(/\s+$/, "");
}
}
//测试
var str = " \t\n test string ";
var newStr = str.trim();
alert(newStr == "test string"); //true
</script>
</body>
</html>
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
完成）

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<form1.elements.length;i++){
if(form1.elements.type==”text”)
form1.elements.value=”";
}
B.
for(vari=0;i<document.forms.length;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<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; 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、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口；

<html>
<head>
<script type=”text/javascript” >
function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗？”)){
window.close();
}
}
</script>
</head>
<body>
<input type=”button” value=”关闭窗口” onclick=”closeWin()”/>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
60、写出简单描述 html 标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的 html 标签去除掉

var str = “<div>这里是 div<p>里面的段落</p></div>”;
1
<script type=”text/javascript”>
var reg = /<\/?\w+\/?>/gi; // x? 匹配问号前面的内容出现 0 或 1 次。
var str = “<div>这里是 div<p>里面的段落</p></div>”;
alert(str.replace(reg,""));
</script>
1
2
3
4
5
61、完成 foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" onsubmit="return foo()">
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="radio" name="radioBox" />苹果<br />
<input type="submit" />
</form>
<script type="text/javascript">
function foo() {
var getInput = document.getElementsByName("radioBox");
for(var i=0; i<getInput.length; i++) {
if(getInput[i].checked) {
alert("您选中了第"+(i+1)+"个单选框");
return;
}
}
alert("没有选中任何选项");
}
</script>
</body>
</html>
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()，要求能够动态根据下拉列表的选项变化，更新图片的显示

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="page">
<div id="selector">
<div class="sel">
<select onchange="show(this)">
<option value="../img/banner/banner1" class="opt">科技改变未来</option>
<option value="../img/banner/banner2" class="opt">高端品质</option>
<option value="../img/banner/banner3" class="opt">智能产品</option>
<option value="../img/banner/banner4" class="opt">高科技</option>
</select>
</div>
<div class="img">
<img id="imgage1" src="../img/banner/banner1.jpg" width="600" />
</div>
</div>
</div>
<script type="text/javascript">
function show(img) {
var str = img.value;
// alert(str);
document.getElementById("imgage1").src = str + ".jpg";
}
</script>
</body>
</html>
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 怎么做？(不使用第三方框架)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取所有checkbox</title>
</head>
<body>
<div id="page">
<form action="" method="get">
姓名：<input type="text" class="1"/><br /><br />
性别：<br />
<input type="radio" class="2" name="sex" />男
<input type="radio" class="3" name="sex" />女<br /><br />
年龄：<select name="age">
<option value="kids">0-10</option>
<option value="teenagers">11-20</option>
<option value="adults">21-30</option>
<option value="freeFromConfusion">31-40</option>
<option value="half">41-50</option>
<option value="50_60">51-60</option>
<option value="60_70">61-70</option>
<option value="70_80">71-80</option>
<option value="80_90">81-90</option>
<option value="90_100">91-100</option>
<option value="over_100">>100</option>
</select><br /><br />
爱好：<br />
<input type="checkbox" class="check1" name="like" />阅读
<input type="checkbox" class="check2" name="like" />爬山
<input type="checkbox" class="check3" name="like" />编程
<input type="checkbox" class="check4" name="like" />旅行
<input type="checkbox" class="check5" name="like" />逛街
<br /><br />
<input type="submit" />
</form>
</div>
<script type="text/javascript">
//获取所有checkbox
var $input = document.getElementsByTagName("input");
var checkList = [];
var len = $input.length;
while(len--) { //使用while比for效率更高
if($input[len].type == "checkbox") {
checkList.push($input[len]);
}
}
// console.log(checkList.length); //5
for(var i=0; i<checkList.length; i++) {
console.log(checkList[i]);
}
</script>
</body>
</html>
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插入<script>元素会自动执行其中的脚本；
大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本。

79、哪些操作会造成内存泄漏？

内存泄漏指任何对象在你不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用
数量为 0（没有其他对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的
内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
80、写一个获取非行间样式的函数

//获取一个非行间的函数

function getStyle(obj,attr,value) {
if (!value) {
if (obj.currentStyle) {
return obj.currentStyle[attr]
}else {
obj.getComputedStyle(attr,false)
}
}else {
obj.style[attr] = value
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
81、解释 jsonp 的原理，以及为什么不是真正的 ajax

动态创建 script 标签，回调函数
Ajax 是页面无刷新请求数据操作

82、字符串反转，如将 ‘12345678’ 变成 ‘87654321’

//大牛做法；
//思路：先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 join()
为字符串

var str = ‘12345678‘;
str = str.split(‘‘).reverse().join(‘‘);
1
2
83、将数字 12345678 转化成 RMB 形式如： 12,345,678

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var num = 12345678;
//转化为字符串
num = num.toString();
// console.log(num); //"12345678"
//封装字符串反转方法
function rever(str) {
//先分割为数组再反转再合并为字符串
return str = str.split("").reverse().join("");
}
num = rever(num);
// console.log(num); //87654321
var result = ""; //定义一个空字符串，接收最终结果
for(var i=1; i<=num.length; i++) {
result += num[i-1]; //把字符串的每一项重新放到一个新的字符串里
if(i%3 == 0 && i!=num.length) { //字符串的索引是3 的倍数并且不是最后一项的时候添加
result += ",";
}
}
// console.log(result); //876, 543, 21
//最后调用上面定义的rever()方法反转回来
result = rever(result);
console.log(result); //12,345,678
</script>
</body>
</html>
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 个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放弃当前生成的数字

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成5个不同的随机数</title>
</head>
<body>
<script type="text/javascript">
//思路：5 个不同的数，每生成一次就和前面的所有数字相比较，
//如果有相同的，则放弃当前生成的数字,重新生成一个数
var num = [];
for(var i=0; i<5; i++) {
num[i] = Math.floor(Math.random()*(30-15+1) + 15); //此处生成[15,30]的随机数
// console.log(num[i]);
for(var j=0; j<i; j++) {
if(num[i] == num[j]) {
i--;
}
}
console.log(num);//此处可看见整个数组的生成过程
}
console.log(num);
</script>
</body>
</html>
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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* 在这个重写后的 factorial()函数的函数体内，没有再引用函数名 factorial。
* 这样，无论引用函数时使用的是什么名字，都可以保证正常完成递归调用。
*/
function factorial(num) {
if(num <= 1) {
return 1;
}else {
return num * arguments.callee(num - 1);
}
}
var newName = factorial;
var result1 = newName(9);
alert(result1); //362880

factorial=function(num) {
return 0;
}
var result2 = factorial(9);
alert(result2); //0

var result3 = newName(9);
alert(result3); //362880
</script>
</body>
</html>
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如何阻止冒泡事件及阻止默认事件

阻止冒泡函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡和默认行为</title>
</head>
<style type="text/css">
.one {
width: 200px;
height: 200px;
background: navajowhite;
}
.two {
height: 40px;
border: 1px solid red;
background: white;
line-height: 40px;
}
.three {
cursor: pointer;
/*padding: 10px;*/
background: red;
}
.defauleAction {
width: 100px;
height: 100px;
border: 1px solid red;
line-height: 100px;
}
.four {
width: 200px;
height: 200px;
background: navajowhite;
margin-top: 20px;
}
.five {
height: 40px;
border: 1px solid red;
background: white;
line-height: 40px;
}
.six {
cursor: pointer;
/*padding: 10px;*/
background: red;
</style>
<body>
<div class="one">我是最外层
<p class="two">我是第二层
<span class="three">我是最里层</span>
</p>
</div>

<div class="defaultAction">
<a href="https://blog.csdn.net/qq_36595013">我的博客主页</a>
</div>

<div class="four">我是最外层
<p class="five">我是第二层
<span class="six"><a href="https://blog.csdn.net/qq_36595013">我是最里层</a></span>
</p>
</div>
</body>
<script type="text/javascript" src="../jQuery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(".one").click(function(e) {
alert($(this).text());
});
$(".two").click(function(e) {
preventPropagation(e);
alert($(this).text());
});
$(".three").click(function(e) {
/*一、先在最里层添加进阻止事件冒泡函数，再查看效果
*发现点击中间层的时候还是会冒泡到最外层
* 然后再中间层加入阻止函数，再查看效果
*/
preventPropagation(e);
alert($(this).text());
});

//阻止默认单击链接跳转行为
$(".defaultAction>a").click(function(e) {
preventDefaultAction(e);
alert("链接不跳转了吧！");
});

//阻止事件冒泡函数
function preventPropagation(e) {
e = e||window.event;
if(e.stopPropagation) { //W3C方法
e.stopPropagation();
}else { //IE方法
e.cancelBubble = true;
}
}
//阻止默认行为函数
function preventDefaultAction(e) {
e = e || window.event;
if(e.preventDefault) { //W3C方法
e.preventDefault();
}else { //IE方法
e.returnValue = false;
}
}

//同时阻止默认行为和事件冒泡
$(".six").click(function() {
alert("点我之后既不向上冒泡又不跳转到默认的链接");
//要想同时阻止默认行为和事件冒泡，只需要返回return false就可以了
return false;
});
$(".five").click(function(e) {
preventPropagation(e);
alert("我是中间层");
});
$(".four").click(function() {
alert("我是最外层");
});

});
</script>
</html>
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、结果是什么？

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<s.length;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) + "<br>");//true
document.write(reg.test(str2) + "<br>");//false
document.write(reg.test(str3) + "<br>");//false 仅4个字符
document.write(reg.test(str4) + "<br>");//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
演示代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="outer">
hello
</div>
<script>
Object.prototype.outerHTML = function(){
var innerCon = this.innerHTML, //获得里面的内容
outerCon = this.appendChild(innerCon); //添加到里面
alert(outerCon);
}
function $(id){
return document.getElementById(id);
}
alert($(‘outer‘).innerHTML);
alert($(‘outer‘).outerHTML);
</script>
</body>
</html>
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<len;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() //创建一个文本节点

2）添加、移除、替换、插入
　　appendChild() //添加
　　removeChild() //移除
　　replaceChild() //替换
　　insertBefore() //插入

3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值
　　getElementById() //通过元素Id，唯一性

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

（1）、在html元素事件属性中使用，如：

<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>
（2）、构造函数

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}
（3）、input点击，获取值

复制代码
<input type="button" id="text" value="点击一下" />
<script type="text/javascript">
var btn = document.getElementById("text");
btn.onclick = function() {
alert(this.value); //此处的this是按钮元素
}
</script>
复制代码
(4)、apply()/call()求数组最值

var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(this, numbers);
console.log(maxInNumbers); // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215);
console.log(maxInNumbers); // 458
比较typeof与instanceof？

相同点：JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。

typeof的定义和用法：返回值是一个字符串，用来说明变量的数据类型。

细节：

(1)、typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。

(2)、typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错。

(3)、对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。

Instanceof定义和用法：instanceof 用于判断一个变量是否属于某个对象的实例。

实例演示：

a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假

var a = new Array();
alert(a instanceof Array); // true
alert(a instanceof Object) // true
如上，会返回 true，同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。

function test(){};
var a = new test();
alert(a instanceof test) // true
细节：

(1)、如下，得到的结果为‘N’,这里的 instanceof 测试的 object 是指 js 语法中的 object，不是指 dom 模型对象。

if (window instanceof Object){ alert(‘Y‘)} else { alert(‘N‘);} // ‘N‘
如何理解闭包？

2、表现形式：使函数外部能够调用函数内部定义的变量。

3、实例如下：

复制代码
var count=10; //全局作用域标记为flag1
function add(){
var count=0; //函数全局作用域标记为flag2
return function(){
count+=1; //函数的内部作用域
alert(count);
}
}
var s = add()
s();//输出1
s();//输出2
复制代码
4、变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。

变量的作用域分类：全局变量和局部变量。

特点：

1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。

2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

5、使用闭包的注意点

什么是跨域？跨域请求资源的方法有哪些？

1、什么是跨域？

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：

网络协议不同，如http协议访问https协议。

端口不同，如80端口访问8080端口。

域名不同，如qianduanblog.com访问baidu.com。

子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。

域名和域名对应ip,如www.a.com访问20.205.28.90.

2、跨域请求资源的方法：

(1)、porxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：

res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":‘http://localhost‘,
‘Access-Control-Allow-Methods‘: ‘GET, POST, OPTIONS‘,
‘Access-Control-Allow-Headers‘: ‘X-Requested-With, Content-Type‘
});
(3)、jsonp

定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。

实例如下：

复制代码
<script>
function testjsonp(data) {
console.log(data.name); // 获取返回的结果
}
</script>
<script>
var _script = document.createElement(‘script‘);
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=testjsonp";
document.head.appendChild(_script);
</script>
复制代码
缺点：

　　1、这种方式无法发送post请求（这里）

　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

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

回收机制方式

1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

3、实例如下：

复制代码
function fn1() {
var obj = {name: ‘hanzichi‘, age: 10};
}
function fn2() {
var obj = {name:‘hanzichi‘, age: 10};
return obj;
}
var a = fn1();
var b = fn2();
复制代码
fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。

4、垃圾回收策略：标记清除(较为常用)和引用计数。

标记清除：

　　到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

引用计数：

　　定义和用法：引用计数是跟踪记录每个值被引用的次数。

　　基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

内存管理

1、什么时候触发垃圾回收？

垃圾回收器周期性运行，如果分配的内存非常多，那么回收工作也会很艰巨，确定垃圾回收时间间隔就变成了一个值得思考的问题。

IE6的垃圾回收是根据内存分配量运行的，当环境中的变量，对象，字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态，严重影响浏览器性能。

IE7中，垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整，开始回收工作。

2、合理的GC方案：(1)、遍历所有可访问的对象; (2)、回收已不可访问的对象。

3、GC缺陷：(1)、停止响应其他操作；

4、GC优化策略：(1)、分代回收（Generation GC）;(2)、增量GC

开发过程中遇到的内存泄露情况，如何解决的？

1、定义和用法：

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存，几乎不会发生内存泄露。我们知道，浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有bug，会产生内存泄露。

2、内存泄露的几种情况:

(1)、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。

实例如下:

复制代码
<div id="myDiv">
<input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
btn.onclick = null;
document.getElementById("myDiv").innerHTML = "Processing...";
}
</script>
复制代码
(2)、由于是函数内定义函数，并且内部函数--事件回调的引用外暴了，形成了闭包。闭包可以维持函数内局部变量，使其得不到释放。
实例如下：
function bindEvent(){
var obj=document.createElement("XXX");
obj.onclick=function(){
//Even if it‘s a empty function
}
}
解决方法如下：

复制代码
function bindEvent(){
var obj=document.createElement("XXX");
obj.onclick=function(){
//Even if it‘s a empty function
}
obj=null;
}
复制代码
javascript面向对象中继承实现？

面向对象的基本特征有：封闭、继承、多态。

在JavaScript中实现继承的方法：

1. 原型链（prototype chaining）

2. call()/apply()

3. 混合方式(prototype和call()/apply()结合)

4. 对象冒充

继承的方法如下：

1、prototype原型链方式：

2、call()/apply()方法

3、混合方法【prototype,call/apply】

4、对象冒充

javascript相关程序计算题

1、判断一个字符串中出现次数最多的字符，统计这个次数

复制代码
var str = ‘asdfssaaasasasasaa‘;
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = ‘‘;
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
console.log(‘出现次数最多的是:‘+iIndex+‘出现‘+iMax+‘次‘);
复制代码
结果如下：出现次数最多的是:a出现9次

JavaScript 数组(Array)对象

1、Array相关的属性和方法

这里只是做了相关的列举，具体的使用方法，请参考网址。

Array 对象属性

constructor 返回对创建此对象的数组函数的引用。

length 设置或返回数组中元素的数目。

prototype 使您有能力向对象添加属性和方法。

Array 对象方法

concat() 连接两个或更多的数组，并返回结果。

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素。

shift() 删除并返回数组的第一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

slice() 从某个已有的数组返回选定的元素

sort() 对数组的元素进行排序

splice() 删除元素，并向数组添加新元素。

toSource() 返回该对象的源代码。

toString() 把数组转换为字符串，并返回结果。

toLocaleString() 把数组转换为本地数组，并返回结果。

valueOf() 返回数组对象的原始值

2、编写一个方法去掉一个数组的重复元素

方法一：

复制代码
var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
if( !obj[arr[i]] ){
obj[arr[i]] = 1;
tmp.push(arr[i]);
}
}
console.log(tmp);
复制代码
结果如下： [0, 2, 3, 4]

方法二：

复制代码
var arr = [2,3,4,4,5,2,3,6],
arr2 = [];
for(var i = 0;i< arr.length;i++){
if(arr2.indexOf(arr[i]) < 0){
arr2.push(arr[i]);
}
}
console.log(arr2);
复制代码
结果为：[2, 3, 4, 5, 6]

方法三：

var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2);

结果为：[2, 3, 4, 5, 6]

3、求数组的最值？

方法一：

求数组最大值：Math.max.apply(null,arr);
var arr = [3,43,23,45,65,90];
var max = Math.max.apply(null,arr);
console.log(max);
// 90

求数组最小值：Math.min.apply(null,arr);
var arr = [3,43,23,45,65,90];
var min = Math.min.apply(null,arr);
console.log(min);
// 3

方法二：Array.max = function(arr){} / Array.min = function(arr){}

复制代码
var array = [3,43,23,45,65,90];

Array.max = function( array ){
return Math.max.apply( Math, array );
};
Array.min = function( array ){
return Math.min.apply( Math, array );
};

var max = Array.max(array);
console.log(max); // 90

var min = Array.min(array);
console.log(min); // 3
复制代码
方法三：Array.prototype.max = function(){};Array.prototype.min = function(){};

求数组最大值(基本思路：将数组中的第一个值赋值给变量max ,将数组进行循环与max进行比较，将数组中的大值赋给max,最后返回max;)

复制代码
var arr = [3,43,23,45,65,90];
Array.prototype.max = function() {
var max = this[0];
var len = this.length;
for (var i = 0; i < len; i++){
if (this[i] > max) {
max = this[i];
}
}
return max;
}
var max = arr.max();
console.log(max); // 90
复制代码
求数组最小值：
复制代码
var arr = [3,43,23,45,65,90];
Array.prototype.min = function() {
var min = this[0];
var len = this.length;
for(var i = 0;i< len;i++){
if(this[i] < min){
min = this[i];
}
}
return min;
}
var min = arr.min();
console.log(min); // 3
复制代码
4、数组排序相关

结合sort和函数排序：

数组由小到大进行排序：sort,sortnum;
复制代码
var arr = [3,43,23,45,65,90];
function sortnum(a,b){
　　return a-b;
}
arr = arr.sort(sortnum);
console.log(arr);
// [3, 23, 43, 45, 65, 90]
复制代码
数组由大到小进行排序：sort,sortnum;
复制代码
var arr = [3,43,23,45,65,90];
function sortnum(a,b){
　　return a+b;
}
arr = arr.sort(sortnum);
console.log(arr);
// [90, 65, 45, 23, 43, 3]
复制代码
冒泡排序：即实现数组由小到大进行排序；思路为：每次比较相邻的两个数，如果后一个比前一个小，换位置。如果要实现由大到小排序，使用reverse()即可；

复制代码
var arr = [3, 1, 4, 6, 5, 7, 2];

var arr2 = bubbleSort(arr);
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7]
var arr3 = arr2.reverse();
console.log(arr3); // [7, 6, 5, 4, 3, 2, 1]
复制代码
快速排序：

思路：采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边。

复制代码
var arr = [3, 1, 4, 6, 5, 7, 2];
function quickSort(arr) {
if(arr.length == 0) {
return []; // 返回空数组
}
var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);
var l = [];
var r = [];

for (var i = 0; i < arr.length; i++) {
if(arr[i] < c) {
l.push(arr[i]);
} else {
r.push(arr[i]);
}
}
return quickSort(l).concat(c, quickSort(r));
}
console.log(quickSort(arr));
//[1, 2, 3, 4, 5, 6, 7]
复制代码
5、数组的翻转（非reverse()）

方法一：

复制代码
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length) {
var num = arr.pop(); //删除数组最后一个元素并返回被删除的元素
arr2.push(num);
}
console.log(arr2);
// [4, 3, 2, 1]
复制代码
方法二：

复制代码
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length){
var num = arr.shift(); //删除数组第一个元素并返回被删除的元素
arr2.unshift(num);
}
console.log(arr2);
复制代码

jquery相关
1、 jQuery 库中的 $() 是什么？

　　$() 函数是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

2、如何找到所有 HTML select 标签的选中项？

$(‘[name=selectname] :selected‘)
3、$(this) 和 this 关键字在 jQuery 中有何不同？

$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。

而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

4、jquery怎么移除标签onclick属性？

获得a标签的onclick属性: $("a").attr("onclick")

删除onclick属性：$("a").removeAttr("onclick");

设置onclick属性：$("a").attr("onclick","test();");

5、jquery中addClass,removeClass,toggleClass的使用。

$(selector).addClass(class)：为每个匹配的元素添加指定的类名

$(selector).removeClass(class)：从所有匹配的元素中删除全部或者指定的类，删除class中某个值；

$(selector).toggleClass(class)：如果存在（不存在）就删除（添加）一个类

$(selector).removeAttr(class);删除class这个属性；

6、JQuery有几种选择器?

(1)、基本选择器：#id，class,element,*;

(2)、层次选择器：parent > child，prev + next ，prev ~ siblings

(3)、基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt

(4)、内容过滤器选择器： :contains ，:empty ，:has ，:parent

(5)、可见性过滤器选择器：:hidden ，:visible

(6)、属性过滤器选择器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]

(7)、子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child

(8)、表单选择器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；

(9)、表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected

7、jQuery中的Delegate()函数有什么作用？

delegate()会在以下两个情况下使用到：

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

$("ul").delegate("li", "click", function(){ $(this).hide(); });
2、当元素在当前页面中不可用时，可以使用delegate()

8、$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

9、如何用jQuery禁用浏览器的前进后退按钮？

实现代码如下：

相同点：都是异步请求的方式来获取服务端的数据；

异同点：

1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

11、写出一个简单的$.ajax()的请求方式？

复制代码
$.ajax({
url:‘http://www.baidu.com‘,
type:‘POST‘,
data:data,
cache:true,
headers:{},
beforeSend：function(){},
success:function(){},
error:function(){},
complete:function(){}
});
复制代码

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

(1)、bind 【jQuery 1.3之前】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：bind(type,[data],function(eventObject))；

特点：

　　(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。

　　(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。

实例如下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之后】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：live(type, [data], fn);

特点：

　　(1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。

　　(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。

实例如下：$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定义和用法：将监听事件绑定在就近的父级元素上

语法：delegate(selector,type,[data],fn)

特点：

　　(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。

　　(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。

实例如下：

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

定义和用法：将监听事件绑定到指定元素上。

语法：on(type,[selector],[data],fn)

实例如下：$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。

说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。

总结：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()

回到顶部
HTML & CSS:
1、什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

3、CSS实现垂直水平居中

一道经典的问题，实现方法有很多种，以下是其中一种实现：
HTML结构：

<div class="wrapper">
<div class="content"></div>
</div>
CSS：

复制代码
.wrapper {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
}
.content{
position: absolute;
width: 200px;
height: 200px;
/*top、bottom、left和right 均设置为0*/
top: 0;
bottom: 0;
left: 0;
right: 0;
/*margin设置为auto*/
margin:auto;
border: 1px solid green;
}
复制代码
效果如下：

4、简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

5、简述同步和异步的区别

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

6、px和em的区别

相同点：px和em都是长度单位；

7、浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

8、什么叫优雅降级和渐进增强？

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

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

9、sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据

不同点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；

web storage,会将数据保存到本地，不会造成宽带浪费；

(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；

sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

10、Web Storage与Cookie相比存在的优势：

(1)、存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

(2)、存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

(3)、更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。

(4)、独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

11、Ajax的优缺点及工作原理？

定义和用法:

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

优点：

1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求

2.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验

3.基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离

缺点：

1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.

2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.

3.对流媒体还有移动设备的支持不是太好等

AJAX的工作原理：

1.创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

2.判断数据传输方式(GET/POST)

3.打开链接 open()

4.发送 send()

5.当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

12、请指出document load和document ready的区别？

共同点：这两种事件都代表的是页面文档加载时触发。

异同点：

ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。

onload 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成。

回到顶部
正则表达式
1、写一个function，清除字符串前后的空格。（兼容所有浏览器）

function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
}
}
2、使用正则表达式验证邮箱格式

var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "[email protected]";
console.log(reg.test(email)); // true
回到顶部
开发及性能优化
1、规避javascript多人开发函数重名问题

命名空间
封闭空间
js模块化mvc（数据层、表现层、控制层）
seajs
变量转换成对象的属性
对象化
2、请说出三种减低页面加载时间的方法

压缩css、js文件
合并js、css文件，减少http请求
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作
3、你所了解到的Web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

4、web前端开发，如何提高页面性能优化？

内容方面：

1.减少 HTTP 请求 (Make Fewer HTTP Requests)

2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可缓存 (Make Ajax Cacheable)

针对CSS：

1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)

2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4.避免 CSS 表达式 (Avoid CSS Expressions)

针对JavaScript ：

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4. 移除重复脚本 (Remove Duplicate Scripts)

面向图片(Image)：

1.优化图片

2 不要在 HTML 中使用缩放图片

3 使用恰当的图片格式

4 使用 CSS Sprites 技巧对图片优化

5、前端开发中，如何优化图像？图像格式的区别？

优化图像：

1、不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。

2、使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片通常更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

4、按照HTTP协议设置合理的缓存。

5、使用字体图标webfont、CSS Sprites等。

6、用CSS或JavaScript实现预加载。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

图像格式的区别：

矢量图：图标字体，如 font-awesome；svg

位图：gif,jpg(jpeg),png

区别：

　　1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。

　　2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。

　　3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

优缺点：

　　1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

　　2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

6、浏览器是如何渲染页面的？

渲染的流程如下：

1.解析HTML文件，创建DOM树。

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

雪碧图

css雪碧图(sprite)是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点：

1、减少Http请求数量（因为浏览器同一时间能够加载的资源数是一定的，IE 8是6个，Chrome是6个，Firefox是8），提高加载性能 2、有些情况下可以减少图片的大小（字节总和）

缺点：
1、高清屏会失真
2、雪碧图不方便变化，提高了网页开发和维护成本

字体图标

字体图标就是利用字体来显示网页中的的纯色图标，或者是特殊字体

原理：

计算机里面每个字符都有一个unicode编码,比如「我」的unicode是\u6211（16进制），而字体文件的作用是规定某个字符应该用什么形状来显示，利用@font-face原理载入图标字体库，然后调用图标

优点：

1、灵活性：可以任意地缩放，改变颜色，产生阴影，透明效果，可以快速转化形态（：hover）
2、轻量性：本身体积更小，但携带的信息并没有削减。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
3、兼容性：网页字体支持所有现代浏览器，包括IE低版本。

缺点：

1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。 2、制作用于生成icon font的svg比较麻烦

base64

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息

优点：

1、减少了HTTP请求 2、某些文件可以避免跨域的问题 3、没有图片更新要重新上传，还要清理缓存的问题

缺点：

1、用于小图，体积约为原图的4/3 2、兼容性：IE6/IE7浏览器是不支持

伪类与伪元素

1、两者都不存在于HTML文档树中，伪类与伪元素都是用于向选择器加特殊效果
2、伪类与伪元素的本质区别就是是否抽象创造了新元素
3、伪类只要不是互斥可以叠加使用
4、伪元素在一个选择器中只能出现一次，并且只能出现在末尾
5、伪类与伪元素优先级分别与类、标签优先级相同
6、伪类单冒号，伪元素双冒号

效果属性（box-shadow、border-radius、background、clip-path）

box-shadow
1、营造层次感（立体感）
2、充当没有宽度的边框
3、特殊效果

background
1、纹理/图案
2、渐变
3、雪碧图动画
4、背景图尺寸适应

clip-path
1、对容器进行裁剪
2、常见几何图形
3、自定义路径

Canvas和svg

Canvas
1、Canvas是基于位图的，它不能够改变大小，只能缩放显示，放大或缩小时图形质量会有所损失
2、依赖分辨率，逐像素进行渲染的
3、 Canvas 通过 Javaｓｃｒｉｐｔ来绘制2D图形（动态生成）
4、不支持事件处理器。Canvas输出的是一整幅画布，能够以 .png 或 .jpg 格式保存结果图像
5、适合像素处理，动态渲染和大数据量绘制，最适合图像密集型的游戏（频繁重绘对象）
6、如果图形位置发生变化，整个场景需要重新绘制，包括任何或许已被图形覆盖的对象

svg
1、SVG 可缩放矢量图形（Scalable Vector Graphics），是一种使用可扩展标记语言（XML）描述2D图形的语言
2、不依赖分辨率,逐元素（DOM元素）进行渲染,能够很好的处理图形大小的改变, 放大或缩小时图形质量不会有所损失
3、基于XML，用文本格式的描述性语言来描述图像内容
4、支持事件处理器。SVG绘制出的每个图形元素都是独立的DOM节点，能够方便的绑定事件
5、适合静态图片展示，高保真文档查看和打印的应用场景，不适合游戏应用）
6、如果对象属性发生变化，浏览器能自动重现图形。也就是说，SVG绘图很容易编辑，只需要增加或移除相应的元素即可

浏览器内核

Trident内核(IE内核)
代表作品是IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。代表作品还有腾讯、Maxthon（遨游）、360浏览器等。但由于市场份额比较大，曾经出现脱离了W3C标准的时候，同时IE版本比较多，存在很多的兼容性问题

Gecko(Firefox内核)
代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主要操作系统中使用

Webkit内核(Safari内核,Chrome内核原型,开源)
它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核

Presto内核
表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto

Blink内核
由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了

css动画

动画类型

1、transition补间动画 2、keyframe关键帧动画 3、animation逐帧动画
补间动画

1、位置-平移（left/right/margin/transform） 2、方位-旋转（transform） 3、大小-缩放（transform） 4、透明度（opacity） 5、其他线性变换（transform）

Javascript理解this对象
this是函数运行时自动生成的一个内部对象，只能在函数内部使用，但总指向调用它的对象。

通过以下几个例子加深对this的理解。

（1）作为函数调用

var name = ‘Jenny‘;
function person() {
return this.name;
}
console.log(person()); //Jenny
上面这个例子在全局作用域中调用person()，此时的调用对象为window，因此this指向window，在window中定义了name变量，因此this.name相当于window.name，为Jenny。

再看下面一个例子：

复制代码
function a() {
function b() {
function c() {
console.log(this);
}
c();
}
b();
}
a(); // window
复制代码
这个例子中，也同为函数调用，因此this指向window。

（2）作为对象的方法调用

复制代码
var name = ‘Jenny‘;
var obj = {
name: ‘Danny‘,
person: function() {
return this.name;
}
};
console.log(obj.person()); //Danny
复制代码
在这个例子中，person()函数在obj对象中定义，调用时是作为obj对象的方法进行调用，因此此时的this指向obj，obj里面定义了name属性，值为Danny，因此this.name = "Danny"。

（3）作为构造函数调用

作为构造函数调用和普通函数调用的区别是，构造函数使用new关键字创建一个实例，此时this指向实例对象。

复制代码
function person() {
return new person.prototype.init();
}
person.prototype = {
init: function() {
return this.name;
},
name: ‘Brain‘
};
console.log(person().name); //undefined
复制代码
这是一个比较复杂的例子，涉及到了原型。

首先，创建构造函数person，为函数重新定义原型，在原型上定义了两个方法init和name，其中init返回this.name。

调用person函数的name属性，发现返回的是undefined，为什么不是Brain呢？

我们看，调用person，返回person.prototype.init()的一个实例，假设返回的这个实例名为a，那么此时的this指向的就是a，a作为person.prototype.init()的一个实例，那么所有定义在person.prototype.init()中的方法等都可以被a调用，但是name属性定义在person的原型中，而非init函数中，因此返回undefined。

（4）apply和call

使用apply()和call()可以改变调用函数的对象，第一个参数为改变后调用这个函数的对象，其中apply()的第二个参数为一个数组，call的第二个参数为每个参数。

复制代码
function person() {
return this.name;
}
var obj = {
name: ‘Jenny‘,
age: 18
};
console.log(person.apply(obj)); //Jenny
复制代码
使用apply函数改变了调用person的对象，是在obj对象下面调用person，不再是在window对象下调用了，因此this指向obj，this.name = "Jenny";

深入理解javascript原型链

　　在javascript中原型和原型链是一个很神奇的东西，对于大多数人也是最难理解的一部分，掌握原型和原型链的本质是javascript进阶的重要一环。今天我分享一下我对javascript原型和原型链的理解。

一、对象等级划分

　　我们认为在javascript任何值或变量都是对象，但是我还需要将javascript中的对象分为一下几个等级。

　　首先Object是顶级公民，这个应该毋庸置疑，因为所有的对象都是间接或直接的通过它衍生的。Function是一等公民，下面会做解释。几个像String，Array，Date，Number，Boolean，Math等内建对象是二等公民。剩下的则都是低级公民。

　　二、原型prototype

　　首先prototype是一个属性，同时它本身也是一个对象。那么哪些是具有prototype这个属性呢？其实javascript中所有的函数都有prototype这个属性，反过来所有具有prototype的对象本身也是一个函数，没错就是一个函数。

　　第一条我不再印证，主要看看第二条。大家都知道Object，Array，Date都有prototype，他们是函数吗？是的他们也是函数的一种，为什么这么说呢？我们在定义一个对象或者数组时，是不是可以这么做var o = new Object(),a = new Array()。学过java的人都知道new是用实例化一个对象的方法，但是我们都知道javascript中不存在真正的类的概念，所以只能用函数来模拟，那么既然可以有上面的做法也就印证了Object和Array也是特殊的函数。

　　其实上面说到的几等公民基本都是函数的一种，除了Math这个工具对象外，应该没有见过这种new Math()这种写法吧！当然这种写法也是会报错的，所以在访问Math.prototype返回的也是undefined。

　　三、__proto__和原型链

　　__proto__是一个指针，它指的是构造它的对象的对象的prototype，听起来有的拗口。举个例子吧！

　　如上面代码，o是Object的一个实例，所以o的__proto__指针指向构造o的Object的prototype。这样的意义在于o可以使用Object.prototype里面的方法，例如toString(),o在访问toString方法时，首先会在自身寻找，如果没有找到则会在__proto__也就是Object.prototype上面查找。

　　可以说几乎所有的javascript对象都有__proto__这样一个指针包括Object,我们来看一看

　　其实a = 1就相当于a = new Number(1)。可以看到所有的内建对象以及Object的__proto__指向的都是一个匿名函数，也就可以认为它们其实也是function的一个实例，所以之前会说function是一等公民。

　　那么原型链到底是什么呢？我们展开a.__proto__也就是Number.prototype对象，它是没有toString()的方法的，但是对于a来说它其实是可以调用toString的方法的，这就是原型链的作用。看下面代码

　　看上面代码和结果，我们沿着a的__proto__一直访问会到达Object的prototype，也就是说a调用toString方法最终其实是访问Object.prototype的toString方法。那么a的原型链就是由Number.prototype和Object.prototype组成，当a访问一个方法或属性时，它会先在自身查找，然后再沿原型链找，找到则调用，没找到报错。为了印证这一点，我们在Number.prototype上面加一个toString的方法。

　　可以看到a调用的是Number.prototype的toString方法，在找到之后就停止。在javascript中，几乎所有的对象的原型链的终点都是Object.prototype　

　　总结

　　__proto__是实现原型链的关键，而prototype则是原型链的组成。最后附上一张稍微复杂的原型链和构造函数的关系图，有兴趣可以研究一下。

原文地址：https://www.cnblogs.com/xdshi/p/11444481.html

时间： 2024-10-21 18:09:05

前端面试合集

前端面试合集的相关文章

w3school前端教程合集

2019Android74道高级面试合集（含BAT字节跳动等等）

腾讯面试合集：热修复连环炮(热修复是什么有接触过tinker吗，tinker原理是什么)

前端插件合集

Python面试合集史上最全面Python面试题和详解(10套) 完整版

前端资源教程合集

前端相关网址合集

JavaScript推荐资料合集(前端必看)

常用的前端开发插件与工具合集