• 前端面试整理


    1,数组去重

    function noRepeat(arr){
      var resArr = [];
      var obj = {};
      for(var i=0,len=arr.length;i<len;i++){
            if(!(obj[arr[i] + typeof arr[i]])){
                 resArr.push(arr[i]);
            }    
       }      
    } 

     2,闭包的概念阐述

    执行一个函数的时候就会产生一个封闭的作用域,这个封闭的作用域就是闭包,一般大家会认为;(function(){})()是闭包,但这只是闭包的一种形式。闭包的好处就是避免变量冲突,但是闭包的缺点是,如果闭包中有引用类型的数据被使用,那么整个闭包都无法释放,占用内存。

    3,base64的优缺点

    一般移动端的大的背景图会用base64,而且图片体积比较大的时候才会使用base64,如果图片比较小,那么base64编码后的字符串会比图片本身还要大,只有图片达到几百k左右的级别的时候,用base64编码就会大大缩小图片的体积

    优点:能够减小图片的尺寸,同时还能够减少http请求数量,http请求是非常消耗服务器资源的

    缺点:不能缓存

    4,各种图片格式

    jpg:一般能够把大的图片压缩小一点,就是压缩效率高

    png:能够实现图片的透明效果,而jpg透明的部分是白色的,在ie下png24会自动加上背景色,但png8可能会模糊一些

    gif:一般用作动态图,如loading图片

    5,10000个不重复的数字取5000个不同的数字,要求多次操作均获得不同的结果

    最佳的方案是从10000个数字中随机取出一个,然后把数组最后一个元素填充到取出的空缺处,这样数组长度变成9999,进行5000次即可。

    上述方案比用splice删除数组中的一项要节省性能,这属于内存的知识,假如取出第10个数字,使用splice会使得后面的9990个数字都向前移动一个单位,导致时间复杂度特别高。

    要有防止内存大规模迁移的思想。

     6,求数组中最大的数字

    var max = Math.max.apply(null,arr)

    7,字符串反转

    var reverseStr = str.split("").reverse().join("");

    8,前端性能优化

      js放下面,css放下面可能会闪,所以css放上面

      移动端用base64处理大的背景图

      用css sprite解决一些小的图片,减少http请求

      代码压缩

      做图片的延迟加载

      用CDN服务器对网站的静态文件做负载均衡,在CDN后面加上?时间戳保证每次都是最新的文件

    9,盒子模型

    content+padding+border+margin

    如果在移动端,这种盒子模型就不适合做开发了,最好用box-sizing:border-box;属性改变一下盒子模型,写了这个属性后,宽度会包括border,因为移动端主要用的是百分比,不可能通过像素精准控制,如果让两个占屏幕50%的div并排,而这两个div还有border和padding,原来的盒子模型就做不到。必须改为border-box才可以,用inline-block让两个div并排后,中间会有一个空白字符,可以用font-size:0来解决。

    10,文档就绪函数$(document).ready()

    用标准浏览器的DOMContentLoaded及IE的doScroll(dom没有加载完时,会抛出异常9)实现 

    11,原生js实现复制对象,扩展对象,类似jq中的extend()方法

    function cloneObj(oldObj) { //复制对象方法  
        if (typeof(oldObj) != 'object') return oldObj;  
        if (oldObj == null) return oldObj;  
        var newObj = new Object();  
        for (var i in oldObj)  
            newObj[i] = cloneObj(oldObj[i]);  
        return newObj;  
    };
    function extendObj() { //扩展对象  
        var args = arguments;  
        if (args.length < 2) return;  
        var temp = cloneObj(args[0]); //调用复制对象方法  
        for (var n = 1; n < args.length; n++) {  
            for (var i in args[n]) {  
                temp[i] = args[n][i];  
            }  
        }  
        return temp;  
    } 

    利用解构拷贝对象和数组

    const obj = {a:1,b:2}
    const cloneObj = {...obj}
    obj === cloneObj //false
    cloneObj   //{a:1,b:2}

    12,跨域

      同源策略规定多个web资源的url中的scheme、hostname、port必须相同,只要有一项不同就属于跨域。由于同源策略的影响,XMLHttpRequest只可以发起操作同域下的请求。script元素可以作为一种ajax传输协议,浏览器会发出一个http请求到src属性所指向的url。服务器返回的数据需用javascript方法名加括号包裹住才行,返回的是一个jsonp数据(例如:functionname({"name":"a"})),而不是一个普通的json数据。在请求的url后面加上?callback=functionname,并在window下有一个functionname的方法。

    //实现一个简单的JSONP请求
    //请求的url、包裹方法名称、回调函数
    function JSONP(url,callbackName,callback){
        //为本次请求创建一个唯一的callback名称
        var cbnum="cb"+JSONP.count++; //计数器 生成一个唯一的名称
        var cbname="JSONP."+cbnum; //作为JSONP方法的一个静态属性
    
        if(url.indexOf("?")==-1){
            url+="?"+callbackName+"="+cbname;
        }else{
            url+="&"+callbackName+"="+cbname;
        }
    
        JSONP[cbnum]=function(response){
            try{
                callback(response);
            }catch (ex){
    
            }finally{
                //执行完毕之后就删掉,因为没什么用了
                delete JSONP[cbnum];
                script.parentNode.removeChild(script);
            }
        }
        var script=document.createElement("script");
        script.src=url;
        document.body.appendChild(script);
    }
    //初始化用于创建唯一名称的计数器
    JSONP.count=0;
    
    //发起JSONP请求。
    JSONP("http://suggestion.baidu.com/su?wd=xxx","cb",function(data){
        //将百度返回的数据输出到控制台中
        console.log(data)
    });

     

       跨域资源共享CORS,使用标准浏览器中的XMLHttpRequest对象及IE8-9中的XDomainRequest对象。设置XMLHttpRequest中的WithCredentials为true。服务器会在响应头设置Access-Control-Allow-Origin指定跨域请求源。

    (function (global, undefined) {
        //根据有无withCredentials来判断浏览器时候支持XMLHttpRequest跨域请求操作
        var XMLHttpRequestCORS = (function () {
            if (!('XMLHttpRequest' in global))
                return false;
            var a = new XMLHttpRequest();
            return a.withCredentials !== undefined;
        })(), request = function () {
            //判断浏览器兼容性
            if ('XDomainRequest' in global)
                return new XDomainRequest();
            //是否支持跨域请求
            if ('XMLHttpRequest' in global && XMLHttpRequestCORS)
                return new XMLHttpRequest();
            return false;
        };
        var xhr = request();
        if(xhr){
            xhr.open("get", "http://localhost:1111");
            xhr.onload = function () {
                //onload方法表示请求已经完成,参见上面XMLHttpRequest的onload属性解释
                console.log(this.responseText);
            };
            xhr.send();
        }
    
    })(window);

     

     

     

     

  • 相关阅读:
    全局变量 和 局部变量
    函数
    字符串拼接
    集合
    字典
    元祖
    列表
    Python 字符串 小练习
    ssm多数据源配置
    JAVA笔记:double四舍五入并保留两位小数的方法
  • 原文地址:https://www.cnblogs.com/web-fengmin/p/6523666.html
Copyright © 2020-2023  润新知