web前端面试问题及答案总结(六)


eval是做什么的?

它的功能是把对应的字符串解析成JS代码并运行;
应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。

写一个通用的事件侦听器函数?

// event(事件)工具集,来源:github.com/markyun
    markyun.Event = {
        // 页面加载完成后
        readyEvent : function(fn) {
            if (fn==null) {
                fn=document;
            }
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = fn;
            } else {
                window.onload = function() {
                    oldonload();
                    fn();
                };
            }
        },
        // 视能力分别使用dom0||dom2||IE方式 来绑定事件
        // 参数: 操作的元素,事件名称 ,事件处理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件类型、需要执行的函数、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEnentListener) {
                element.removeEnentListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默认行为
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 获取事件目标
        getTarget : function(event) {
            return event.target || event.srcElement;
        },
        // 获取event对象的引用,取到事件的所有信息,确保随时能使用event;
        getEvent : function(e) {
            var ev = e || window.event;
            if (!ev) {
                var c = this.getEvent.caller;
                while (c) {
                    ev = c.arguments[0];
                    if (ev && Event == ev.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return ev;
        }
    };

Node.js的适用场景?

高并发、聊天、实时消息推送

JavaScript原型,原型链 ? 有什么特点?

* 原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链。
* 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。

页面重构怎么操作?

编写 CSS、让页面结构更合理化,提升用户体验,实现良好的页面效果和提升性能。

WEB应用从服务器主动推送Data到客户端有那些方式?

html5 websoket
WebSocket通过Flash
XHR长时间连接
XHR Multipart Streaming
不可见的Iframe
<script>标签的长时间连接(可跨域)

事件、IE与火狐的事件机制有什么区别? 如何阻止冒泡?

1、我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

2、事件处理机制:IE是事件冒泡、firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件。

3、ev.stopPropagation();注意旧ie的方法 ev.cancelBubble = true;

ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

1、通过异步模式,提升了用户体验

<div>2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

</div><div>3. Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。

</div><div>4. Ajax的最大的特点是什么。

Ajax可以实现动态不刷新(局部刷新)

readyState属性 状态 有5个可取值: 0=未初始化 ,1=启动 2=发送,3=接收,4=完成

ajax的缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

跨域: jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面</div>

js对象的深度克隆

  function clone(Obj) {   
        var buf;   
        if (Obj instanceof Array) {   
            buf = [];  //创建一个空的数组
            var i = Obj.length;   
            while (i--) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;   
        }else if (Obj instanceof Object){   
            buf = {};  //创建一个空对象
            for (var k in Obj) {  //为这个对象添加新的属性
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }else{   
            return Obj;   
        }   
    }

网站重构的理解?

网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是:

表格(table)布局改为DIV+CSS

使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

对于移动平台的优化

针对于SEO进行优化

深层次的网站重构应该考虑的方面

减少代码间的耦合

让代码保持弹性

严格按规范编写代码

设计可扩展的API

代替旧有的框架、语言(如VB)

增强用户体验

通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)

程序的性能优化(如数据读写)

采用CDN来加速资源加载

对于JS DOM的优化

HTTP服务器的文件缓存

如何获取UA?

<script>
    function whatBrowser() {  
        document.Browser.Name.value=navigator.appName;  
        document.Browser.Version.value=navigator.appVersion;  
        document.Browser.Code.value=navigator.appCodeName;  
        document.Browser.Agent.value=navigator.userAgent;  
    }  
</script>

js数组去重

以下是数组去重的三种方法:

Array.prototype.unique1 = function () {
  var n = []; //一个新的临时数组
  for (var i = 0; i < this.length; i++) //遍历当前数组
  {
    //如果当前数组的第i已经保存进了临时数组,那么跳过,
    //否则把当前项push到临时数组里面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
  }
  return n;
}

Array.prototype.unique2 = function()
{
    var n = {},r=[]; //n为hash表,r为临时数组
    for(var i = 0; i < this.length; i++) //遍历当前数组
    {
        if (!n[this[i]]) //如果hash表中没有当前项
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把当前数组的当前项push到临时数组里面
        }
    }
    return r;
}

Array.prototype.unique3 = function()
{
    var n = [this[0]]; //结果数组
    for(var i = 1; i < this.length; i++) //从第二项开始遍历
    {
        //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
        //那么表示第i项是重复的,忽略掉。否则存入结果数组
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

HTTP状态码

100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求,但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后,请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

cache-control

网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private。

Expires 头部字段提供一个日期和时间,响应在该日期和时间后被认为失效。允许客户端在这个时间之前不去检查(发请求),等同max-age的效果。但是如果同时存在,则被Cache-Control的max-age覆盖。

Expires = "Expires" ":" HTTP-date

例如

Expires: Thu, 01 Dec 1994 16:00:00 GMT (必须是GMT格式)

如果把它设置为-1,则表示立即过期

Expires和max-age都可以用来指定文档的过期时间,但是二者有一些细微差别

1、Expires在HTTP/1.0中已经定义,Cache-Control:max-age在HTTP/1.1中才有定义,为了向下兼容,仅使用max-age不够;

2、Expires指定一个绝对的过期时间(GMT格式),这么做会导致至少2个问题:1)客户端和服务器时间不同步导致Expires的配置出现问题。 2)很容易在配置后忘记具体的过期时间,导致过期来临出现浪涌现象;

3、max-age 指定的是从文档被访问后的存活时间,这个时间是个相对值(比如:3600s),相对的是文档第一次被请求时服务器记录的Request_time(请求时间)

4、Expires指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime),而max-age相对对的是文档的请求时间(Atime)

如果值为no-cache,那么每次都会访问服务器。如果值为max-age,则在过期之前不会重复访问服务器。

js操作获取和设置cookie

//创建cookie
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; expires=' + expires;
    }
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}

//获取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
  cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length, cookieEnd));
    }
    return cookieValue;
}

//删除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}

推荐文章
Word中怎么插入分隔线?

Word中插入分隔线的方法新建一个需要使用到的word文档并且打开它。方法一:打开之后,点击上面的插入菜单。然后在打开的页面中点击形状选项,在出现的页面中点击线条下面的直线。然后根据实际需要直接画出一

Linux yum命令详解(查询、安装、升级和卸载软件包)

在《yum及其源配置》一节的基础上,本节学习如何使用yum命令实现查询、安装、升级和卸载RPM包。 yum查询命令 使用yum对软件包执行查询操作,常用命令可分为以下几种: yumlist:查询

extern关键字,C语言extern关键字用法详解

我们知道,程序的编译单位是源程序文件,一个源文件可以包含一个或若干个函数。在函数内定义的变量是局部变量,而在函数之外定义的变量则称为外部变量,外部变量也就是我们所讲的全局变量。它的存储方式为静态存储,

Vue初级高频基础面试题(汇总)

自学前端在刚入门时面试是最艰难的阶段,本篇文章的内容都是从各大平台网站汇总过来的,不包含各种源码知识,不至于出现不懂的内容。一、什么是MVVM?MVVM是Model-View-ViewModel的缩写

2020 年最新 Web 前端开发经典面试试题及答案

1、JavaScript中如何检测一个变量是一个String类型?请写出函数实现typeof(obj)==="string" typeofobj==="string" obj.constructor=

Java冒泡排序法(非常重要)

冒泡排序(BubbleSort)是常用的数组排序算法之一,它以简洁的思想与实现方法而备受青睐,也是广大学习者最先接触的一种排序算法。 冒泡排序的基本思想是:对比相邻的元素值,如果满足条件就交换元素值

网站权重是怎么回事?

权重值是搜索引擎对网站页面重要性的评价指标,不同的搜索引擎都拥有自己的权重名称,如谷歌PR(PageRank)、百度BR(BaiduRank)、搜狗SR(SogouRank)等。 影响权重的因素包含

C语言约瑟夫环问题

编号为1,2,3,…,n的n个人围坐一圈,任选一个正整数m作为报数上限值,从第一个人开始按顺时针方向报数,报数到m时停止,报数为m的人出列。从出列人的顺时针方向的下一个人开始又从1重新报数,如此下去,

MATLAB程序的运行分析

MATLAB提供了两种方法进行程序的优化,一种是通过Profiler工具进行,另一种是通过tic和toc函数进行。本节将介绍这两种程序运行分析的方法。 通过Profiler进行程序运行分析 Prof

C语言中的二进制数、八进制数和十六进制数

C语言中的整数除了可以使用十进制,还可以使用二进制、八进制和十六进制。 二进制数、八进制数和十六进制数的表示 一个数字默认就是十进制的,表示一个十进制数字不需要任何特殊的格式。但是,表示一个二进制、

C语言文本流和二进制流

从C程序角度来看,无论程序一次读写的是一个字符、字节、文本行还是给定大小的数据区域,作为输入输出的各种文件和设备统一以逻辑数据流的方式展现。C语言中的数据流可以是文本流或者二进制流,甚至在某些系统上,

@Autowired注解与@Resource注解的区别是什么?

@Autowired注解与@Resource注解的区别Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解。如:@Resource、@PostConstru

第一个JSP程序

根据前面几节教程所介绍的内容,试写一个HelloWorld.jsp文件代码,调试并运行显示结果。其实现过程分为以下几个步骤。 (1)在C:\Tomcat\webapps\ROOT下新建一个测试的JS

Go语言TCP网络程序设计

TCP工作在网络的传输层,它属于一种面向连接的可靠的通信协议。TCP网络程序设计属于C-S模式,一般要设计一个服务器程序,一个或多个客户机程序。另外,TCP是面向连接的通信协议,所以客户机要和服务器进

索引失效的几种情况是什么?

索引失效的几种情况1.有or必全有索引;2.复合索引未用左列字段;3.like以%开头;4.需要类型转换;5.where中索引列有运算;6.where中索引列使用了函数;7.如果mysql觉得全表扫描

MATLAB的函数参数

本节介绍一下MATLAB的函数参数。具体的操作步骤如下: 确定函数参数数量 当调用一个函数时,所用的输入变量和输出变量的数量,在函数内是确定的。nargin函数确定输入变量个数,nargout函数确

JS cloneNode()方法:复制节点

JavaScriptcloneNode()方法可以创建一个节点的副本,也即复制一个节点。 示例1 在下面示例中,首先创建一个节点p,然后复制该节点为p1,再利用nodeName和nodeType属性

JS模块化编程简介

模块就是提供一个接口,却隐藏状态与实现的函数或对象。一般在开发中使用闭包函数来构建模块,摒弃全局变量的滥用,规避JavaScript缺陷。 全局变量是JavaScript最糟糕的特性之一,在一个大型

C++优先级队列存储智能指针详解

现在主要讲解智能指针的使用。这和原生指针在本质上是相同的,除非想要自己负责删除它们所指向的对象。当生成优先级队列或堆时,需要一个顺序关系来确定元素的顺序。当它们保存的是原生指针或智能指针时,总是需要为

C++ STL插入迭代器适配器(insert_iterator)

《C++STL反向迭代器》一节讲解了反向迭代器适配器的功能和用法,本节继续讲解C++STL标准库提供的另一类型迭代器适配器,即插入迭代器适配器。 插入迭代器适配器(insert_iterator),