MXOXW

Life always finds a way.

前端面试题

| Comments

判断是否支持css属性

转自判断浏览器是否支持指定css属性和指定值

1
2
3
4
5
6
7
8
9
function isSupportCSS(name, value) {
    var element = document.createElement('div');
    if (name in element.style) {    
        element.style[name] = value;    
        return element.style[name] === value;
    } else {    
        return false;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
if ('textShadow' in document.documentElement.style) {
    alert(1);
} else {
    alert(0);
}

if ('MozTransform' in document.documentElement.style || 'WebkitTransform' in
    document.documentElement.style || 'OTransform' in document.documentElement.style || 'msTransform' in document.documentElement.style) {
    alert(1);
} else {
    alert(0);
}

动态插入ul>li*20到body最前

1
2
3
4
5
6
7
8
9
var ul = document.createElement('ul');
var tmp = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
    var li = document.createElement('li');
    li.innerHTML = 'i=' + i;
    tmp.appendChild(li);
}
ul.appendChild(tmp);
document.body.insertBefore(ul, document.body.firstChild);

统计数组中的重复字符串最多的数量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数
var arr = ["asdf", "dsf", "asdf", "wew"];
var obj = {};
for (var i = 0, l = arr.length; i < l; i++) {
    var key = arr[i];
    if (typeof obj[key] == 'undefined') {
        obj[key] = 1;
    } else {
        obj[key] ++;
    }
}
/*遍历这个hash table，获取value最大的key和value*/
var max = 0;
var max_key = "";
var key;
for (key in obj) {
    if (max < obj[key]) {
        max = obj[key];
        max_key = key;
    }
}
console.log("max:" + max + " max_key:" + max_key);

大数相加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function add(a,b){
    // 分别把两个字符串转换为数组并翻转
    a = a.split("").reverse();
    b = b.split("").reverse();
    // 其中较大的赋值给a 较小的给b
    if(a.length < b.length){
        a = [b,b = a][0];
    }
    //设置一个临时值  用来存放上一位相加的进位
    var temp = 0,sum;
    // 循环大数做相加
    for (var i = 0; i < a.length; i++) {
        sum = aer(a[i]) + (aer(b[i]) || 0 ) + temp;
        a[i] = sum % 10;
        if(sum > 9){
            temp = 1;
        }else{
            temp = 0;
        }
    };
    //如果最后保留进位 放到数组尾部
    temp === 1 && a.push(1)
    return a.reverse().join("")
}

事件绑定（兼容性）

1
2
3
4
5
6
7
8
9
10
11
function addEvent(obj,type,handle){
    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}

ajax

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
var xmlHttp;
function createxmlHttpRequest(){
    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }
}

function doGet(url){//注意在传参数值的时候最好使用encodeURI处理一下，防止乱码
    createxmlHttpRequest();
    xmlHttp.open("GET",url);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            alert('success');
        }else{
            alert('fail');
        }
    }
}

function doPost(url,data){//注意在传参数值的时候最好使用encodeURI处理一下，防止乱码
    createxmlHttpRequest();
    xmlHttp.open("POST",url);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttp.send(data);
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            alert('success');
        }else{
            alert('fail');
        }
    }
}

Public/Private Variables and Methods

  • private variables are declared with the ‘var’ keyword inside the object, and can only be accessed by private functions and privileged methods.
  • private functions are declared inline inside the object’s constructor (or alternatively may be defined via var functionName=function(){…}) and may only be called by privileged methods (including the object’s constructor).
  • privileged methods are declared with this.methodName=function(){…} and may invoked by code external to the object.
  • public properties are declared with this.variableName and may be read/written from outside the object.
  • public methods are defined by Classname.prototype.methodName = function(){…} and may be called from outside the object.
  • prototype properties are defined by Classname.prototype.propertyName = someValue
  • static properties are defined by Classname.propertyName = someValue

两栏布局

  1. float+margin（一侧定宽，一侧自动）

2.position+margin（一侧定宽，一侧自动）

3.float+负margin（一侧定宽，一侧自动）

三栏布局：
1.float+margin（两侧定宽，中间自适应）

2.position+margin（两侧定宽，中间自适应）

3.float+负margin（两侧定宽，中间自适应）

4.float+position+margin（两侧自动，中间定宽）

5.position+margin（两侧自动，中间定宽）

等高布局：
1.float+margin+position（两列等高布局）

2.float+position（三列等高布局）

流式布局
1.float

2.position

两栏布局，三栏布局，等高布局，流式布局 - 小七丶 - 博客园

CSS布局——左定宽度右自适应宽度并且等高布局

web优化
一、页面级优化

  1. 减少HTTP请求数

减少HTTP请求数的主要途径包括：

(1). 从设计实现层面简化页面
(2). 合理设置HTTP缓存

HTTP1.1协议中关于缓存策略的描述

Fiddler HTTP Performance中关于缓存的介绍.aspx)

(3). 资源合并与压缩
(4). CSS Sprites
(5). Inline Images
(6). Lazy Load Image

  1. 将外部脚本置底

  2. 异步执行inline脚本

  3. Lazy Load Javascript

  4. 将CSS放在HEAD中

  5. 异步请求Callback

  6. 减少不必要的HTTP跳转

  7. 避免重复的资源请求

二、代码级优化

  1. Javascript

(1). DOM

DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除DOM元素或者对DOM集合进行操作。如果脚本中包含了大量的DOM操作则需要注意以下几点：

a. HTML Collection

b. Reflow & Repaint

除了上面一点之外，DOM操作还需要考虑浏览器的Reflow和Repaint，因为这些都是需要消耗资源的，具体的可以参加以下文章：

如何减少浏览器的repaint和reflow?

Understanding Internet Explorer Rendering Behaviour

Notes on HTML Reflow

(2). 慎用with

with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的执行环境，将obj放在了其作用域链的最前端，在with代码块中访问非局部变量是都是先从obj上开始查找，如果没有再依次按作用域链向上查找，因此使用with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。

因此，除非你能肯定在with代码中只访问obj中的属性，否则慎用with，替代的可以使用局部变量缓存需要访问的属性。

(3). 避免使用eval和Function

每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢100倍以上。

eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。

Function 构造函数比eval略好，因为使用此代码不会影响周围代码;但其速度仍很慢。

此外，使用eval和Function也不利于Javascript压缩工具执行压缩。

(4). 减少作用域链查找

此外，要减少作用域链查找还应该减少闭包的使用。

(5). 数据访问

a. 对任何对象属性的访问超过1次

b. 对任何数组成员的访问次数超过1次

另外，还应当尽可能的减少对对象以及数组深度查找。

(6). 字符串拼接

关于Javascript优化的更详细介绍请参考：

Write Efficient Javascript(PPT)

Efficient JavaScript

  1. CSS选择符

在大多数人的观念中，都觉得浏览器对CSS选择符的解析式从左往右进行的，例如

toc A { color: #444; }

这样一个选择符，如果是从右往左解析则效率会很高，因为第一个ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每一个A标签的祖先节点，效率并不像之前想象的那样高。根据浏览器的这一行为特点，在写选择符的时候需要注意很多事项，有人已经一一列举了，详情参考此处。

  1. HTML

对HTML本身的优化现如今也越来越多的受人关注了，详情可以参见这篇总结性文章。

  1. Image压缩

评论