前端面试合集

2019年11月09日 阅读数:116
这篇文章主要向大家介绍前端面试合集,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

VUEjavascript

1.什么是 vue 生命周期css

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

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

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

5.created和mounted的区别html5

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

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

vue路由面试题react

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

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.取数组的最大值(ES五、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的一些常见面试题,但愿对正在找工做的你有所帮助。

还有欢迎你们补充~~~

1、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]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![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]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![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 包含嵌入音频文件的标准方式,支持的格式包括 MP三、Wav 和 Ogg:

<audio controls>

<source src="jamshed.mp3" type="audio/mpeg">

Your browser does'nt support audio embedding feature.

</audio>

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

<video width="450" height="340" controls>

<source src="jamshed.mp4" type="video/mp4">

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]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

如何区分: DOCTYPE声明\新增的结构元素\功能元素
语义化的理解?
用正确的标签作正确的事情!

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

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

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

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

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

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

写出HTML5的文档声明方式

<DOCYPE html>

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、HTML五、CSS3
一、XHTML与HTML的有何异同?

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

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

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

三、Doctype的做用?标准模式与兼容模式各有什么区别?

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

四、HTML5 为何只须要写 ?

HTML不急于SGML,不用引用DTD

五、行内元素有哪些?块级元素有哪些? 空(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
六、页面导入样式时,使用link和@import有什么区别?

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

七、介绍一下你对浏览器内核的理解?

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

八、常见的浏览器内核有哪些?

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

九、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
十、简述一下你对HTML语义化的理解?

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

十一、iframe有那些缺点?

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

十二、列出display的值,说明他们的做用?position的值, relative和absolute定位原点是?

display:none,block,inline,inline-block,flex,grid,table,table-cell
position:static,relatice,absolute,fixed,sticky
relative定位原点是本身,absolute定位原点是离本身最近的父元素

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

1四、常见兼容性问题?

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

1五、若是须要手动写动画,你认为最小时间间隔是多久,为何?(阿里面试题)

除了电竞显示器,通常显示器是60hz,因此最小间隔为1000/60 = 16.7ms

1六、列举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如下不支持圆角
2五、cssSprite是什么 ?有什么优缺点?

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

2七、前端页面有哪三层构成? 分别是什么? 做用是什么?

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

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

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

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

visibility,cursor,font-size,color…

3一、谈谈之前端的角度出发作好seo须要作什么

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

3二、css选择符有哪些?优先级算法如何计算?

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

就近原则,下面覆盖上面
!important>内联>ID>类>标签
3七、document load 和document ready 的区别

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

3九、哪些浏览器支持html5?

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

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

能够帮助你分配文字为一个个列,须要指定列数和列之间的间隔

4一、描述css reset的做用和用途?

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

4二、写出5 种以上ie6 bug 的解决方法,哪些你认为是解决起来最麻烦的?

float状况下有双边距的bug,使用display: inline解决
宽高为奇数时有bug,使用偶数
min-height设置不了,加!important
z-index问题,给父亲设置position:relative
设置高度小与10px左右的时候,实际高度高于设置高度,由于有默认行高,把行高也设置
4四、什么是Web workers?为何咱们须要他?

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

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

阴影,rgba,圆角

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

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

4八、多人项目中,你如何规划css文件样式命名。

写在一个文档里,你们按照文档命名

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

5一、HTML中div与span区别;

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

5二、HTML5 存储类型有哪些,以及与他们的区别;

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

5三、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实现水平居中

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

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

5六、alt和title分别表示什么含义以及具体应用体现;

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

6七、什么事css预处理器;

less和sass等等,能够提供 CSS 缺失的样式层复用机制、减小冗余代码,提升样式代码的可维护性。

6八、css3中你最经常使用的有哪些?说明用法。

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

6九、document.write、innerHTML和innerText 的区别?

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

7二、实现 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
7三、实现当屏幕宽度大雨700,小于800是时引用外部样式style-7-9.css

7四、HTML中input的6个新属性

time,date,url,email,search,calendar,number

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

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

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

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

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

8一、CSS选择符有哪些?哪些属性能够继承?优先级算法如何计算?内联和important哪一个优先 级高?

8二、标签选择符 类选择符 id选择符

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

8四、描述css reset的做用和用途

8五、解释css sprites,如何使用。

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

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

8八、清除浮动的几种方式,各自的优缺点

8九、CSS3有哪些新特性?

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

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

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

9三、Table标签的做用是什么。

9四、定义连接四种状态的伪类的正确书写顺序是?

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

9六、遇到疑难问题时,你一般时如何解决的?

9七、Inline,inline-block和block的区别是。

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

9九、CSS超过宽度的文字显示点点,必需要设置的属性。

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

10一、文本强制换行。

10二、display:none与visibility:hidden的区别是什么?

10三、超连接访问事后hover样式后会出现什么问题?如何解决。

10四、前端页面有那三部分构成,其做用是什么。

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

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

10七、多人项目中,你如何规划css文件样式命名。

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

10九、你常常遇到的浏览器兼容性有哪些?一般是怎么处理的。

1十、HTML中div与span区别;

1十一、HTML5 存储类型有哪些,以及与他们的区别;

1十二、css实现垂直水平居中。

11三、浏览器内核分别是什么;

11四、列举5种以上表单元素中input的type类型;

11五、alt和title分别表示什么含义以及具体应用体现;

11六、css中position的属性值都有哪些?并描述其含义及具体解释;

11七、对html语义化理解,以及语义化有哪些优势。

11八、常用的页面开发工具级测试工具。

11九、常用什么脚本库,开发或使用什么应用或组件;

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

12一、简要画出盒模型,并描述关键要素的含义;

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

12三、Doctype做用?标准模式与兼容模式有什么区别;

12四、html5有哪些新特性,移除了哪些元素;

12五、介绍一下标准css盒子模型;

12六、什么事css预处理器;

12七、css3有哪些新特性;

12八、html5 中的应用缓存是什么?

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

130、简单介绍boostrap栅格系统

13一、你如何对网站的文件和资源进行优化?

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

13三、get和post区别?

13四、Doctype的做用是什么?

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

13六、解释一下浮动和它的工做原理。

13七、列举不一样的清除浮动的方法,并指出他们各自适用的场景。


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获取宽高如何获取盒模型对应的宽高

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

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

三、window.getComputedStyle(dom).width/height
这种方式的原理和2是同样的,这个能够兼容更多的浏览器,通用性好一些

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

五、 dom.offsetWidth/offsetHeight

边距重叠

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

BFC

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

 

BFC的原理
一、内部的box会在垂直方向,一个接一个的放置
二、每一个元素的margin box的左边,与包含块border box的左边相接触(对于从作往右的格式化,不然相反)
三、box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
四、bfc的区域不会与浮动区域的box重叠
五、bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
六、计算bfc高度的时候,浮动元素也会参与计算

怎么建立bfc(边距重叠产生缘由)

一、float属性不为none(脱离文档流)
二、position为absolute或fixed
三、display为inline-block,table-cell,table-caption,flex,inine-flex
四、overflow不为visible
五、根元素的垂直margin不会被重叠

防止外边距重叠解决方案

一、外层元素padding代替
二、内层元素透明边框 border:1px solid transparent;
三、内层元素绝对定位 postion:absolute
四、外层元素 overflow:hidden;
五、内层元素 加float:left;或display:inline-block;
六、内层元素padding:1px;

BFC应用场景

一、自适应两栏布局 二、清除内部浮动

浮动float误解和误用

float 被设计出来的初衷是用于文字环绕效果,即一个图片一段文字,图片float:left以后,文字会环绕图片
可是,后来你们发现结合float + div能够实现以前经过table实现的网页布局,所以就被“误用”于网页布局了

为什么 float 会致使父元素塌陷?

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

px

PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。可是这种方法存在一个问题,当用户在浏览器中浏览咱们制做的Web页面时,若是改变了浏览器的缩放,这时会使用咱们的Web页面布局被打破。这样对于那些关心本身网站可用性的用户来讲,就是一个大问题了。所以,这时就提出了使用“em”来定义Web页面的字体。

em

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树
执行Javascript:加载并执行Javascript代码(包括内联代码或外联Javascript文件)
构建渲染树(render tree):根据DOM树和CSSOM树,生成渲染树(render tree);渲染树:按顺序展现在屏幕上的一系列矩形,这些矩形带有字体,颜色和尺寸等视觉属性
布局(layout):根据渲染树将节点树的每个节点布局在屏幕上的正确位置
绘制(painting):遍历渲染树绘制全部节点,为每个节点适用对应的样式,这一过程是经过UI后端模块完成
重排或者叫回流(reflow,relayout)

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

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


微信小程序面试资料

一:面试题

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

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

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

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

1、WXML (WeiXin Markup Language)

是框架设计的一套标签语言,结合基础组件、事件系统,能够构建出页面的结构。内部主要是微信本身定义的一套组件。

2、WXSS (WeiXin Style Sheets)

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

2、js

逻辑处理,网络请求

3、json

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

4、app.json

必需要有这个文件,若是没有这个文件,项目没法运行,由于微信框架把这个做为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色,配置导航条样式,配置默认标题。

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

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

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

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

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

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

5、app.js

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

6、app.wxss

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

 

 

 

 

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

答:1、将全部的接口放在统一的js文件中并导出;

2、在app.js中建立封装请求数据的方法;

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

 

三、有哪些参数传值的方法?

答:1、给HTML元素添加data-*属性来传递咱们须要的值,而后经过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不能够存放对象;

2、设置id 的方法标识来传值经过e.currentTarget.id获取设置的id的值,而后经过设置全局对象的方式来传递数值;

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

 

四、你使用过哪些方法,来提升微信小程序的应用速度?

答:1、提升页面加载速度;

2、用户行为预测;

3、减小默认data的大小;

4、组件化方案。

 

五、小程序与原生App哪一个好?

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

 

六、简述微信小程序原理?

答:微信小程序采用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的渲染、事件的处理。

 

 

 

 

七、分析下微信小程序的优劣势?

答:优点:一、无需下载,经过搜索和扫一扫就能够打开。

二、良好的用户体验:打开速度快。

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

四、安卓上能够添加到桌面,与原生App差很少。

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

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

二、样式单一。小程序的部分组件已是成型的了,样式不能够修改。例如:幻灯片、导航。

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

四、依托于微信,没法开发后台管理功能。

 

八、微信小程序与H5的区别?

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

传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并不是完整的浏览器,是微信开发团队基于浏览器内核彻底重构的一个内置解析器,针对小程序专门作了优化,配合本身定义的开发语言标准,提高了小程序的性能。

第二条是开发成本的不一样:

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

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

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

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

长久以来,当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,它的体验老是不尽人意,须要不断的对项目优化来提高用户体验。可是因为微信小程序运行环境独立.

 

九、怎么解决小程序的异步请求问题?

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

app.js

success: function (info) {

that.apirtnCallback(info)

}

index.js

onLoad: function () {

app.apirtnCallback = res => {

console.log(res)

}

 

十、小程序的wxss和css有哪些不同的地方?

答:1、wxss的图片引入需使用外链地址;

2、没有Body;样式可直接使用import导入.

 

十一、webview中的页面怎么跳回小程序中?

答:首先要引入最新版的jweixin-1.3.2.js,而后

wx.miniProgram.navigateTo({

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

})

十二、小程序关联微信公众号如何肯定用户的惟一性?

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

 

1三、如何实现下拉刷新?

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

 

1四、使用webview直接加载要注意哪些事项?

答: 1、必需要在小程序后台使用管理员添加业务域名;

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

3、微信分享只能够都是小程序的主名称了,若是要自定义分享的内容,需小程序版本在1.7.1以上;

4、h5的支付不能够是微信公众号的appid,必须是小程序的appid,并且用户的openid也必须是用户和小程序的。

 

1五、小程序调用后台接口遇到哪些问题?

答:1.数据的大小有限制,超过范围会直接致使整个小程序崩溃,除非重启小程序;

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

 

1六、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'

})

1七、小程序和Vue写法的区别?

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

2、调用data模型的时候:小程序是this.data.uinfo,而Vue是this.uinfo;给模型赋值也不同,小程序是this.setData({uinfo:1}),而Vue是直接this.uinfo=1

1八、小程序的双向绑定和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">

<navigatorurl="search/search">

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

</navigator>

</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>

</view>

<viewclass="item_right">

<view><text class="time">{{item.time}}</text></view>

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

</view>

</view>

<view class="line"></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选择器有哪些,选择器的权重的优先级

选择器类型

一、ID  #id

二、class  .class

三、标签  p

四、通用  *

五、属性  [type="text"]

六、伪类  :hover

七、伪元素  ::first-line

八、子选择器、相邻选择器

3、权重计算规则

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

2. 第二等:表明ID选择器,如:#content,权值为0100。

3. 第三等:表明类,伪类和属性选择器,如.content,权值为0010。

4. 第四等:表明类型选择器和伪元素选择器,如div p,权值为0001。

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

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

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

 

让div等块级元素水平和垂直都居中,即永远处于屏幕的正中央,当咱们作如登陆块时很是有用!

 实现1、原理:要让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:100%; margin:0 auto;"> 

 

       <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="main">

 <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、页面级优化
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是什么区别 原理

1、MVC(Model-View-Controller)

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

MVC使用很是普遍,好比JavaEE中的SSH框架

 

3、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. 浏览器缓存有哪些,一般缓存有哪几种

1、http缓存

2、websql

cookie

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.谈谈垃圾回收机制方式及内存管理

回收机制方式

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

二、原理:垃圾收集器会按期(周期性)找出那些不在继续使用的变量,而后释放其内存。可是这个过程不是实时的,由于其开销比较大,因此垃圾回收器会按照固定的时间间隔周期性的执行。

三、实例以下:

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所指向,因此该块内存并不会被释放。

 四、垃圾回收策略:标记清除(较为经常使用)和引用计数。

标记清除:

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

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

引用计数:

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

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

4五、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()

4六、px和em的区别

相同点:px和em都是长度单位;

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

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

IE: trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:之前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)

4八、什么叫优雅降级和渐进加强?

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

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

区别:

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

b. 渐进加强则是从一个很是基础的,可以起做用的版本开始,并不断扩充,以适应将来环境的须要

c. 降级(功能衰减)意味着往回看;而渐进加强则意味着朝前看,同时保证其根基处于安全地带

4九、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种解释:

通常会经历如下几个过程:

一、首先,在浏览器地址栏中输入url

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

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

四、浏览器向服务器发起tcp链接,与浏览器创建tcp三次握手。(TCP即传输控制协议。TCP链接是互联网链接协议集的一种。)

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

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

七、浏览器收到HTTP响应

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

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

十、客户端和服务器交互

十一、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几个阶段

一、建立一个空对象

[javascript] view plain copy

1. varobj=new Object();  

二、设置原型链

[javascript] view plain copy

1. obj.__proto__= Func.prototype;  

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

[javascript] view plain copy

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

四、判断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)、根据做用域链的规则,底层做用域没有声明的变量,会向上一级找,找到就返回,没找到就一直找,直到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

四、变量的做用域

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

变量的做用域分类:全局变量和局部变量。

特色:

一、函数内部能够读取函数外部的全局变量;在函数外部没法读取函数内的局部变量。

二、函数内部声明变量的时候,必定要使用var命令。若是不用的话,你实际上声明了一个全局变量!

 五、使用闭包的注意点

1)滥用闭包,会形成内存泄漏:因为闭包会使得函数中的变量都被保存在内存中,内存消耗很大,因此不能滥用闭包,不然会形成网页的性能问题,在IE中可能致使内存泄露。解决方法是,在退出函数以前,将不使用的局部变量所有删除。

2)会改变父函数内部变量的值。因此,若是你把父函数看成对象(object)使用,把闭包看成它的公用方法(Public Method),把内部变量看成它的私有属性(private value),这时必定要当心,不要随便改变父函数内部变量的值。

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

回收机制方式

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

二、原理:垃圾收集器会按期(周期性)找出那些不在继续使用的变量,而后释放其内存。可是这个过程不是实时的,由于其开销比较大,因此垃圾回收器会按照固定的时间间隔周期性的执行。

三、实例以下:

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所指向,因此该块内存并不会被释放。

 四、垃圾回收策略:标记清除(较为经常使用)和引用计数。

标记清除:

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

  到目前为止,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+'次');

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

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

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

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

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

异同点:

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

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

三、数据传输大小不一样:get方式传输的数据大小不能超过2KB 而POST要大的多

四、安全问题: GET 方式请求的数据会被浏览器缓存起来,所以有安全问题。

6六、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()

6七、px和em的区别(常见)

 

相同点:px和em都是长度单位;

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

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

IE: trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:之前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)

6九、什么叫优雅降级和渐进加强?(常见)

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

优雅降级 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不在不一样的浏览器窗口中共享,即便是同一个页面;

 


一、html5为何只须要写<!doctype html>?

答:html5不是基于sgml(标准通用标记语言),不须要对dtd文件进行引用,可是须要doctype来规范浏览器的行为,

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

 

二、行内元素有哪些?块级元素有哪些?空(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>

不为人知的是:

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

 

 

三、页面导入样式时,使用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)最值得推荐。

 

 

 

 

四、常见的浏览器内核有哪些?

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

 

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

 

使用Presto内核的浏览器:Opera7及以上版本;

 

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

 

 

五、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标志的一个重要因素,此外,还能够根据新增的结构、功能元素来加以区分。

 

六、iframe有哪些优缺点?

优势:

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

2.跨域通讯。JavaScript跨域总结与解决办法 ,相似的还有浏览器多页面通讯,好比音乐播放器,用户若是打开了多个tab页,应该只有一个在播放。

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

4.纯前端的utf8和gbk编码互转。好比在utf8页面须要生成一个gbk的encodeURIComponent字符串,能够经过页面加载一个gbk的iframe,而后主页面与子页面通讯的方式实现转换,这样就不用在页面上插入一个很是巨大的编码映射表文件了

 

缺点:

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

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

 

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

 

  三、连接导航问题。使用框架结构时,你必须保证正确设置全部的导航连接,如否则,会给访问者带来很大的麻烦。好比被连接的页面出如今导航框架 内,这种状况下访问者便被陷住了,由于此时他没有其余地方可去。

 

七、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属性所设置的快捷键不能与浏览器的快捷键冲突,不然将优先激活浏览器的快捷键。

 

 

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

<div style=”height:1px;overflow:hidden;background:red”></div>

 

九、网页验证码是干吗的?是为了解决什么安全问题?

 

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

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

十、介绍一下标准的css的盒子模型?与低版本IE的盒子模型有什么不一样?

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

W3C 盒子模型的范围包括 margin、border、padding、content,而且 content 部分不包含其余部分

IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不一样的是:IE 盒子模型的 content 部分包含了 border 和 pading

 

 

十一、如何居中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

 

 

十二、display有哪些值?说明他们的做用?

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

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

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

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

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

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

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

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

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

 

 

 

1三、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属性时,当前级的原始点则参照父级内容区的原始点进行定位。

 

1四、display设置为inline-block时,li与li之间有看不见的空白间隔是什么缘由引发的?有什么解决办法?

行框的排列会受到中间空白(回车空格等等)的影响,这些空白也会被应用样式,占据空间,因此会有间隔

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

 

1五、请解释下为何会出现浮动和何时须要清除浮动?清除浮动的方式?

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 盒模型属性已经改变,由此形成的一系列问题,得不偿失,不推荐使用

 

 

1六、在网页中的应该使用奇数仍是偶数的字体?为何呢?

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

使用奇数号字体很差的地方是,文本段落没法对齐

 

1七、margin和padding分别适合什么场景使用?

什么时候应当使用margin:

 

(1)须要在border外侧添加空白时,

 

(2)空白处不须要有背景(色)时,

 

(3)上下相连的两个盒子之间的空白须要相互抵消时,好比15px+20px的margin,将获得20px的空白(注意地方见第三点)。

 

什么时候应当使用padding

 

(1)须要在border内侧添加空白时(每每是文字与边框距离的设置),

 

(2)空白处须要背景(色)时,

 

(3)上下相连的两个盒子之间的空白但愿等于二者之和时,好比15px+20px的padding,将获得35px的空白。

 

margin使用时应该注意的地方

 

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

 

 

 

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

答:相对于父容器的宽度

 

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

答:一个网站可以兼容多个终端——而不是为每一个终端作一个特定的版本。

优势:

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

可以快捷解决多设备显示适应问题

缺点:

兼容各类设备工做量大,效率低下

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

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

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

 

respond.js和css3-mediaqueries-js

 

 

20、设置元素浮动后,该元素的display值是多少?

display:block;

 

 

2一、怎么让chrome支持小于12px的文字?

chrome私有属性:-webkit-text-size-adjust:none;

-webkit-transform:scale(0.8);

行内元素设置:-webkit-transform:scale(0.8);display:inline-block

 

 

2二、display:inline-block何时会显示间隙?

1.给 父元素 写font-size:0

 

2.把标签写到一行,不要在编辑器里敲回车换行,可是这种写法对于标签不少的状况可读性太差,适用与例如<a></a><a></a>这样简单的结构

 

 

 

2三、有一个高度自适应的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

 

 

2四、什么是window对象?什么是document对象?

window它是一个顶层对象,而不是另外一个对象的属性即浏览器的窗口。

document对象是window对象的一个对象属性

 

 

2五、null和undefined的区别?

null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN。

null表示”没有对象”,即该处不该该有值

(1) 做为函数的参数,表示该函数的参数不是对象。

(2) 做为对象原型链的终点。

undefined表示”缺乏值”,就是此处应该有一个值,可是尚未定义

(1)变量被声明了,但没有赋值时,就等于undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。

(3)对象没有赋值的属性,该属性的值为undefined。

(4)函数没有返回值时,默认返回undefined。

 

2六、什么是闭包(closure)?为何要用它?

 

闭包就是可以读取其余函数内部变量的函数

因为在Javascript语言中,只有函数内部的子函数才能读取局部变量,所以能够把闭包简单理解成”定义在一个函数内部的函数”。

因此,在本质上,闭包就是将函数内部和函数外部链接起来的一座桥梁。

 

闭包的用途:

闭包能够用在许多地方。它的最大用处有两个,一个是前面提到的能够读取函数内部的变量,另外一个就是让这些变量的值始终保持在内存中

重用变量又不能形成全局污染

 

2七、js代码中”use strict”是什么意思?使用它区别是什么?

进入”严格模式”的标志,老版本的浏览器会把它看成一行普通字符串,加以忽略

 

将”use strict”放在脚本文件的第一行,则整个脚本都将以”严格模式”运行。若是这行语句不在第一行,则无效,整个脚本以”正常模式”运行。若是不一样模式的代码文件合并成一个文件,这一点须要特别注意。

(严格地说,只要前面不是产生实际运行结果的语句,”use strict”能够不在第一行,好比直接跟在一个空的分号后面。)

将”use strict”放在函数体的第一行,则整个函数以”严格模式”运行

 

由于第一种调用方法不利于文件合并,因此更好的作法是,借用第二种方法,将整个脚本文件放在一个当即执行的匿名函数之中

 

– 消除Javascript语法的一些不合理、不严谨之处,减小一些怪异行为;

 

– 消除代码运行的一些不安全之处,保证代码运行的安全;

 

– 提升编译器效率,增长运行速度;

 

– 为将来新版本的Javascript作好铺垫。

 

 

 

2八、js中有一个函数,执行对象查找时,永远不会去查找原型,这个函数是什么?

hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具备指定名称的属性。若是有,返回true,不然返回false。该方法属于Object对象,因为全部的对象都”继承”了Object的对象实例,所以几乎全部的实例对象均可以使用该方法。

 

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

js的延迟加载有助与提升页面的加载速度,如下是延迟加载的几种方法:

 

1.使用setTimeout延迟方法的加载时间

 

延迟加载js代码,给网页加载留出更多时间

 

<script type=”text/javascript” >

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文件底部)

<script type=”text/javascript”>

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技术(异步)

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

异步: 请求经过事件触发->服务器处理(这是浏览器仍然能够做其余事情)->处理完毕

再举个生活的例子:你们联系的时候若是使用手机通话,那么只能跟一我的联系,过程当中作不了其余任何操做,若是使用短信或者聊天的方式,就能够同时跟不少人聊天,别人收到信息后会回复,在回复以前还能够跟另外的人进行聊天。

 

3一、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,其缘由在于其容许更精确的控制要刷新页面的那一个部分。

 

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

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

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

三、相同点:两个方法产生的做用是彻底同样的。

四、不一样点:方法传递的参数不一样,单个单数传入,另外一个能够以数组方式传入

 

3三、JQ和JQUI有啥区别?

 

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

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

 

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

用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完美的进行无刷新浏览了。

 

 

 

 

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

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

 

 

3六、已知ID的input输入框,但愿获取这个输入框的输入值,怎么作?(不使用第三方框架)

document.getElementById(id).value;

 

 

 

3七、但愿获取到页面中全部的checkbox怎么作?(不使用第三方框架)

document.getElementsByTagName(‘input’);

遍历循环

 

 

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

var div = document.getElementById(id);

div.innerHTML = ”;

div.style.color = ”;

 

 

 

3九、当一个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)解析,支持复合数据类型(数组、对象、字符串、数字)

 

 

 

4一、请看下列代码输出什么?解释缘由?

var a;

alert(typeof a); //undefined

 

alert(b); //报错

 

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

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

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

 

ar a = null;

alert(typeof a); //object

 

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

 

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

有以下6种返回值:

1)number;

2)string;

3)boolean;

4)object

5)function

6)undefined;

 

 

4三、split() join()的区别?

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

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

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

 

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

 

 

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

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

 

unshift和shift这两个方法都是经过对数组的头部进行的操做,其余基本跟push和pop相似

 

 

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

 

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

 

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

 

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

 

 

 

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

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

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

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

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

 

});

 

 

 

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

本地对象:

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

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

宿主对象:全部的BOM和DOM对象都是宿主对象,是那些官方未定义,你本身构建的对象加上DOM和BOM对象组成的

 

 

 

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

如下是经常使用的前端基础框架:

 

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

 

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

 

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

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

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

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

(4)不须要变更页面内容,即可提供打印版本而不须要复制内容,提升网站易用性

 

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

 

 

 

4九、xhtml和html有什么区别?

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

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

 

一、XHTML要求正确嵌套

二、XHTML全部元素必须关闭

三、XHTML区分大小写

四、XHTML属性值要加引号

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

六、属性值不能简写

 

 

 

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

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

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

 

 

 

 

 

 

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

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

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

 

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

 

 

5二、前端页面有哪三层构成,分别是什么?做用是什么?

结构层、表示层、行为层

 

结构层(structural layer)

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

 

表示层(presentation layer)

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

 

行为层(behaviorlayer)

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

 

 

 

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

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

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

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

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

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

 

5四、看下列代码?输出什么?解释缘由?

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

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

var a = new Object();

a.value=1;

b = a;

b.value=2;

alert(a.value);

 

5六、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;

})

 

5七、你能描述一下渐进加强和优雅降级之间的不一样吗?

若是提到了特性检测,能够加分。

检测浏览器,渐进加强就是让牛b的浏览器的效果更好,优雅降级就是让2b的浏览器在功能ok的状况下效果通常。

 

5八、线程与进程的区别?

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

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

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

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

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

 

5九、请解释一下什么是”语义化的 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的话,还有要多买证书和部署的问题,^_^。

 

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

1.优化图片

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

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

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

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

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

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

 

6二、若是你参与到一个项目中,发现他们使用 Tab 来缩进代码,可是你喜欢空格,你会怎么作?

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

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

3.直接使用 VIM 的 retab 命令

 

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

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

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

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

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

 

6五、若是今年你打算熟练掌握一项新技术,那会是什么?

nodejs,html5,css3,less

 

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

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

 

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

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

<style type=”text/css” media=”all”>@import “../fouc.css”;</style>

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

解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script></script>元素就能够了。

 

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

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

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

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

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

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

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

 

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

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’会有什么问题吗?

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

十6、若是网页内容须要支持多语言,你会怎么作?

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

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

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

 

7一、data-属性的做用是什么?

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

<div data-author=”david” data-time=”2011-06-20″ data-comment-num=”10″>…</div>

div.dataset.commentNum; // 10

 

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

并非全部的浏览器都支持.dataset属性,测试的浏览器中只有Chrome和Opera支持。

 

7二、若是把 HTML5 看做作一个开放平台,那它的构建模块有哪些?

<nav>, <header>,<section>, <footer>

 

7三、请描述一下 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)和等号。

 

 

7四、描述下 “reset” CSS 文件的做用和使用它的好处。

由于浏览器的品种不少,每一个浏览器的默认样式也是不一样的,因此定义一个css reset能够使各浏览器的默认样式统一。

 

 

7五、解释下浮动和它的工做原理?

浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留

 

 

7六、列举不一样的清除浮动的技巧,并指出它们各自适用的使用场景?

1.使用空标签清除浮动。

这种方法是在全部浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增长了无心义标签。

2.使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照如下示例。使用中需注意如下几点。1、该方法中必须为须要清除浮动元素的伪对象中设置 height:0,不然该元素会比实际高出若干像素;2、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=”layout”>

<div id=”left”>Left</div>

<div id=”right”>Right</div>

</div>

 

7七、解释下 CSS sprites,以及你要如何在页面或网站中使用它?

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

 

7八、你最喜欢的图片替换方法是什么,你如何选择使用?

<h2> <span 图片丢这里></span>Hello World </h2> 把span背景设成文字内容,这样又能够保证seo,也有图片的效果在上面。

通常都是:alt,title,onerror

 

7九、讨论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

 

8一、如何视觉隐藏网页内容,只让它们在屏幕阅读器中可用?

1.display:none;的缺陷

搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

2. visibility: hidden ;的缺陷

这个你们应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法

.texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height: 0; }

就像上面的一段CSS所展现的方法,将宽度和高度设定为0,而后超过部分隐藏,就会弥补上述1、二方法中的缺陷,也达到了隐藏内容的目的。

 

8二、你用过栅格系统吗?若是使用过,你最喜欢哪一种?

好比:Bootstrap,流式栅格系统

 

 

8三、你用过媒体查询,或针对移动端的布局/CSS 吗?

@media screen and (min-width: 400px) and (max-width: 700px) { … }

@media handheld and (min-width: 20em), screen and (min-width: 20em) {….}

媒体查询,就是响应式布局。

 

8四、你熟悉 SVG 样式的书写吗?

<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”>

 

<circle cx=”40″ cy=”40″ r=”24″ style=”stroke:#006600; fill:#00cc00″/>

 

<text x=”250″ y=”150″ font-family=”Verdana” font-size=”10px” fill=”blue”>Hello, out there</text>

 

<defs><style type=”text/css”> <![CDATA[.sample{stroke:blue;fill:#0080FF;opacity:1;}]]></style></defs>

 

<use xlink:href=”#sample1″ class=”sample”/>

</svg>

 

8五、如何优化网页的打印样式?

<link rel=”stylesheet” type=”text/css” media=”screen” href=”xxx.css” />

其中media指定的属性就是设备,显示器上就是screen,打印机则是print,电视是tv,投影仪是projection。

<link rel=”stylesheet” type=”text/css” media=”print” href=”yyy.css” />

但打印样式表也应有些注意事项:

一、打印样式表中最好不要用背景图片,由于打印机不能打印CSS中的背景。如要显示图片,请使用html插入到页面中。

二、最好不要使用像素做为单位,由于打印样式表要打印出来的会是实物,因此建议使用pt和cm。

三、隐藏掉没必要要的内容。(@print div{display:none;})

四、打印样式表中最好少用浮动属性,由于它们会消失。

若是想要知道打印样式表的效果如何,直接在浏览器上选择打印预览就能够了。

 

8六、在书写高效 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,是否是很快。可是咱们不该该为了效率而牺牲可读性和可维护性

 

8七、使用 CSS 预处理器的优缺点有哪些?

(SASS,Compass,Stylus,LESS)

描述下你曾经使用过的 CSS 预处理的优缺点

 

8八、若是设计中使用了非标准的字体,你该如何去实现?

Webfonts (字体服务例如:Google Webfonts,Typekit 等等。)

 

8九、解释下浏览器是如何判断元素是否匹配某个 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(内容) – 盒子的内容,显示文本和图像。

 

9一、解释下事件代理?

JavaScript事件代理则是一种简单的技巧,经过它你能够把事件处理器添加到一个父级元素上,这样就避免了把事件处理器添加到多个子级元素上。

当咱们须要对不少元素添加事件的时候,能够经过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。

function getEventTarget(e) {

e = e || window.event;

return e.target || e.srcElement;

}

 

9二、解释下 JavaScript 中 this 是如何工做的?

this 永远指向函数运行时所在的对象,而不是函数被建立时所在的对象。匿名函数或不处于任何对象中的函数指向 window

1.若是是call,apply,with,指定的this是谁,就是谁

2.普通的函数调用,函数被谁调用,this就是谁

 

9三、解释下原型继承的原理?

function getProperty(obj, prop) {

 

if (obj.hasOwnProperty(prop)) {

return obj[prop];

}else if (obj.__proto__ !== null) {

return getProperty(obj.__proto__, prop);

}else{

return undefined;

}

}

 

9四、生成时间戳的两种方法?

JavaScript 获取当前时间戳:

第一种方法:

 

var timestamp = Date.parse(new Date());

结果:1280977330000

第二种方法:

 

var timestamp = (new Date()).valueOf();

结果:1280977330748

 

第三种方法:

 

var timestamp=new Date().getTime();

结果:1280977330748

 

第一种:获取的时间戳是把毫秒改为000显示,

第二种和第三种是获取了当前毫秒的时间戳。

 

9五、用原型链的方式给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());

9六、定义一个方法,对全部传入的数字参数的第三位小数进行

四舍五入,使得返回值保留两位小数,不够的补0

 

9七、定义一个方法,实现阶乘

function factorial(num) {

if(num <= 1) {

return 1;

} else {

return num * arguments.callee(num – 1);

}

}

9八、定义一段代码,页面载入完成1分钟后非缓存模式刷新当前页面

window.onload=function()

{

setTimeout(function(){

location.reload();//要执行刷新的代码

},60000);

}

9九、document.getElementById(“HEAD”).onclick=function(oEvent){

var A = oEvent.type.B = oEvent.target

}

A和B的值是什么?

 

100、阻止事件默认行为和事件冒泡的方法是什么

默认行为:event.preventDefault();

冒泡:event.stopPropregation();

event.cancelBubble();

 

 

10一、把Object的实例化对象A、B、C合并 赋值给对象C

 

 

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

 

10三、当一个DOM节点被点击的时候,咱们但愿可以执行一个函数,应该怎么作?

直接在DOM里绑定事件:

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

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

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

Ajax是一种异步提交数据的方法。

一般在html中,要想从新获取页面的数据。更新某一个地方的数据时。就必须得刷新整个页面,才能从新刷新数据。那么问题来了,当咱们仅仅只须要更新某一个小地方的数据时。咱们也来刷新整个页面的话,就显得有点麻烦了,因而Ajax就帮咱们完成了这个功能,让咱们单独开辟一条道路来进行获取数据,而后页面不须要刷新,用JS把AJAX请求的数据显示到该显示的地方。AJAX叫 无刷新获取技术

 

json 是一种数据的载体,能够把他想象成数组同样的东西,只不过,它有点牛,就是不少格式均可以自动支持。就差很少这样了。

10五、看下列代码输出为什么?解释缘由?

var a;

alert(typeof a);//undefined

alert(b); //报错

 

10六、看下列代码,输出什么?解释缘由?

var a = null;

alert(typeof a); //object

 

10七、看下列代码,输出什么?

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

 

10八、看代码给答案?

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.value); //2

 

10九、输出今天的日期,以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);

1十、将字符串”<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’);

1十一、为了保证页面输出安全,咱们常常须要对一些特殊的字符进行转义,请写出一个函数escapeHtml,将< , > & , ” 进行转义

 

String.prototype.escapeHTML = function
() {

return
this.replace(/&/g,’&amp;’).replace(/>/g,’&gt;’).replace(/</g,’&lt;’).replace(/”/g,’&quot;’);

};

 

 

1十二、foo = foo || bar ,这行代码是什么意思?为何要这样写?

 

foo和bar应该都是bool型变量,||是表示 或 的意思,只要foo或者bar有一个为真,那么这个表达式的值就为真,并把它赋给foo

 

11三、看下列代码,将会输出什么?

var foo = 1;

function(){

console.log(foo);

var foo = 2;

console.log(foo);

}

结果:undifined,2

var foo=1; 它的做用域是window;可是函数体内有同名局部变量,在执行函数时,第一句会寻找体内变量。

若是想调用该定义,需明确指定做用域,不指定则默认函数体自己。

console.log(window.foo); //1

 

11四、用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);

11五、写一个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;

}

第二种:正则替换

<SCRIPT LANGUAGE=”JavaScript”>

<!–

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;

}

}

}


一、javascript 的 typeof 返回哪些数据类型

object
number
function
boolean
undefined
string
1
2
3
4
5
6
二、例举 3 种强制类型转换和 2 种隐式类型转换?

强制(parseInt(),parseFloat(),Number())
隐式(==)
1==”1”//true
null==undefined//true
1
2
3
4
三、split()和 join() 的区别

前者是切割成数组的形式,
后者是将数组转换成字符串
1
2
四、数组方法 pop() push() unshift() shift()

Push()尾部添加
pop()尾部删除
Unshift()头部添加
shift()头部删除
1
2
3
4
五、事件绑定和普通事件有什么区别

传统事件绑定和符合 W3C 标准的事件绑定有什么区别?

div1.οnclick=function(){}; <button onmouseover=””></button>
1
一、若是说给同一个元素绑定了两次或者屡次相同类型的事件,那么后面的绑定会覆盖前面 的绑定 ;
二、不支持 DOM 事件流 事件捕获阶段目标元素阶段=>事件冒泡阶段

addEventListener
一、 若是说给同一个元素绑定了两次或者屡次相同类型的事件,全部的绑定将会依次触发
二、 支持 DOM 事件流
三、 进行事件绑定传参不须要 on 前缀 addEventListener(“click”,function(){},true);//此时的事件就是在事件冒泡阶段执行

ie9 开始,ie11edge:addEventListener
ie9 之前:attachEvent/detachEvent
一、 进行事件类型传参须要带上 on 前缀
二、 这种方式只支持事件冒泡,不支持事件捕获 事件绑定是指把事件注册到具体的元素之上,普通事件指的是能够用来注册的事件

六、IE 和 DOM 事件流的区别

1.执行顺序不同、
2.参数不同
3.事件加不加 on
4.this 指向问题
IE9 之前:attachEvent(“onclick”)、detachEvent(“onclick”)
IE9 开始跟 DOM 事件流是同样的,都是 addEventListener
1
2
3
4
5
6
七、IE 和标准下有哪些兼容性的写法

var ev=ev||window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target
1
2
3
八、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
九、b 继承 a 的方法

考点:继承的多种方式

js继承有5种实现方式:

一、继承第一种方式:对象冒充

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
二、继承第二种方式: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
三、继承的第三种方式: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));

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
四、继承的第四种方式:原型链方式

即子类经过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
五、继承的第五种方式:混合方式

混合了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
十、JavaScript this 指针、闭包、做用域

this:指向调用上下文
闭包:内层做用域能够访问外层做用域的变量
做用域:定义一个函数就开辟了一个局部做用域,整个 js 执行环境有一个全局做用域
1
2
3
十一、事件委托是什么

符合 W3C 标准的事件绑定 addEventLisntener/attachEvent
利用事件冒泡的原理,让本身自己要触发的事件,让他的父元素代替执行!

十二、闭包是什么,有什么特性,对页面有什么影响

闭包就是可以读取其余函数内部变量的函数。
闭包的缺点:滥用闭包函数会形成内存泄露,由于闭包中引用到的包裹函数中定义的变量
永远不会被释放,因此咱们应该在必要的时候,及时释放这个闭包函数。

弄清楚闭包的概念及运行机制很是重要,详见博客()

1三、如何阻止事件冒泡和默认事件

阻止事件冒泡

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9 以前
1
2
阻止默认事件:
为了避免让 a 点击以后跳转,咱们就要给他的点击事件进行阻止

return false
e.preventDefault();
1
2
1四、添加 删除 替换 插入到某个接点的方法

obj.appendChild() //添加
obj.insertBefore() //插入。原生的 js 中不提供 insertAfter();
obj.replaceChild()//替换
obj.removeChild()//删除
1
2
3
4
1五、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和本身定义的对象。

1六、document load 和 document ready 的区别

Document.onload 是在结构和样式加载完就执行 js
window.onload:不只仅要在结构和样式加载完,还要执行完全部的样式、图片这些资源文 件,所有加载完才会触发 window.onload 事件
Document.ready 原生中没有这个方法,jquery 中有 $(document).ready(function)

1七、”==”和“===”的不一样

前者会自动转换类型
后者不会
1==”1”
null==undefined
===先判断左右两边的数据类型,若是数据类型不一致,直接返回 false
以后才会进行两边值的判断

1八、JavaScript的同源策略

详细解答请点击连接进入个人另外一篇博客查看(JavaScript的同源策略详解)

1九、编写一个数组去重的方法

<!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
2一、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
2二、已知 ID 的 Input 输入框,但愿获取这个输入框的输入值,怎么作?(不使 用第三方框架)

document.getElementById(“ID”).value
1
2三、但愿获取到页面中全部的 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
2四、设置一个已知 ID 的 DIV 的 html 内容为 xxxx,字体颜色设置为黑色(不使用 第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”
1
2
3
2五、当一个 DOM 节点被点击时候,咱们但愿可以执行一个函数,应该怎么作?

直接在 DOM 里绑定事件:<div onclick=”test()”></div>

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

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

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

“事件冒泡”:事件开始由最具体的元素接受,而后逐级向上传播
“事件捕捉”:事件由最不具体的节点先接收,而后逐级向下,一直到最具体的
“DOM 事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

2六、看下列代码输出为什么?解释缘由。

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 会在如下三种状况下产生:

一、 一个变量定义了却没有被赋值
二、 想要获取一个对象上不存在的属性或者方法:
三、 一个数组中没有被赋值的元素
注意区分 undefined 跟 not defnied(语法错误)是不同的

2七、看下列代码,输出什么?解释缘由。

var a = null;
alert(typeof a); //object
1
2
解释:null 是一个只有一个值的数据类型,这个值就是 null。表示一个空指针对象,因此
用 typeof 检测会返回”object”。

2八、看下列代码,输出什么?解释缘由。

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。

2九、看代码给答案。

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
3一、已知有字符串 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)

3二、输出今天的日期,以 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
3三、使用正则表达式替换字符串

将字符串”<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
3四、为了保证页面输出安全,咱们常常须要对一些特殊的字符进行转义,请写 一个函数 escapeHtml,将<, >, &, \进行转义

function escapeHtml(str) {
//[<>”&]:中括号中字符只要其中的一个出现就表明知足条件
//给 replace 第二个参数传递一个回调函数,回调函数中参数就是匹配结果,若是匹配不到就是null
return str.replace(/[<>"&]/g, function(match) {
switch (match) {
case "<":
return "&lt;";
case ">":
return "&gt;";
case "&":
return "&amp;";
case '\"':
return "&quot;";
}
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
3五、foo=foo||bar ,这行代码是什么意思?为何要这样写?

这种写法称之为短路表达式

意思为:if(!foo) foo = bar; //若是 foo 存在,值不变,不然把 bar 的值赋给 foo。

短路表达式:做为”&&”和”||”操做符的操做数表达式,这些表达式在进行求值时,只要
最终的结果已经能够肯定是真或假,求值过程便了结止,这称之为短路求值。

注意 if 条件的真假断定,记住如下是 false 的状况:
空字符串、false、undefined、null、0

3六、看下列代码,将会输出什么?(变量声明提高)

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 引擎隐式地提高到当前做用域的顶部,可是只提高名
称不会提高赋值部分。

3七、用 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
3八、把两个数组合并,并删除第二个元素。

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
3九、怎样添加、移除、移动、复制、建立和查找节点

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

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

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

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

a: 1
b: 2
c:
d: xxx
e: undefined
4一、正则表达式构造函数 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

4二、写一个 function,清除字符串先后的空格。(兼容全部浏览器)

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--写一个 function,清除字符串先后的空格。(兼容全部浏览器)-->
<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
4三、Javascript 中 callee 和 caller 的做用?

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

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

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

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

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

A、 var _变量=NaN;
B、var 0bj = [];
C、var obj = //;
D、var obj = {};
1
2
3
4
4五、如下两个变量 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
4六、var a=10; b=20; c=4; ++b+c+a++ 如下哪一个结果是正确的?答案( B )

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


4七、下面的 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
4八、要将页面的状态栏中显示“已经选中该文本框”,下列 JavaScript 语句正确的是( A )

A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
1
2
3
4
4九、如下哪条语句会产生运行错误:(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
5一、请选择结果为真的表达式:(C)

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

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

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

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

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

 

5七、写出程序运行结果

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


5八、阅读如下代码,请分析出结果:

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()方法颠倒数组中元素的位置,并返回该数组的引用。

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

<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
6一、完成 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
6二、完成函数 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
6三、截取字符串 abcdefg 的 efg

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

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

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

Document.getElementById 根据元素 id 查找元素
Document.getElementByName 根据元素 name 查找元素
Document.getElementTagName 根据指定的元素名查找元素
1
2
3
6六、但愿获取到页面中全部的 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">&gt;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
6七、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
7一、Javascript 如何实现继承?(《JavaScript高级程序设计》)

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

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

7二、Javascript 建立对象的几种方式?

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

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

若是说放在 body 的封闭以前,将会阻塞其余资源的加载
若是放在 body 封闭以后,不会影响 body 内元素的加载。

7四、iframe 的优缺点?

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

7五、请你谈谈 Cookie 的弊端?

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

2.安全性问题。若是 cookie 被人拦截了,那人就能够取得全部的 session 信息。即便加密
也于事无补,由于拦截者并不须要知道 cookie 的意义,他只要原样转发 cookie 就能够达到
目的了。

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

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

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

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

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

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

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

三、二者均可动态包含外部资源如JavaScript文件
经过document.write插入<script>元素会自动执行其中的脚本;
大多数浏览器中,经过innerHTML插入<script>元素并不会执行其中的脚本。

7九、哪些操做会形成内存泄漏?

内存泄漏指任何对象在你再也不拥有或须要它以后仍然存在。

垃圾回收器按期扫描对象,并计算引用了每一个对象的其余对象的数量。若是一个对象的引用
数量为 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
8一、解释 jsonp 的原理,以及为何不是真正的 ajax

动态建立 script 标签,回调函数
Ajax 是页面无刷新请求数据操做

8二、字符串反转,如将 ‘12345678’ 变成 ‘87654321’

//大牛作法;
//思路:先将字符串转换为数组 split(),利用数组的反序函数 reverse()颠倒数组,再利用 join()
为字符串

var str = '12345678';
str = str.split('').reverse().join('');
1
2
8三、将数字 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
8四、生成 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
8五、阶乘函数;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
8六、window.location.search 返回的是什么

 

8七、阻止冒泡函数

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

阻止冒泡函数

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

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

<!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) {
/*1、先在最里层添加进阻止事件冒泡函数,再查看效果
*发现点击中间层的时候仍是会冒泡到最外层
* 而后再中间层加入阻止函数,再查看效果
*/
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
8八、看题作答:

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 。

8九、下面输出多少?

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高级程序设计一书》)

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

(补充:内部环境能够经过做用域链访问全部的外部环境中的变量对象,但外部环境没法访问内部环境。每一个环境均可以向上搜索做用域链,以查询变量和函数名,反之向下则不能。)

9一、输出多少?

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。

9二、JS 的继承性

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

sayColor(); //red
sayColor.call(this); //red this 指向的是 window 对象
sayColor.call(window); //red
sayColor.call(o); //blue
1
2
3
4
9三、精度问题: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
9四、、加减运算

alert('5'+3); //53 string
alert('5'+'3'); //53 string
alert('5'-3); //2 number
alert('5'-'3'); //2 number
1
2
3
4
9五、为何不能定义 1px 左右的 div 容器?

IE6 下这个问题是由于默认的行高形成的,解决的方法也有不少,例如:

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

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

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

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
9七、计算字符串字节数:

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
9八、匹配输入的字符:第一个必须是字母或下划线开头,后面就是字母和数字 或者下划线构成,长度 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
9九、如何在 HTML 中添加事件,几种方法?

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

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

一、window 对象 ,是 JS 的最顶层对象,其余的 BOM 对象都是 window 对象的
属性;
二、document 对象,文档对象;
三、location 对象,浏览器当前 URL 信息;
四、navigator 对象,浏览器自己信息;
五、screen 对象,客户端屏幕信息;
六、history 对象,浏览器访问历史信息

10一、请用代码实现 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
10二、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
10三、bind(), live(), delegate()的区别

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

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

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

10四、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 不支持

10六、、已知有字符串 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
10七、你如何优化本身的代码?

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

$div:表明一个jquery对象

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

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

变量必定要语义化

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

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

//0、减小http请求:

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

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

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

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

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

10九、、简述 readyonly 与 disabled 的区别

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

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

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

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

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

1十一、请尽量详尽的解释 ajax 的工做原理

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

简单来讲经过 XmlHttpRequest 对象来向服务器发送异步请求,从服务器得到数据, 而后用javascript来操做DOM而更新页面。

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

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

1十二、为何扩展 javascript 内置对象不是好的作法?

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

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

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

怪异模式则是使用浏览器本身的方式解析执行代码,由于不一样浏览器解析执行的方式不一 样,因此咱们称之为怪异模式。

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

11四、若是设计中使用了非标准的字体,你该如何去实现?

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

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

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

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

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

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

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

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

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

404:请求失败,请求所但愿获得的资源未被在服务器上发现。

500:服务器遇到了一个不曾预料的情况,致使了它没法完成对请求的处理。通常来讲,这 个问题都会在服务器端的源代码出现错误时出现。

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

 

11八、请列举 js 数组类型中的经常使用方法
————————————————

 

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

方法一、

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

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'
如何理解闭包?

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

二、表现形式:使函数外部可以调用函数内部定义的变量。

三、实例以下:

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

复制代码
var count=10; //全局做用域 标记为flag1
function add(){
var count=0; //函数全局做用域 标记为flag2
return function(){
count+=1; //函数的内部做用域
alert(count);
}
}
var s = add()
s();//输出1
s();//输出2
复制代码
四、变量的做用域

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

变量的做用域分类:全局变量和局部变量。

特色:

一、函数内部能够读取函数外部的全局变量;在函数外部没法读取函数内的局部变量。

二、函数内部声明变量的时候,必定要使用var命令。若是不用的话,你实际上声明了一个全局变量!

五、使用闭包的注意点

1)滥用闭包,会形成内存泄漏:因为闭包会使得函数中的变量都被保存在内存中,内存消耗很大,因此不能滥用闭包,不然会形成网页的性能问题,在IE中可能致使内存泄露。解决方法是,在退出函数以前,将不使用的局部变量所有删除。

2)会改变父函数内部变量的值。因此,若是你把父函数看成对象(object)使用,把闭包看成它的公用方法(Public Method),把内部变量看成它的私有属性(private value),这时必定要当心,不要随便改变父函数内部变量的值。

 

什么是跨域?跨域请求资源的方法有哪些?

一、什么是跨域?

因为浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不一样即为跨域。存在跨域的状况:

网络协议不一样,如http协议访问https协议。

端口不一样,如80端口访问8080端口。

域名不一样,如qianduanblog.com访问baidu.com。

子域名不一样,如abc.qianduanblog.com访问def.qianduanblog.com。

域名和域名对应ip,如www.a.com访问20.205.28.90.

二、跨域请求资源的方法:

(1)、porxy代理

定义和用法:proxy代理用于将请求发送给后台服务器,经过服务器来发送请求,而后将请求的结果传递给前端。

实现方法:经过nginx代理;

注意点:一、若是你代理的是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>
复制代码
缺点:

  一、这种方式没法发送post请求(这里)

  二、另外要肯定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时时间来断定。

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

回收机制方式

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

二、原理:垃圾收集器会按期(周期性)找出那些不在继续使用的变量,而后释放其内存。可是这个过程不是实时的,由于其开销比较大,因此垃圾回收器会按照固定的时间间隔周期性的执行。

三、实例以下:

复制代码
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所指向,因此该块内存并不会被释放。

四、垃圾回收策略:标记清除(较为经常使用)和引用计数。

标记清除:

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

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

引用计数:

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

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

内存管理

一、何时触发垃圾回收?

垃圾回收器周期性运行,若是分配的内存很是多,那么回收工做也会很艰巨,肯定垃圾回收时间间隔就变成了一个值得思考的问题。

IE6的垃圾回收是根据内存分配量运行的,当环境中的变量,对象,字符串达到必定数量时触发垃圾回收。垃圾回收器一直处于工做状态,严重影响浏览器性能。

IE7中,垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整,开始回收工做。

二、合理的GC方案:(1)、遍历全部可访问的对象; (2)、回收已不可访问的对象。

三、GC缺陷:(1)、中止响应其余操做;

四、GC优化策略:(1)、分代回收(Generation GC);(2)、增量GC

开发过程当中遇到的内存泄露状况,如何解决的?

一、定义和用法:

内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存,几乎不会发生内存泄露。咱们知道,浏览器中也是采用自动垃圾回收方法管理内存,但因为浏览器垃圾回收方法有bug,会产生内存泄露。

二、内存泄露的几种状况:

(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(){
document.getElementById("myDiv").innerHTML = "Processing...";
}
</script>
复制代码
解决方法以下:

复制代码
<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. 对象冒充

继承的方法以下:

一、prototype原型链方式:


二、call()/apply()方法

三、混合方法【prototype,call/apply】

四、对象冒充

javascript相关程序计算题

一、判断一个字符串中出现次数最多的字符,统计这个次数

复制代码
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)对象

一、Array相关的属性和方法

这里只是作了相关的列举,具体的使用方法,请参考网址。

Array 对象属性

constructor 返回对建立此对象的数组函数的引用。


length 设置或返回数组中元素的数目。

prototype 使您有能力向对象添加属性和方法。

Array 对象方法

concat() 链接两个或更多的数组,并返回结果。


join() 把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔。


pop() 删除并返回数组的最后一个元素。


shift() 删除并返回数组的第一个元素


push() 向数组的末尾添加一个或更多元素,并返回新的长度。


unshift() 向数组的开头添加一个或更多元素,并返回新的长度。


reverse() 颠倒数组中元素的顺序。


slice() 从某个已有的数组返回选定的元素


sort() 对数组的元素进行排序


splice() 删除元素,并向数组添加新元素。


toSource() 返回该对象的源代码。


toString() 把数组转换为字符串,并返回结果。


toLocaleString() 把数组转换为本地数组,并返回结果。


valueOf() 返回数组对象的原始值


二、编写一个方法 去掉一个数组的重复元素

方法一:

复制代码
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]

三、求数组的最值?

方法一:

求数组最大值: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
复制代码
四、数组排序相关

结合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];

function bubbleSort(arr) {
var len = arr.length;
for (var i = len; i >= 2; --i) {
for (var j = 0; j < i - 1; j++) {
if (arr[j + 1] < arr[j]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}

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]
复制代码
五、数组的翻转(非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相关
一、 jQuery 库中的 $() 是什么?

  $() 函数是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象,接着你就被容许调用定义在 jQuery 对象上的多个不一样方法。你能够将一个选择器字符串传入 $() 函数,它会返回一个包含全部匹配的 DOM 元素数组的 jQuery 对象。

二、如何找到全部 HTML select 标签的选中项?

$('[name=selectname] :selected')
三、$(this) 和 this 关键字在 jQuery 中有何不一样?

$(this) 返回一个 jQuery 对象,你能够对它调用多个 jQuery 方法,好比用 text() 获取文本,用val() 获取值等等。

而 this 表明当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)。

四、jquery怎么移除标签onclick属性?

得到a标签的onclick属性: $("a").attr("onclick")

删除onclick属性:$("a").removeAttr("onclick");

设置onclick属性:$("a").attr("onclick","test();");

五、jquery中addClass,removeClass,toggleClass的使用。

$(selector).addClass(class):为每一个匹配的元素添加指定的类名

$(selector).removeClass(class):从全部匹配的元素中删除所有或者指定的类,删除class中某个值;

$(selector).toggleClass(class):若是存在(不存在)就删除(添加)一个类

$(selector).removeAttr(class);删除class这个属性;

六、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

七、jQuery中的Delegate()函数有什么做用?

delegate()会在如下两个状况下使用到:

一、若是你有一个父元素,须要给其下的子元素添加事件,这时你能够使用delegate()了,代码以下:

$("ul").delegate("li", "click", function(){ $(this).hide(); });
二、当元素在当前页面中不可用时,能够使用delegate()

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

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

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

九、如何用jQuery禁用浏览器的前进后退按钮?

实现代码以下:

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
    window.history.forward(1);
    //OR window.history.forward(-1);
  });
</script>
十、 jquery中$.get()提交和$.post()提交有区别吗?

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

异同点:

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

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

三、数据传输大小不一样:get方式传输的数据大小不能超过2KB 而POST要大的多

四、安全问题: GET 方式请求的数据会被浏览器缓存起来,所以有安全问题。

十一、写出一个简单的$.ajax()的请求方式?

复制代码
$.ajax({
url:'http://www.baidu.com',
type:'POST',
data:data,
cache:true,
headers:{},
beforeSend:function(){},
success:function(){},
error:function(){},
complete:function(){}
});
复制代码

 

十二、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()

回到顶部
HTML & CSS:
一、什么是盒子模型?

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分能够显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一块儿构成了css中元素的盒模型。

二、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

三、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;
}
复制代码
效果以下:

 

四、简述一下src与href的区别

href 是指向网络资源所在位置,创建和当前元素(锚点)或当前文档(连接)之间的连接,用于超连接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

当浏览器解析到该元素时,会暂停其余资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,相似于将所指向资源嵌入当前标签内。这也是为何将js脚本放在底部而不是头部。

五、简述同步和异步的区别

同步是阻塞模式,异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候,若该请求须要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
异步是指进程不须要一直等下去,而是继续执行下面的操做,无论其余进程的状态。当有消息返回时系统会通知进程进行处理,这样能够提升执行的效率。

六、px和em的区别

相同点:px和em都是长度单位;

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

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

IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:之前是presto内核,Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit,Google与Opera Software共同开发)

八、什么叫优雅降级和渐进加强?

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

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

区别:

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

b. 渐进加强则是从一个很是基础的,可以起做用的版本开始,并不断扩充,以适应将来环境的须要

c. 降级(功能衰减)意味着往回看;而渐进加强则意味着朝前看,同时保证其根基处于安全地带

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

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

不一样点:

(1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,形成必定的宽带浪费;

web storage,会将数据保存到本地,不会形成宽带浪费;

(2)、数据存储大小不一样:Cookie数据不能超过4K,适用于会话标识;web storage数据存储能够达到5M;

(3)、数据存储的有效期限不一样:cookie只在设置了Cookid过时时间以前一直有效,即便关闭窗口或者浏览器;

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

(4)、做用域不一样:cookie和localStorage是在同源同学口中都是共享的;sessionStorage不在不一样的浏览器窗口中共享,即便是同一个页面;

十、Web Storage与Cookie相比存在的优点:

(1)、存储空间更大:IE8下每一个独立的存储空间为10M,其余浏览器实现略有不一样,但都比Cookie要大不少。

(2)、存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

(3)、更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,如setItem,getItem,removeItem,clear等,使得数据操做更为简便。cookie须要本身封装。

(4)、独立的存储空间:每一个域(包括子域)有独立的存储空间,各个存储空间是彻底独立的,所以不会形成数据混乱。

十一、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(缓存)执行回调函数

十二、请指出document load和document ready的区别?

共同点:这两种事件都表明的是页面文档加载时触发。

异同点:

ready 事件的触发,表示文档结构已经加载完成(不包含图片等非文字媒体文件)。

onload 事件的触发,表示页面包含图片等文件在内的全部元素都加载完成。

 

 

回到顶部
正则表达式
一、写一个function,清除字符串先后的空格。(兼容全部浏览器)

function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除先后空白符
}
}
二、使用正则表达式验证邮箱格式

var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "example@qq.com";
console.log(reg.test(email)); // true
回到顶部
开发及性能优化
一、规避javascript多人开发函数重名问题

命名空间
封闭空间
js模块化mvc(数据层、表现层、控制层)
seajs
变量转换成对象的属性
对象化
二、请说出三种减低页面加载时间的方法

压缩css、js文件
合并js、css文件,减小http请求
外部js、css文件放在最底下
减小dom操做,尽量用变量替代没必要要的dom操做
三、你所了解到的Web攻击技术

(1)XSS(Cross-Site Scripting,跨站脚本攻击):指经过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
(2)SQL注入攻击
(3)CSRF(Cross-Site Request Forgeries,跨站点请求伪造):指攻击者经过设置好的陷阱,强制对已完成的认证用户进行非预期的我的信息或设定信息等某些状态更新。

四、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 技巧对图片优化

五、前端开发中,如何优化图像?图像格式的区别?

优化图像:

一、不用图片,尽可能用css3代替。 好比说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中均可以用CSS达成。

二、 使用矢量图SVG替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。如今主流浏览器都支持SVG了,因此可放心使用!

3.、使用恰当的图片格式。咱们常见的图片格式有JPEG、GIF、PNG。

基本上,内容图片多为照片之类的,适用于JPEG。

而修饰图片一般更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用SVG动画取代。

四、按照HTTP协议设置合理的缓存。

五、使用字体图标webfont、CSS Sprites等。

六、用CSS或JavaScript实现预加载。

七、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩,动态、静态图片,压缩比率优于GIF、JPEG、JPEG2000、PG等格式,很是适合用于网络等图片传输。

图像格式的区别:

矢量图:图标字体,如 font-awesome;svg

位图:gif,jpg(jpeg),png

区别:

  一、gif:是是一种无损,8位图片格式。具备支持动画,索引透明,压缩等特性。适用于作色彩简单(色调少)的图片,如logo,各类小图标icons等。

  二、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于容许轻微失真的色彩丰富的照片,不适合作色彩简单(色调少)的图片,如logo,各类小图标icons等。

  三、png:PNG能够细分为三种格式:PNG8,PNG24,PNG32。后面的数字表明这种PNG格式最多能够索引和存储的颜色值。

关于透明:PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增长了8位(256阶)的alpha通道透明;

优缺点:

  一、能在保证最不失真的状况下尽量压缩图像文件的大小。

  二、对于须要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。

六、浏览器是如何渲染页面的?

渲染的流程以下:

1.解析HTML文件,建立DOM树。

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

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

3.将CSS与DOM合并,构建渲染树(Render Tree)

4.布局和绘制,重绘(repaint)和重排(reflow)


雪碧图

css雪碧图(sprite)是一种网页图片应用处理方式,它容许将一个页面涉及到的全部零星图片都包含到一张大图中。使用雪碧图的处理方式能够实现两个优势:

一、减小Http请求数量(由于浏览器同一时间可以加载的资源数是必定的,IE 8是6个,Chrome是6个,Firefox是8),提升加载性能 二、有些状况下能够减小图片的大小(字节总和)

缺点:
一、高清屏会失真
二、雪碧图不方便变化,提升了网页开发和维护成本

字体图标

字体图标就是利用字体来显示网页中的的纯色图标,或者是特殊字体

原理:

计算机里面每一个字符都有一个unicode编码,好比「我」的unicode是\u6211(16进制),而字体文件的做用是规定某个字符应该用什么形状来显示,利用@font-face原理载入图标字体库,而后调用图标

优势:

一、灵活性:能够任意地缩放,改变颜色,产生阴影,透明效果,能够快速转化形态(:hover)
二、轻量性:自己体积更小,但携带的信息并无削减。一旦图标字体加载了,图标就会立刻渲染出来,不须要下载一个图像。能够减小HTTP请求,还能够配合HTML5离线存储作性能优化。
三、兼容性:网页字体支持全部现代浏览器,包括IE低版本。

缺点:

一、图标字体只能被渲染成单色或者CSS3的渐变色,因为此限制使得它不能普遍使用。 二、制做用于生成icon font的svg比较麻烦

base64

Base64是网络上最多见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息

优势:

一、减小了HTTP请求 二、某些文件能够避免跨域的问题 三、没有图片更新要从新上传,还要清理缓存的问题

缺点:

一、用于小图,体积约为原图的4/3 二、兼容性:IE6/IE7浏览器是不支持

伪类与伪元素

一、二者都不存在于HTML文档树中,伪类与伪元素都是用于向选择器加特殊效果
二、伪类与伪元素的本质区别就是是否抽象创造了新元素
三、伪类只要不是互斥能够叠加使用
四、伪元素在一个选择器中只能出现一次,而且只能出如今末尾
五、伪类与伪元素优先级分别与类、标签优先级相同
六、伪类单冒号,伪元素双冒号

效果属性(box-shadow、border-radius、background、clip-path)

box-shadow
一、营造层次感(立体感)
二、充当没有宽度的边框
三、 特殊效果

background
一、纹理/图案
二、渐变
三、 雪碧图动画
四、背景图尺寸适应

clip-path
一、对容器进行裁剪
二、常见几何图形
三、自定义路径

Canvas和svg

Canvas
一、Canvas是基于位图的,它不可以改变大小,只能缩放显示,放大或缩小时图形质量会有所损失
二、 依赖分辨率,逐像素进行渲染的
三、 Canvas 经过 Javascript 来绘制2D图形(动态生成)
四、 不支持事件处理器。Canvas输出的是一整幅画布,可以以 .png 或 .jpg 格式保存结果图像
五、 适合像素处理,动态渲染和大数据量绘制,最适合图像密集型的游戏(频繁重绘对象)
六、 若是图形位置发生变化,整个场景须要从新绘制,包括任何或许已被图形覆盖的对象

svg
一、SVG 可缩放矢量图形(Scalable Vector Graphics),是一种使用可扩展标记语言(XML)描述2D图形的语言
二、不依赖分辨率,逐元素(DOM元素)进行渲染,可以很好的处理图形大小的改变, 放大或缩小时图形质量不会有所损失
三、 基于XML,用文本格式的描述性语言来描述图像内容
四、 支持事件处理器。SVG绘制出的每一个图形元素都是独立的DOM节点,可以方便的绑定事件
五、 适合静态图片展现,高保真文档查看和打印的应用场景,不适合游戏应用)
六、 若是对象属性发生变化,浏览器能自动重现图形。也就是说,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动画

动画类型


一、transition补间动画 二、keyframe关键帧动画 三、animation逐帧动画
补间动画


一、位置-平移(left/right/margin/transform) 二、方位-旋转(transform) 三、大小-缩放(transform) 四、透明度(opacity) 五、其余线性变换(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原型和原型链的理解。

1、对象等级划分

  咱们认为在javascript任何值或变量都是对象,可是我还须要将javascript中的对象分为一下几个等级。

  首先Object是顶级公民,这个应该毋庸置疑,由于全部的对象都是间接或直接的经过它衍生的。Function是一等公民,下面会作解释。几个像String,Array,Date,Number,Boolean,Math等内建对象是二等公民。剩下的则都是低级公民。

  2、原型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。

  3、__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则是原型链的组成。最后附上一张稍微复杂的原型链和构造函数的关系图,有兴趣能够研究一下。