WEB前端笔试题（2）——狼厂

1.CSS属性position的属性值有哪些，描述他们的作用

2.程序定义如下：

 1 var myobject={
 2     foo:"bar",
 3     func:function(){
 4         var self=this;
 5         console.log("outer func:this.foo="+this.foo);
 6         console.log("outer func:self.foo="+self.foo);//
 7         (function(){
 8 　　　　    console.log("outer func:this.foo="+this.foo);
 9 　　　　    console.log("outer func:self.foo="+self.foo);
10 　　    })()
11 }}    
12 myobject.func();  
13 /*打印结果
14 outer func:this.foo=bar 
15 outer func:self.foo=bar 
16 outer func:this.foo=undefined
17 outer func:self.foo=bar
18 */

在 JavaScript 中,上下文对象就是 this 指针,即被调用函数所处的环境。上下文对象 的作用是在一个函数内部引用调用它的对象本身。

12行调用时，代码运行到5、6行时，self和this的情况：

因此this.foo=bar;self.foo=bar

运行到匿名函数中时，即第8,9行

头疼的闭包！由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

因此this.foo=undefined;self.foo=bar

同理换一种调用方法：

foo="test";
func=myobject.func();
func();
/*打印结果
outer func:this.foo=test
outer func:self.foo=test
outer func:this.foo=test
outer func:self.foo=test 
*/

this和self都是window，但是因为定义了全局变量，因此都能找到.foo的值

3.随机生成颜色

function getRandomColor(){
    var colorch="#";
    for(var i=0;i<6;i++){
        var a=Math.random();
    var choose=[1,2,3,4,5,6,7,8,9,‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘]
    var num=Math.round(a * 15);    
    colorch+=choose[num];
    }
    return colorch;        
}

4.列举你所知道的行内元素、块元素、空元素

block element:

常见：<div><dl><ul><ol><form><h1>-<h6><fieldset> <table><p>

总是在新行上开始；此元素将显示为块级元素，此元素前后会带有换行符。 
height,width,padding,margin都有效； 
宽度缺省是它的容器的100%，除非设定一个宽度。

当设置为display:inline时转为行内元素

inline element:

<a><b><br><span><i><img><input><select><label><q><span><sub><sup><textarea>

和其他元素都在一行上；默认。此元素会被显示为内联元素，元素前后没有换行符。行内元素不会单独的占有一行，而是挨着显示的。 
width,height设置无效,水平方向的padding和margin有效，垂直上下的padding和margin无效。
如果需要设置高度，可以通过行高line-height撑起来。       
宽度就是它的文字或图片的宽度，不可改变。

当设置为display:block时转为块元素

void element

<br> <hr> <img> <input> <link> <meta>

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

不可包含任何内容，直接闭合

5.CSS中link和@import的区别

页面中使用CSS的方式主要有3种：

内联CSS：行内添加定义style属性值

外链CSS：页面头部内嵌调用和外面链接调用，link和@import。

link:
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
@import:
<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>  

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

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS(同样的如@font-face加载字体)。

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

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

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

6.以下代码输出结果：

var x=1,y=z=0;
function add(n){
    return n=n+1;
}
y=add(x);
function add(n){
    return n=n+3;
}
z=add(x)
//x=1,y=4,z=4

7.至少写5个前端优化的方法

1.减少HTTP请求和请求资源大小（合并图片，用如 YUI Compressor等工具瘦身JS和CSS文件，合并多个CSS文件，合并多个JS文件，图片多时用lazyLoad，压缩图片大小）

2.减少DOM操作（例如用innerHTML="<a href>link<a>"这种方式取代createElement等DOM操作）

3.使用CDN内容分布网络（例如jquery，用户在访问其他网站时可能从微软的CDN下载过Jquery文件放在缓存中，这样你的页面使用jquery不必再请求一次jquery文件）

4.用JSON代替XML来存储和交换数据

5.减少不合理嵌套（如table的td里套table，或者body ul li a这种）

6.减少Cookie（因为每次加载页面都会读本地Cookie）

7.使用HTML5本地缓存机制

8.先加载HTML页面结构，再进行表现层渲染，最后加载JS（CSS外链放头部，JS外链放尾部，因为请求JS会阻塞其他资源的下载请求）

8.实现数字千分位（如100,000）

function comdify(num){
    var ch=num.toString();
    var len=ch.length;
    if(len>3){
        for(var i=len-3;i>0;i-=3){
            ch=ch.substr(0,i)+","+ch.substr(i,len-1);
            len++;
        }
    }
    return ch;
}

解2：正则表达式乃我短板，真心不想看！

function comdify(n)
{
    var re=/\d{1,3}(?=(\d{3})+$)/g;
    var n1=n.replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return         s1.replace(re,"$&,")+s2;});
    return n1;
}

同时，实现input输入数字失去焦点时变成千分位，获得焦点时变为数字：

var input_box=document.getElementById("input_box");
input_box.onblur=function(){
    this.value=this.value.replace(/\d+?(?=(?:\d{3})+$)/g,function(s){return s+‘,‘});
}
input_box.onfocus=function(){
    this.value=this.value.replace(/,/g,‘‘);
}

9.域名劫持

域名劫持是互联网攻击的一种方式，通过攻击域名解析服务器（DNS），或伪造域名解析服务器（DNS）的方法，把目标网站域名解析到错误的地址从而实现用户无法访问目标网站的目的。