经典前端面试题（五）

最新推荐文章于 2023-08-14 17:09:28 发布

原创最新推荐文章于 2023-08-14 17:09:28 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #面试题

web前端专栏收录该内容

9 篇文章

订阅专栏

61、eval是做什么的？

1. 它的功能是把对应的字符串解析成JS代码并运行

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

62、写一个通用的事件侦听器函数。

    var eventSXT={//跨浏览器事件处理程序兼容
        // 添加事件事件处理
        addEvent:function(element,type,handler){
            if(element.addEventListener){ //DOM2级事件处理判断
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){ //IE事件处理程序判断
                element.attachEvent('on'+type,handler);
            }else{ //DOM0级事件处理判断
                element['on'+type]=handler; 
            }
        },
        // 删除事件事件处理
        removeEvent:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent('on'+type,handler);
            }else{
                element['on'+type]=null;  //删除DOM0级事件
            }
        },
        getEvent:function(event){ //获取事件对象
            return event?event:window.event;  // IE8之前需要用window.event去引用
        },

        getType:function(event){  //获取事件类型
            return event.type;
        },

        getElement:function(event){ //获取事件目标元素
            return event.target || event.srcElement; // 兼容ie
        },

        preventDefault:function(event){ //阻止事件的默认行为，兼容IE和DOM
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        },
        stopPropagation:function(event){ //阻止事件冒泡方法,兼容IE和DOM
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
    };

63、Node.js 的适用场景

1. 高并发

2. 聊天

3. 实时消息推送

64、JavaScript 原型，原型链 ? 有什么特点？

1. 原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链

2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

65、怎么重构页面？

1. 编写 CSS

2. 让页面结构更合理化，提升用户体验

3. 实现良好的页面效果和提升性能

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

1. html5 websocket

2. WebSocket 通过 Flash

3. XHR长时间连接

4. XHR Multipart Streaming

5. 不可见的Iframe

6. <script>标签的长时间连接(可跨域)

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

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

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

3. ev.stopPropagation();

注意旧ie的方法：ev.cancelBubble = true;

68、Ajax 是什么？Ajax 的交互模型？同步和异步的区别？如何解决跨域问题？

Ajax 是什么：

1. 通过异步模式，提升了用户体验

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

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

Ajax 的最大的特点：

1. Ajax可以实现动态不刷新（局部刷新）

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

Ajax 同步和异步的区别:

1. 同步：提交请求 -> 等待服务器处理 -> 处理完毕返回，这个期间客户端浏览器不能干任何事

2. 异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情）-> 处理完毕

ajax.open方法中，第3个参数是设同步或者异步。

Ajax 的缺点：

1. Ajax 不支持浏览器 back 按钮

2. 安全问题 Ajax 暴露了与服务器交互的细节

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

4. 破坏了程序的异常机制

5. 不容易调试

解决跨域问题：

1. jsonp

2. iframe

3. window.name、window.postMessage

4. 服务器上设置代理页面

69、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;
    }
}

70、对网站重构的理解

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

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

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

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

3. 对于移动平台的优化

4. 针对于 SEO 进行优化

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

6. 减少代码间的耦合

7. 让代码保持弹性

8. 严格按规范编写代码

9. 设计可扩展的API

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

11. 增强用户体验

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

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

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

15. 采用CDN来加速资源加载

16. 对于JS DOM的优化

17. HTTP服务器的文件缓存

71、如何获取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>

72、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 禁止访问