公司前端面试题

1.用原生js与jquery如何删除一个元素里的子元素以及子元素的内容

js:获取出元素使用removechild()方法删除元素元素.innerHtml=''删除元素的内容

jquery：remove()方法删除元素 html()删除内容

代码如下：

<div id="msg">
    <p>我是p</p>
    <ul>
        <li>我是li1</li>
        <li>我是li2</li>
    </ul>
    我是msg里面自带的文本
    <div>我是div</div>
</div>

　　js方法：

        var msg=document.getElementById('msg');
        var p=msg.getElementsByTagName('p')[0];
        var ul=msg.getElementsByTagName('ul')[0];
        var div=msg.getElementsByTagName('div')[0];
        msg.removeChild(p);
        msg.removeChild(ul);
        msg.removeChild(div);
        p.innerHTML='';
        ul.innerHTML='';
        div.innerHTML='';

　　jquery方法：

        $('#msg p').remove();
        $('#msg ul').remove();
        $('#msg div').remove();
        $('#msg p').html('');
        $('#msg ul').html('');
        $('#msg div').html('');

2.原生js和jquery在第5个p元素后面如何添加一个元素

js：获取出父元素 creatElement()创建一个元素自定义一个InsertAfter函数

jquery:after() insertAfter()函数

代码如下：

<div id="msg">
    <p>我是第1个p</p>
    <p>我是第2个p</p>
    <p>我是第3个p</p>
    <p>我是第4个p</p>
    <p>我是第5个p</p>
    <p>我是第6个p</p>
    <p>我是第7个p</p>
</div>

js方法：

        var msg=document.getElementById('msg');
        var p=msg.getElementsByTagName('p')[4];
        var newp=document.createElement('p');
        newp.innerHTML='我是新添加的p元素';
        //自定义的insertAfter函数
        function insertAfter(newE,targetE){
            var parentNode=targetE.parentNode;
            if(parentNode.lastChild==targetE){
                parentNode.appendChild(newE)
            }else{
                parentNode.insertBefore(newE,targetE.nextSibling)
            }
        }
        insertAfter(newp,p)

jquery方法：

$('#msg p:nth-child(5)').after('<p>我是新添加的p元素</p>');
$('<p>我是新添加的p元素</p>').insertAfter('#msg p:nth-child(5)')

3.跨域问题 jsonp的原理以及优缺点

原理：jsonp,即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说漏洞),服务器端不在返回json格式,而是返回一段调用

某个函数的js代码，在src中进行了调用，这样实现了跨域.

<script>
    window.callback= function (data) {
        //这里是跨域得到的信息
        console.log(data)
    }
</script>
<script src="xxx.js"></script>
//以上将返回格式为callback({x:100,y:100})
<script>
    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
</script>

jsonp优点:
完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。简单来说数据的格式没有发生很大变化

jsonp缺点:

这里主要讲jsonp的缺点,也就是我上面说的没有用这个的原因

1.jsonp只支持get请求而不支持post请求,也即是说如果想传给后台一个json格式的数据,此时问题就来了,浏览器会报一个http状态码

415错误,告诉你请求格式不正确,这让我很蛋

疼(在登录注册中需要给后台传一大串数据),如果都用参数的形式拼接在url后面的话不太现实,后台取值也会显得繁琐,

2.在登录模块中需要用到session来判断当前用户的登录状态,这时候由于是跨域的原因,前后台的取到的session是不一样的,那么就不

能就行session来判断.

3.由于jsonp存在安全性问题(不知qq空间的跨域是怎么解决的,还是另有高招?)

后来考虑到上面的一系列问题,采用的是后台进行设置允许跨域请求(但还是存在缺陷的,实质上还是跨域,如上面说的session问题)

.Header set Access-Control-Allow-Origin *

为了防止XSS攻击我们的服务器，我们可以限制域，比如

Access-Control-Allow-Origin: http://blog.csdn.net

4.写出如下代码的执行结果（闭包）

window.onload=function(){
        function fun(index,value){
            console.log(value)
            return{
                fun:function (m){
                    return fun(m,index)
                }
            }
        }
        var a=fun(0);//undefined
        a.fun(1);//undefined 0
        a.fun(1).fun(2)//undefined 0 1
}

5.vue避免出现花括号闪烁的问题有哪几种解决方案

{{msg}}

[v-cloak] {
display: none;
}

6.说下vue-router如何在页面中传递数据

通过route-link传递参数：<router-link :to="{name:'first1', params: {userName:'vam'}}">vam</router-link>

配置路由的时候：// 动态路径参数以冒号开头 routes: [ { path: '/user/:id', component: User } ] 用this.$route.params.id获取

7.不用vuex怎么实现项目公共数据的全局管理

自己创建公用的mixin

在vue的原型上添加方法

Vue.prototype.$echarts = echarts 
使用：let myChart = this.$echarts.init(document.getElementById('myChart'))

8.jquery跟mvvm框架的区别　　

mvvm:数据驱动

它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染

jquery:事件驱动

mvvm和jquey对比

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。

MVVM则是通过对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

vue适用的场景：复杂数据操作的后台页面，表单填写页面

jquery适用的场景：比如说一些html5的动画页面，一些需要js来操作页面样式的页面

然而二者也是可以结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求

9.mvc跟mvvm的区别？

在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。
MVVM在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。
此外，MVVM另一个重要特性，双向绑定。它更方便你同时维护页面上都依赖于某个字段的N个区域，而不用手动更新它们。

10.eval是用来干什么的？

把字符串参数解析成JS代码并运行，并返回执行的结果；

eval("2+3");//执行加运算，并返回运算值。  //5
eval("var age=10");//声明一个age变量      //console.log(age) //10

eval的作用域

function a(){  
 eval("var x=1"); //等效于 var x=1;  
 console.log(x); //输出1  
}  
a();  //1
console.log(x);//错误 x没有定义

说明作用域在它所有的范围内容有效

function a(){  
 window.eval("var x=1"); // 等效于window.x=1;定义了全局变量  
 console.log(x); //输出1  
}  
a();  //1
console.log(x);//输出1

在IE8及IE8一下的版本就不支持了

functiona(){  
 if(window.execScript){ // 支持IE8及以下的版本  
  window.execScript("var x=1");  
 }  
 else{ //常用的浏览器都支持  
  window.eval("var x=1");  
 }  
 console.log(x);  
}  
a();  
console.log(x);

注意事项

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

其它作用

由JSON字符串转换为JSON对象的时候可以用eval，例如：

var json="{name:'Mr.CAO',age:30}";  
var jsonObj=eval("("+json+")");  
console.log(jsonObj); //Object {name: "Lihaofeng", age: 25}

11.null跟undefined的区别

null表示"没有对象"，即该处不应该有值。(尚未存在的对象，常用来表示函数企图返回一个不存在的对象)

alert(null == document.getElementById('notExistElement'));

当页面上不存在id为"notExistElement"的DOM节点时，这段代码显示为"true"，因为我们尝试获取一个不存在的对象。

典型用法是：

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。
Object.getPrototypeOf(Object.prototype)
// null

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

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

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
o.p // undefined

var x = f();
x // undefined

typeof的区别 null是一个空对象的占位符

alert(typeof undefined); //output "undefined"
alert(typeof null); //output "object"

alert(null == undefined); //output "true" （两者都被转化为false）
alert(null === undefined); //output "false"

12.@import跟link的区别

1.从属关系区别 link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

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

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

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

13.如何准确的判断一个数据的类型是什么（new date 正则）

typeof:可以识别简单基本类型值(比如:number,string,boolean)，但对于复合类型(Object,Array,Function)却只能识别Function。

   typeof num //number
   typeif str //string
   typeof bool //boolean
   typeof arr //object
   typeof obj //object
   typeof func//function
   typeof und //undefined
   typeof nul //object
   typeof date //object
   tyepof reg //object
   tyoeof error //object

instanceof:检测对象的原型链是否指向构造函数的prototype对象的

instanceof只能用来判断对象和函数、数组，不能用来判断字符串和数字等　　

    num instanceof Number  //false
    str instanceof String   //false
    bool instanceof Boolean   //false
    arr instanceof Array  //true
    obj instaneof Object  //true
    func instanceof Function  //true
    und instanceof  Object   //false
    nul instanceof   Object  //false
    date instanceof Date //true
    reg instanceof RegExp //true
    error instanceof Error //true

constructor：通过constructor我们可以得到 instance不能得到的 str num bool 这些基本类型值，但另一个问题又浮现出来，constructor的可变性，由于它的不确定性，我们在很多情况下都无法判断出正确的数据类型，所以使用constructor这个方法也差不多废了....

  num.constructor .name    //Numer
  str.constructor.name  //String
  bool.constructor.name  //Boolean
  arr.constructor.name  //Array
  obj.constructor.name  //Objeact
  func.constructor.name  //Function
  und.constructor.name  // TypeError
  nul.constructor.name  //TypeError
  date.constructor.name //Date
  reg.constructor.name // RegExp
  error.constructor.name //Error

class

Object.prototype.toString.call(num);   //  "[object Number]"
Object.prototype.toString.call(str);   //  "[object String]"
Object.prototype.toString.call(bool);  //  "[object Boolean]"
Object.prototype.toString.call(arr);   //  "[object Array]"
Object.prototype.toString.call(func);  //  "[object Function]"
Object.prototype.toString.call(und);   //  "[object Undefined]"
Object.prototype.toString.call(nul);   //  "[object Null]"
Object.prototype.toString.call(date);  //  "[object Date]"
Object.prototype.toString.call(reg);   //  "[object RegExp]"
Object.prototype.toString.call(error);  //  "[object Error]"

14.左边固定右边自适应的布局有哪几种实现的方式

布局：

<div id="lt">左边的</div>
<div id="rt">右边的</div>

左边固定右边自适应

1. 左边左浮动，右边加个overflow:hidden;

#lt{ float: left;width:200px; background: #ff0;}

#rt{ overflow: hidden; background: #f0f;}

2. 左边左浮动，右边加个margin-left;

#lt{ float: left; width:200px; background: #ff0;}

#rt{ margin-left: 200px; background: #f0f;}

3. 左边绝对定位，右边加个margin-left;

#lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}

#rt{ margin-left: 200px; background: #f0f;}

4. 左右两边绝对定位，右边加个width,top,left,right

#lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}

#rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}

右边固定，左边自适应的布局

1. 左边左浮动，margin-right负值,右边右浮动;

#lt{float:left; width:100%;background: #00f;margin-right: -200px;}

#rt{float: right; width: 200px;background: #ff0;}

2. 右边绝对定位，左边margin-right;

#lt{margin-right:200px; background: #00f;}

#rt{ position: absolute; right:0; top:0; width: 200px;background: #ff0;}

3. 左右两边绝对定位，左边加个width,top,left,right

#lt{ position: absolute; top:0; left:0; rigth:0; width: 100% ; background: #f0f;}

#rt{ position: absolute; top:0; right:0; width:200px; background: #ff0;}

15.不定宽高的元素怎么水平垂直居中

1.最简单的flex布局,外层容器加上如下样式即可

display:-webkit-flex;
justify-content:center; /*水平居中*/
align-items:center; /*垂直居中*/

2.利用table-cell

外层容器

display:table-cell;
text-align:center;
vertical-align:middle;

内部元素

vertical-align:middle;
display:inline-block;

3.使用CSS3 transform

外层容器

position:relative

内部元素

transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;

16.数组去重

   var a=[1,2,3,1,5,6,2];
    var b=[];
    for(var i=0;i< a.length;i++){
        if(b.indexOf(a[i])==-1){
            b.push(a[i])
        }
    }
    console.log(b)

17.闭包内存泄露的解决方法

把变量赋值为null

   //优化前
    function Cars(){
        this.name = "Benz";
        this.color = ["white","black"];
    }
    Cars.prototype.sayColor=function(){
        var other=this;
        return function(){
            console.log(other.name)
        }
    }
    var car=new Cars();
    car.sayColor()()   //Benz

   //优化后
    function Cars(){
        this.name = "Benz";
        this.color = ["white","black"];
    }
    Cars.prototype.sayColor=function(){
        var othercolor=this.name;//保存一个副本到变量中
        return function(){
            console.log(othercolor)//应用这个副本
        }
        othercolor = null//释放内存
    }
    var car=new Cars();
    car.sayColor()()

18.闭包中指针的改变

var obj={
     mz:'李可馨',
     age:24,
     init:function(){
         return function(){
             console.log(this);//window
             console.log(this.name+this.age) //window.name='' //'',undefined 可以换一个其他的属性值
             console.log(this.mz+this.age) //window.name='' //undefined,undefined

} } }

如何把this的指针指向这个对象

使用that保存起来
  var obj={
        mingzi:'likexin',
        age:25,
        init:function(){
            var that=this;
            return function () {
                console.log(that); //window
                console.log(that.mingzi+','+that.age) //window.name='' ,undefined
            }
        }
    }
    var a=obj.init();
    a()

使用bind改变this的指针 //bind返回的是对函数的引用，不会立即执行
    var obj={
        mingzi:'likexin',
        age:25,
        init:function(){
            return function () {
                console.log(this); //window
                console.log(this.mingzi+','+this.age) //window.name='' ,undefined
            }.bind(this)
        }
    }
    var a=obj.init();
    a()

//使用call跟apply 会立即执行 不需要a()
  var obj={
        mingzi:'likexin',
        age:25,
        init:function(){
            return function () {
                console.log(this); //window
                console.log(this.mingzi+','+this.age) //window.name='' ,undefined
            }.apply(this)或者是.call(this)
        }
    }
    var a=obj.init();

19.怎么解决h5浏览器的兼容问题

1.IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，代码如下：

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
    document.createElement(e[i])
}

浏览器支持新标签后，还需要添加标签默认的样式：

article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

2.使用html5shim框架

20.页面之间传值的几种方法

URL+getquerystring()：把参数添加到url里面

　　　　　　　　　　优点:取值方便.可以跨域.
　　　　　　　　　　　缺点:值长度有限制

  //a页面
   window.onload=function(){
        var btn=document.getElementById('btn');
        btn.onclick=function(){
            location.href='b.html?val=1'
        }
    }

   //b页面
   window.onload=function(){
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
        console.log(getQueryString('val'))//1
    }

cookie:Cookie用来给浏览器提供内存, 以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.

　　优点:可以在同源内的任意网页内访问.生命期可以设置.
　　缺点:值长度有限制.

      //a页面
       function setCookie(name,value){
            var days=30;
            var exp=new Date();
            //过期时间
            exp.setTime(exp.getTime()+days*24*60*60*1000);
            document.cookie=name+'='+escape(value)+';expires='+exp.toGMTString();
            location.href='b.html';
        }
        var btn=document.getElementById('btn');
        btn.onclick=function(){
            setCookie('val',1)
        }

//b页面

//unescape():解码 escape():编码
function getCookie(name){
    var reg = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(reg !=null) return unescape(reg[2]); return null;
}
console.log(getCookie('val'))//1

window.open():子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.

　　　　　　优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
　　　　　　缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.

//a页面
<div id="btn">提交</div>
<input type="text" name="text"/>
var btn=document.getElementById('btn');
        btn.onclick=function(){
        window.open('b.html')
}

//b页面
//window.opener指向父窗口
 var parentText = window.opener.document.all.text.value;
 console.log(parentText); //a页面输入什么显示什么

本地存储： localstorge 　　　　

　　　　　优点:最好的解决方法.

　　　　　缺点:可能浏览器不支持.

      //a页面
       function set(){
            //由于是一个新的技术，你可以通过下面的代码检测你的浏览器是否支持
            if(window.localStorage){
                //存储变量的值
                localStorage.name=document.all.text.value;
                location.href='b.html'
            }else{
                alert('浏览器不支持')
            }
        }
        var btn=document.getElementById('btn');
        btn.onclick=function(){
            set()
        }

//b页面
console.log(localStorage['name']);//a页面输入的值

21.img title alt的区别加载失败了怎么给提示

alt   用于图片没显示时在图片显示区域显示一个说明文字。
title 表示鼠标在图片上停留时，显示一个悬浮框，其中显示的文字。

22.如何在$.each函数中跳出循环

jQuery中each类似于javascript的for循环
但不同于for循环的是在each里面不能使用break结束循环，也不能使用continue来结束本次循环，想要实现类似的功能就只能用return,
break 用return false
continue 用return ture

23.map跟foreach的区别

共同点：

1.都是循环遍历数组中的每一项。

2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组arr1。

3.匿名函数中的this都是指Window。

4.只能遍历数组。

不同点：

foreach()函数没有返回值会改变原来的数组

map() 有返回值不会改变原来的数组

    var arr=[1,2,3,4,5];

    var res=arr.forEach(function(item,index,arr1){
        console.log(arr1);//循环5次原数组
        arr1[index]= item*2;
    })
    console.log(res);//undefined 没有返回值
    console.log(arr);//[2,4,6,8,10] 会对原数组发生改变


    var res=arr.map(function (item,index,arr1) {
        console.log(arr1);//循环5次原数组
        return item*2;
    })
    console.log(res);//[2,4,6,8,10]
    console.log(arr);//[1,2,3,4,5]

jQuery $.each()和$.map()

共同点：

即可遍历数组，又可遍历对象

$.each()

没有返回值。$.each()里面的匿名函数支持2个参数：当前项的索引i，数组中的当前项n。如果遍历的是对象，k 是键，n 是值。

    $.each([1,2,3], function (i,n) {
        console.log(i+'&&&'+n) //0&&&1 1&&&2 2&&&3
    })
    $.each({ name: "John", lang: "JS" }, function (k,n) {
        console.log(k+'&&&'+n) //name&&&John  lang&&&JS
    })

$.map()

有返回值，可以return 出来。$.map()里面的匿名函数支持2个参数和$.each()里的参数位置相反

    //跟each相反 i代表值 n代表索引
    var res= $.map([1,2,3], function (n,i) {
        console.log(i+'&&&'+n);
        return n+1
    })
    console.log(res);//[2,3,4]
    //k是值 n是键
    $.map({ name: "John", lang: "JS" }, function (k,n) {
        console.log(k+'&&&'+n) //John&&&name  JS&&&lang
    })

24.数组中如何删除一个元素

splice(index,len,[item]) 注释：该方法会改变原始数组。

splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值

index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空

删除

var arr = ['a','b','c','d'];
arr.splice(1,1);
console.log(arr); //['a','c','d']

替换

//替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
var arr = ['a','b','c','d'];
arr.splice(1,1,'ttt');
console.log(arr);        
//['a','ttt','c','d']

替换起始下标为1，长度为2的两个值为‘ttt’，len设置的2

var arr2 = ['a','b','c','d']; 
arr2.splice(1,2,'ttt'); 
console.log(arr2); //['a','ttt','d']

添加

len设置为0，item为添加的值
var arr = ['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr);        
//['a','ttt','b','c','d'] 表示在下标为1处添加一项'ttt'

delete：删除掉数组中的元素后，会把该下标出的值置为undefined,数组的长度不会变

var arr = ['a','b','c','d'];
delete arr[1];
console.log(arr) //["a", undefined × 1, "c", "d"]

slice('起始下标'，‘结束下标’) 该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

25.vuex的优点和缺点

优点：适用于大项目。用来状态管理，方便其他组件调用公用的状态和方法

缺点：只能配合vue使用

26.webpack配置的loader以及插件

loaders有：

处理vue文件的:vue-loader

处理js文件的:babel
处理css文件的:style-loader,css-
loader,less/sass-loader,postcss-loader
处理html文件的:html-loader
处理模版文件的:ejs-loader等
处理json文件的:json-loader
处理图片文件的:file-loader url-loader
image-webpack-loader

插件有:

autoprefixer：自动补全css3前缀的插件

html-webpack-plugin：自动生成html文件的插件

extract-text-webpack-plugin：提取样式插件

copy-webpack-plugin：拷贝资源插件

Hot Module Replacement（HMR）：热加载

UglifyJsPlugin：压缩JS代码

image-webpack-loader 对图片就行压缩

详情请看：https://segmentfault.com/a/1190000005742122

27.webpack生产环境跟开发环境的配置

28.canvas

canvas处理图片对图片有什么特别的要求

canvas折线图如果跨度太大怎么办

canvas实现刮刮乐的原理

29.websocket的实现原理以及实现步骤

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

实现原理

在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为“握手” 。在 WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即时服务带来了两大好处：

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. Server Push

服务器的推送，服务器不再被动的接收到浏览器的请求之后才返回数据，而是在有新数据时就主动推送给浏览器。

创建对象

var ws = new WebSocket(url,name);

url为WebSocket服务器的地址，name为发起握手的协议名称，为可选择项。

发送文本消息

ws.send(msg);

msg为文本消息，对于其他类型的可以通过二进制形式发送。

接收消息

ws.onmessage = (function(){...})();

错误处理

ws.onerror = (function(){...})();

关闭连接

ws.close();

46.为什么要使用继承

47.svg的图标跟普通的有啥区别

48.http put() delete()　　

49.常用的谷歌f12的哪几个面板

13.如何处理事件

15.如何实现继承

16.服务器跟客户端交互会有什么问题

17.上传文件如何分段

18.localstroge存储有上限吗

22.vue如何实现双向数据绑定的以及vue-router的实现原理是什么

28.ajax交互请求数据的优化

·在服务端，设置HTTP头信息以确保你的响应会被浏览器缓存。

·在客户端，把获取到的信息存储到本地，从而避免再次请求。

32.vue跟react的区别

41.line-height能不能用100%

不能

42.IFrame怎么获取父元素

posted on 2017-09-01 16:22 李灏峰阅读(233) 评论(0) 收藏举报

刷新页面返回顶部

导航

公司前端面试题

实现原理