前端面试

1.请用js去除字符串空格

( 1 ) replace正则匹配方法

　　去除字符串内所有的空格：str = str.replace(/\s*/g,"");

　　去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,"");

去除字符串内左侧的空格：str = str.replace(/^\s*/,"");

去除字符串内右侧的空格：str = str.replace(/(\s*$)/g,"");

     ( 2 ) str.trim()方法

trim()方法是用来删除字符串两端的空白字符并返回，trim方法并不影响原来的字符串本身，它返回的是一个新的字符串。

缺陷：只能去除字符串两端的空格，不能去除中间的空格

     ( 3 ) JQ方法：$.trim(str)方法

　　$.trim() 函数用于去除字符串两端的空白字符。

注意：$.trim()函数会移除字符串开始和末尾处的所有换行符，空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。

2.jQuery中的delegate函数的作用？

为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

当点击按钮时，隐藏或显示 p 元素：

$(“div”).delegate(“button”,”click”,function(){

      $(“p”).slideToggle();

});

3.什么是盒子模型？

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

4.比较typeof和instanceOf？

相同点：都常用来判断一个变量是否为空，或者是什么类型的。

不同点：

（1）typeof:返回值是一个字符串，用来说明变量的数据类型（number,boolean,string,function,object,undefined）。

       用法：

1. 判断一个变量是否存在

If（typeof(a) != “undefined”）{

     Alert(1);

}

 

1. 对于Array,Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。

( 2 ) instanceOf用于判断一个变量是否属于某个对象的实例。

Var a = new Array();

alert(a instanceof Array); //true

alert(a instanceof Object); //true

5.什么叫优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

6.Web storage 与cookie相比存在的优势？

1. 存储空间更大：能提供5MB的存储空间（不同浏览器提供的空间不同），Cookie仅4KB。
2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送到服务器，这对于本地存储的数据是一种浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
4. 独立的存储空间：每个域（包括子域）有独立的存储空间，每个存储空间是完全独立的，因此不会造成数据混乱。

7.对闭包的理解？

指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数。

function a(){
    var n = 0;
    function inc() {
        n++;
        console.log(n);
    }
    inc();  
 inc(); 
  }
     a(); //控制台输出1，再输出2

8.JavaScript中实现继承的方法？

1. 原型继承优点是继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不是子类实例化传参，不符合常规语言的写法。

//  父类

function Persion(name,age){

this.name = name;

this.age = age;

}

// 父类的原型对象属性

Persion.prototype.id = 10;

// 子类

function Boy(sex){

this.sex = sex;

}

 // 继承实现

Boy.prototype = new Persion('c5',27);

var b = new Boy();

alert(b.name)// c5

alert(b.id)//10

2.类继承（借用构造函数的方式继承）优点是方便了子类实例传参，缺点就是不继承了父类的原型对象

//  父类

        function Persion(name,age){

           this.name = name;

           this.age = age;

        }

        // 父类的原型对象属性

        Persion.prototype.id = 10;

        // 子类

        function Boy(name,age,sex){

           //call apply 实现继承

           Persion.call(this,name,age);

           this.sex = sex;

        }

         var b = new Boy('c5',27,'男');

         alert(b.name)// c5

         alert(b.id)//undinfind 父类的

3.混合继承（原型继承和类继承）优点方便了子类实例传参，缺点就是Boy.pertotype = new Persion()  函数又实例一次，函数内部变量又重复实例一次，大程序时候会很好性能

//  父类

function Persion(name,age){

this.name = name;

this.age = age;

}

// 父类的原型对象属性

Persion.prototype.id = 10;

// 子类

function Boy(name,age,sex){

//call apply 实现继承

Persion.call(this,name,age);

this.sex = sex;

}

// 原型继承实现  参数为空 代表 父类的实例和父类的原型对象的关系了

 Boy.prototype = new Persion();

var b = new Boy('c5',27,'男');

alert(b.name)// c5

alert(b.id)//10

9.减少页面加载时间的方法？

1. 减少http请求（合并文件、合并图片）。
2. 优化图片文件，减少其尺寸，特别是缩略图，一定要按尺寸生成缩略图然后调用，不要在网页中用resize方法实现，虽然这样看到的图片外形小了，但是其加载的数据量没有减少。（可以采用web图像保存，减少颜色数等等方法）。
3. 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）。
4. 压缩JavaScript、css代码。（百度搜索“css代码压缩”）。
5. 服务器启用gzip压缩功能：将要传输的文件压缩后传输到客户端再解压，在网络传输数据量会减小。（服务器性能不好的网站，慎用）。
6. 标明高度和宽度：方便浏览器给未加载完的图片腾出空位，继续加载后面的内容。
7. 网址后面加上“/”：对服务器而言，不加斜杠服务器会多一次判断的过程，加上就会直接返回网站设置的存放在网站根目录下的默认页面。

10.什么是跨域，跨域请求资源的方法有哪些？

1. 由于浏览器同源策略，凡是发送请求的url的协议、域名、端口三者之间任意一个与当前页面地址不同就是跨域。

存在跨域的情况：

• 网络协议不同，入http协议访问https协议
• 端口不同，如80端口访问8080端口
• 域名不同，如qianduanblog.com访问baidu.com
• 子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com
• 域名和域名对应的ip不同，如www.a.com访问20.105.28.90

    2.方法

1. proxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

     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格式。

缺点：1、这种方式无法发送post请求（这里）

　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

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

11.web前端开发如何提高页面性能优化？

1. 减少http请求（合并CSS、JavaScript、图片）
2. 使用浏览器缓存（设置HTTP头中的Cache-Control和Expires属性）
3. 服务端启用压缩）
4. Css放在页面最上面、JavaScript放在页面最下面（把JavaScript代码放到</body>标签之前）
5. 精简css和js文件（java -jar yuicompressor-2.4.2.jar api.js > api.min.js  和  java -jar yuicompressor-2.4.2.jar style.css > style.min.css）
6. 减少对DOM的操作（减少对DOM元素的查询和修改，查询时可将其赋值给局部变量）
7. 正确理解Repaint和Reflow（通过设置class样式，position为fixed或者absolute）
8. 使用JSON格式进行数据交互
9. 减少cookie传输
10. 使用CDN加速

12.数组去重？

(1) 

/*
* 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中
* IE8以下不支持数组的indexOf方法
* */
function uniq(array){
    var temp = []; //一个新的临时数组
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

(2)

/*

* 速度最快， 占空间最多（空间换时间）

*

* 该方法执行的速度比其他任何方法都快， 就是占用的内存大一些。

* 现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，

* 不是的话给对象新增该键并放入新数组。

* 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，

* 不同的键可能会被误认为一样，例如n[val]-- n[1]、n["1"]；

* 解决上述问题还是得调用“indexOf”。*/

function uniq(array){

    var temp = {}, r = [], len = array.length, val, type;

    for (var i = 0; i < len; i++) {

        val = array[i];

        type = typeof val;

        if (!temp[val]) {

            temp[val] = [type];

            r.push(val);

        } else if (temp[val].indexOf(type) < 0) {

            temp[val].push(type);

            r.push(val);

        }

    }

    return r;

}



var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];

console.log(uniq(aa));

13.未完待续。。。