HTML
HTML5标签
媒体查询head部分写法
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
-
<!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器以何种模式来渲染文档。 - 严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
- 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
- DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
你知道多少种Doctype文档类型？
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
- HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
- XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
- Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
HTML与XHTML，二者有什么区别
区别：
- 所有的标记都必须要有一个相应的结束标记
- 所有标签的元素和属性的名字都必须使用小写
- 所有的XML标记都必须合理嵌套
- 所有的属性必须用引号""括起来
- 把所有<和&特殊符号用编码表示
- 给所有属性赋一个值
- 不要在注释内容中使“--”
- 图片必须有说明文字
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
- HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
- 新特性：
- 拖拽释放(Drag and drop) API
- 语义化更好的内容标签（header,nav,footer,aside,article,section）
- 音频、视频API(audio,video)
- 画布(Canvas) API
- 地理(Geolocation) API
- 本地离线存储
- localStorage 长期存储数据，浏览器关闭后数据不丢失；
- sessionStorage 的数据在浏览器关闭后自动删除
- 表单控件，calendar、date、time、email、url、search
- 新的技术webworker, websocket, 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]--> - IE8/IE7/IE6支持通过document.createElement方法产生的标签，
iframe的优缺点？
-
<iframe>优点：- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- Security sandbox
- 并行加载脚本
-
<iframe>的缺点：- iframe会阻塞主页面的Onload事件；
- 即使内容为空，加载也需要时间
- 没有语意
如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
CSS
css垂直居中方法
自适应布局
关于左右自适应的,不低于10种解决方案,还要看dom结构要求是并列还是嵌套,是否允许有父级元素,是否允许使用CSS3, 是否有背景色,是否要两列等高,等等
而关于自适应高度的解决方案就略少一些,大致也是靠,CSS3的calc属性,内padding,绝对定位后拉伸,动态js计算等等解决 方案,同样也是要看应用场景能用哪个
移动端自适应
- rem方法
<script>
document.getElementsByTagName('html')[0].style.fontSize =
window.innerWidth/320 * 100 + 'px';
</script>
Position属性
- position有五个属性： static | relative | absolute | fixed | inherit
- static 和 inherit : 没什么值得介绍的。
- relative : 相对于元素自身的定位。
- absolute ：相对于包含块的定位。
- fixed : 相对于窗口的定位。
- 包含块就是 top | right | bottom | left 参考的元素
- absolute的包含块指的是：最近的position属性值不为static的祖先元素
- relative的包含块指的是：元素自身
- top | right | bottom | left值指的是“定位父元素”border内边到该元素margin外边的距离，“border内,margin外”。
- postion 与文档流
- postion : absolute | relative | fixed ： 元素脱离文档流
- relative : 原本所占的空间仍然占据文档流
- absolute和fixed�会将元素重置为区块元素，relative保持原来类型。
- absolute和fixed�不能在设置float，relative可以。
CSS盒模型
- 标准盒模型宽高只计算content
- IE盒模型宽高是border、padding和content的和
- 如果在页面开头写了
<!doctype...所有浏览器都将使用标准盒模型,如果没有写,那么 在IE下就将会使用IE盒模型解析盒子,即IE的怪异模式。 - CSS3 box-sizing
- box-sizing: content-box|border-box|inherit;
- content-box: 标准盒模型
- border-box: IE盒模型
- inherit: 从父元素继承box-sizing的值
隐藏元素的几种方法
- display:none
元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，会导致浏览器的重排和重绘。
不会触发其点击事件。 - visibility:hidden
隐藏对应的元素，但是在文档布局中仍保留原来的空间。只会导致浏览器重绘而不会重排。不会触发点击事件。 - opacity:0
元素隐藏后依旧占据着空间，元素只是隐身了，它依旧存在页面中。可以触发点击事件。 - 设置height，width等盒模型属性为0
不常用，但是可以用来制作页面效果，如jquery的slideUp。事件触发开padding、border大小。 - 设置元素的position与left，top，bottom，right等，将元素移出至屏幕外
- 设置元素的position与z-index，将z-index设置成尽量小的负数
能否相应事件看的是鼠标是否能接触到
对动画的影响：
- display:none：完全不受transition属性的影响，元素立即消失。
- visibility：hidden：元素消失的时间跟transition属性设置的时间一样，但是没有动画效果。
- opacity和height等属性能够进行正常的动画效果。
CSS中 link 和@import 的区别是？
- link属于HTML标签，而@import是CSS提供的;
- 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
- import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
- link方式的样式的权重 高于@import的权重.
position:absolute和float属性的异同
- 共同点：
对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。 - 不同点：
float仍会占据位置，position会覆盖文档流中的其他元素。
CSS 选择符有哪些？
- id选择器（ # myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = "external"]）
- 伪类选择器（a: hover, li:nth-child）
CSS样式继承
- 可继承的样式：
- font-size
- font-family
- color
- text-indent
- 不可继承的样式：
- border
- padding
- margin
- width
- height
CSS优先级
!important > 内联 > id > class > tag
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 单选框或复选框被选中。
CSS3有哪些新特性
- CSS3实现圆角（border-radius），阴影（box-shadow）
- 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
- transform:
- rotate(9deg) 旋转
- scale(0.85,0.90) 缩放
- translate(0px,-30px) 定位
- skew(-9deg,0deg) 倾斜
- 增加了更多的CSS选择器 多背景 rgba
- 在CSS3中唯一引入的伪元素是::selection.
- 媒体查询，多栏布局
- border-image
对BFC规范的理解？
BFC，块级格式化上下文（Block Fromatting Context）。
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells,
和 table-captions），以及overflow值不为“visiable”的块级盒子，
都会为他们的内容创建新的BFC（块级格式上下文）。
一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。
在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，
以及与其他元素的关系和相互作用。）
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
BFC可以做什么呢？
- 利用BFC避免外边距折叠
- BFC包含浮动
- 使用BFC避免文字环绕
- 在多列布局中使用BFC
margin折叠
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
产生折叠的必备条件：margin必须是邻接的!
解释下浮动和它的工作原理？清除浮动的技巧
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
- 使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义cssclear:both. 弊端就是增加了无意义标签。 - 使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 - 使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。.clear-fix:after{ content: "."; height: 0; visibility: hidden; clear: both; display: block; } - 浮动外部元素
浮动元素引起的问题和解决办法？
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素（内联元素）会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
JavaScript
JavaScript中的七种原始类型
- Undefined
- Null
- Boolean
- Number
- String
- Object
- Symbols(ES6)
创建函数的几种方式
- 声明函数
function fn1(){}
- 创建匿名函数表达式
var fn1=function (){}
// 注意采用这种方法创建的函数为匿名函数,即没有函数name
getFunctionName(fn1).length;//0
- 创建具名函数表达式
var fn1=function xxcanghai(){};
// 具名函数表达式的函数名只能在创建函数内部使用
- Function构造函数
Function("console.log('test')")
// 这种方法创建的是匿名函数
- 自执行函数
(function(){
alert(1);
})();
(function fn1(){
alert(1);
})();
- 其他创建函数的方法
eval , setTimeout , setInterval 等非常用方法
函数作用域链
测试1,对象内部的函数表达式:
var o={
fn:function (){
console.log(fn);
}
};
o.fn();// ERROR报错
测试2,非对象内部的函数表达式:
var fn = function() {
console.log(fn);
};
fn();// 正确
var fnn = function() {
console.log(fnn);
};
fnn();// 正确
兼容IE的获取函数name方法
/**
* 获取指定函数的函数名称(用于兼容IE)
* @param {Function} fun 任意函数
*/
function getFunctionName(fun) {
if (fun.name !== undefined) {
return fun.name;
}
var ret = fun.toString();
ret = ret.substr('function '.length);
ret = ret.substr(0, ret.indexOf('('));
return ret;
}
闭包的原理及应用
使用闭包主要是为了设计私有的方法和变量。
闭包的优点是可以避免全局变量的污染,
缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。
闭包有三个特性:
- 函数嵌套函数
- 函数内部可以引用外部的参数和变量
- 参数和变量不会被垃圾回收机制回收
题目一
function fun(n,o) {
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?
问:三行a,b,c的输出 分别是什么?
答案:
a: undefined,0,0,0
b: undefined,0,1,2
c: undefined,0,1,1
什么情况下会发生闭包,为什么需要闭包,什么场景下需要,闭包闭了谁,怎么释放被闭包的变量内存,闭包的优点是什么,缺点是什么等等。
手写bind函数
首先会要求解释下这个函数的作用,以及在什么场景下需要用到它,最后手写一个Function.bind函数。 只要掌握核心几点就没问题:
- Function.bind返回的也是一个函数,所以注定发生了闭包,
- 在返回的这个函数中去调用一个其他的函数,这其实本质上就是函数钩子(HOOK)
关于在JS里的函数钩子,我认为只需要维护以下三点即可:
- 保持函数的this指向
- 保持函数的所有参数都传递到目标函数
- 保持函数的返回值
有了以上这几点,这个函数就非常好写了,下面是MSDN上的标准Polyfill:
if(!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if(typeof this !== "function") {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
thrownewTypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments,1),
fToBind = this,
fNOP = function(){},// 用于bind后的函数用于构造函数时
fBound = function() {
return fToBind.apply(this instanceof fNOP ?
this : oThis || this, aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
定义提升
- 题目一：
(function(a){
console.log(a);
var a = 10;
function a(){};
}(100));
- 题目二：
function Foo() {
getName = function() {
alert (1);
};
return this;
}
Foo.getName = function() {
alert (2);
};
Foo.prototype.getName = function() {
alert (3);
};
var getName = function () {
alert(4);
};
function getName() {
alert (5);
}
请写出以下输出结果:
Foo.getName();2
getName();5
Foo().getName();5
getName();
new Foo.getName();2
new Foo().getName();3
new new Foo().getName();3
答案：
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3
第二问：变量提升。
第三问：函数中没有使用var，因此修改了window对象。
第五问：.的优先级高于new的优先级，因此相当于new (Foo.getName)();
第六问：括号优先级高于new，(new Foo()).getName();
第七问：new ((new Foo()).getName)();
new过程：
- 创建一个空对象，其prototype是构造函数的prototype，将构造函数的this指向该对象
- 运行构造函数中的内容
- 返回相应值。
构造函数的返回值
- 没有返回值则按照其他语言一样返回实例化对象。
- 若有返回值则检查其返回值是否为引用类型。如果是非引用类型,如基本类型 (string,number,boolean,null,undefined)则与无返回值相同,实际返回其实例化对象。
- 若返回值是引用类型,则实际返回值为这个引用类型。
null和undefined的区别？
-
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。 - 当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
- undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
- 变量被声明了，但没有赋值时，就等于undefined。
- 调用函数时，应该提供的参数没有提供，该参数等于undefined。
- 对象没有赋值的属性，该属性的值为undefined。
- 函数没有返回值时，默认返回undefined。
- null表示"没有对象"，即该处不应该有值。典型用法是：
- 作为函数的参数，表示该函数的参数不是对象。
- 作为对象原型链的终点。
this
.call和.apply的区别
- apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。例如：
function.apply(this,[1,2,3])
- call()的第一个参数是上下文，后续是实例传入的参数序列，例如：
function.call(this,1,2,3);
哪些操作会造成内存泄漏？
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
DOM操作
手写事件模型
-
事件的三个阶段：捕获、目标、冒泡。（低版本IE不支持捕获阶段，IE<=8）
-
js中事件监听方法总共有三种：
- element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
- element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持
- element[’on’ + type] = function(){} // 所有浏览器
-
e的不同
�目标 IE 其他 �源 srcElement target 当前 this currentTarget
跨浏览器事件处理相关JS代码
var EventUtil = {
// 事件处理程序,3个参数：要操作的元素，事件名称，事件处理程序函数
addHandler: function(element, type, handler) {
if(element.addEventListener){
// DOM2级事件处理程序,false表示事件冒泡阶段调用事件处理程序
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
// IE事件处理程序，记得加“on”
element.attachEvent("on" + type, handler);
}else {
element["on"+type] = handler;
}
},
removeHandler: function(element, type, handler) {
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent("on"+ type, handler);
}else{
element["on"+type] = null;
}
},
// 获得event对象
getEvent: function(event) {
// 主要是为了IE中，当用DOM0级方法添加事件处理程序时，
// event对象是作为windows对象的一个属性存在
return event ? event : window.event;
},
// 获得事件的目标
getTarget: function(event) {
return event.target || event.srcElement;
}，
// 取消事件的默认行为
preventDefault: function(event) {
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = fasle;// IE
}
}
// 阻止事件冒泡,IE不支持事件捕获，所以只能取消事件冒泡
stopPropagation: function(event) {
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};
事件代理/委托
优点：
- 可以大量节省内存占用,减少事件注册
- 可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适
// 事件委托
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "1":
document.title = "I change the document's title";
break;
case "2":
location.href = "http://www.wrox.com";
break;
case "3":
alert('xxx');
break;
}
});
实现事件模型
即写一个类或是一个模块,有两个函数,一个bind一个trigger,
分别实现绑定事件和触发事件,核心需求就是可以对某一个事件名称绑定多个事件响应函数,
然后触发这个事件名称时,依次按 绑定顺序触发相应的响应函数。
大致实现思路就是创建一个类或是匿名函数,
在bind和trigger函数外层作用域创建一个字典对象,用于存储注册 的事件及响应函数列表,
bind时,如果字典没有则创建一个,key是事件名称,value是数组,里面放着当前注册的响应函数,
如果字段中有,那么就直接push到数组即可。trigger时调出来依次触发事件响应函数即可。
不过还有很多细节,比如触发响应函数时的上下文应该是什么,触发响应函数的参数列表应该是什么,
如果要求把调用trigger的参数列表都传到响应函数中还要考虑到吧arguments对象转化为纯数
组才行等等。
还有一些面试官会问到事件如何派发也就是事件广播(dispatchEvent)等等,这里不再展开。
JS原生AJAX实现
// XHR(XMLHttpRequest)1级方法
/*
* 新建XHR对象的函数
* 如果只想支持IE7及更高版本,可以只用原生的XHR实现
* 即var xhr = new XMLHttpRequest();
*/
function creatXHR() {
if(typeof XMLHttpRequest != "undefined"){
//原生XHR对象
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp"],
i,
len;
for(i=0, len=versions.length; i < len; i++){
ersions[i];
}
}
try{
new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i];
break;
}catch(ex){
// 处理错误
}
// MSXML库中的ActiveX对象
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object availabel.")
}
}
function submitData() {
var xhr = creatXHR();//新建XHR对象
xhr.onreadystatechange = function() {
if(xhr.readystate == 4){
// 前一条件代表接收到全部相应数据,而且可以在客户端使用了览器中缓存的版本
// 后一条件表示请求的资源没有修改,可以直接使用浏
if ((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){
alert(xhr.responseText);//处理接收到的响应
}else{
alert("Request was unsuccessful: " + xhr.status);//请求不成功
}
}
}
// get方法,名称和值都必须使用encodeURIComponent(),true代表异步发送请求
xhr.open("get", "example.txt?name1=value1&name2=value2", true);
xhr.send(null);
// post方法
xhr.open("post", "postexample.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//模仿表单提交
var form = document.getElementById("user-info");
xhr.send(serialize(form));
}
// XMLHttpRequest 2级方法
var xhr = creatXHR();
xhr.onload = function() {
if((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: " + xhr.status);//请求不成功
}
};
xhr.open("get", "altevents.php", true);
xnr.send(null);
怎样添加、移除、移动、复制、创建和查找节点。
- 创建新节点
- createDocumentFragment() //创建一个DOM片段
- createElement() //创建一个具体的元素
- createTextNode() //创建一个文本节点
- 添加、移除、替换、插入
- appendChild()
- removeChild()
- replaceChild()
- insertBefore() //在已有的子节点前插入一个新的子节点
- 查找
- getElementsByTagName() //通过标签名称
- getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
- getElementById() //通过元素Id，唯一性
- querySelector()
documen.write 和 innerHTML的区别
- document.write只能重绘整个页面
- innerHTML可以重绘页面的一部分
浏览器相关
跨域
正统的跨全域的解决方法大致也就三种:
- JSONP
- Access Control
- 服务器代理
其他
- document.domain+iframe
- window.name
- window.postMessage
JavaScript跨域总结与解决办法
跨域-知识
跨域资源共享的10种方式
详解js跨域问题
JSONP原理
只要你聊到跨域,就必须聊到JSONP,那么就必须要讲一下JSONP的实现原理,以及你在项目中那个需求使用了JSONP,这里 简单讲就是HTML里面所有带src属性的标签都可以跨域,如iframe,img,script等。
所以可以把需要跨域的请求改成用script脚本加载即可,服务器返回执行字符串,但是这个字符串是在window全局作用域下执行 的,你需要把他返回到你的代码的作用域内,这里就需要临时创建一个全局的回调函数,并把到传到后台,最后再整合实际要请 求的数组,返回给前端,让浏览器直接调用,用回调的形式回到你的原代码流程中。
基本讲到这也就没什么要再讲的了。
将url的查询参数解析成字典对象
使用正则：
function getQueryObject(url) {
url = url == null ? window.location.href : url;
var search = url.substring(url.lastIndexOf("?") + 1);
var obj = {};
var reg = /([^?&=]+)=([^?&=]*)/g;
search.replace(reg, function(rs,$1,$2){
var name = decodeURIComponent($1);
var val = decodeURIComponent($2);
val = String(val);
obj[name]=val;
return rs;
});
return obj;
}
输出任意格式的时间字符串
function formatDate(date, fmt) {
var o = {
"Y+": date.getFullYear(),
"M+": date.getMonth() + 1, // 月份
"d+": date.getDate(), // 日
"h+": date.getHours(), // 小时
"H+": date.getHours(), // 小时
"m+": date.getMinutes(), // 分
"s+": date.getSeconds(), // 秒
"q+": Math.floor((date.getMonth() + 3) / 3), // 季度
"S": date.getMilliseconds() // 毫秒
};
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1,
(RegExp.$1.length === 1 || RegExp.$1.length === 4) ?
(o[k]) : ("00" + o[k]).substr(-RegExp.$1.length));
}
}
return fmt;
}
time = formatDate(time, "YY-MM-dd hh:mm:ss");
函数节流
- 函数节流,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用
- 原理：使用定时器，当触发一个事件时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行。
- 实现一:
function throttle(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
}, 100);
}
- 实现二:
var throttle = function(fn, delay){
var timer = null;
return function(){
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
};
};
Cookie的优点和弊端
- 优点
- 通过良好的编程,控制保存在cookie中的session对象的大小。
- 通过加密和安全传输技术(SSL),减少cookie被破解的可能性。
- 只在cookie中存放不敏感数据,即使被盗也不会有重大损失。
- 控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
- 缺点
-
Cookie数量和长度的限制。
每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉。 - 安全性问题。
如果cookie被人拦截了,那人就可以取得所有的session信息。
即使加密也与事无补,因为拦截者并不需要知道cookie的意义,
他只要原样转发cookie就可以达到目的了。 - 有些状态不可能保存在客户端。
例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。
如果我们把这个计数器保存在客户端,那么它起不到任何作用。
-
浏览器本地存储
在较高版本的浏览器中，js提供了sessionStorage和globalStorage。
在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
- sessionStorage用于本地存储一个会话（session）中的数据，
这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 - localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
webstroage优点：
- Web Storage是为了更大容量存储设计的，Cookie的大小是受限的。
- 每次请求一个新的页面Cookie都会被发送过去，无形中浪费了带宽。
- cookie需要指定作用域，不可以跨域调用。
- Web Storage拥有setItem,getItem,removeItem,clear等方法，cookie需要前端开发者自己封装setCookie，getCookie。
cookie优点：
- cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，
而Web Storage仅仅是为了在本地“存储”数据而生
cookie 和session 的区别
- cookie数据存放在客户的浏览器上，session数据放在服务器上。
- cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗。
- session会在一定时间内保存在服务器上。当访问增多，会比较占用服务器的性能。
- 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
js延迟加载的方式有哪些？
- defer和async
- 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）
- 按需异步载入js
前端性能优化
尽量挑会的说，看yahoo的文章
- 网络性能优化,加快访问速度,浏览器并行加载数量,怎样实现原生JS异步载入,CDN加速的原理,
如何将不同静态资源发布到多个域名服务器 上,发布后这些静态字段的url路径改怎么批量改写,
用什么工具进行项目打包,css打包后的相对路径怎么转换为绝对路径,
用什么工具进行项目模块依赖管理,怎么进行cookie优化等等,
你如何对网站的文件和资源进行优化？
- 文件合并
- 文件最小化/文件压缩
- 使用 CDN 托管
- 缓存的使用（多个域名来提供缓存）
- 其他
请说出三种减少页面加载时间的方法。
- 优化图片
- 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
- 优化CSS（压缩合并css，如margin-top,margin-left...)
- 网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
- 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。） - 减少http请求（合并文件，合并图片）。
你都使用哪些工具来测试代码的性能？
Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo
什么是 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>元素就可以了。
算法
快速排序
数组去重
设计模式
观察者模式,职责链模式,工厂模式
计算机基础
线程与进程的区别
- 一个程序至少有一个进程,一个进程至少有一个线程.
- 线程的划分尺度小于进程，使得多线程程序的并发性高。
- 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
- 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
- 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。
其他
XML和JSON的区别？
- 数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。 - 数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。 - 数据描述方面。
JSON对数据的描述性比XML较差。 - 传输速度方面。
JSON的速度要远远快于XML。
常见兼容性问题？
- png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
- 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
- IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
- 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)#box{ float:left; width:10px; margin:0 0 0 100px;} - Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性
-webkit-text-size-adjust: none;解决.
如何判断当前脚本运行在浏览器还是node环境中？
判断Global和window对象，如果不为window，当前脚本没有运行在浏览器中
什么叫优雅降级和渐进增强？
- 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
网友评论