• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

JS面试经典题目合集(四)

极客题库 Geekerstar 11个月前 (06-04) 457次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]
本文内容来源于网络收集,内容繁杂,难免有误,如果发现错误的地方或者有任何想讨论的问题请在下面留言。

GET和POST的区别,何时使用POST?

GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符

POST:一般用于修改服务器上的资源,对所发送的信息没有限制

GET方式需要使用 Request.QueryString 来取得变量的值

POST方式通过 Request.Form 来获取变量的值

也就是说 Get 是通过地址栏来传值,而 Post 是通过提交表单来传值。

在以下情况中,请使用 POST 请求:

1. 无法使用缓存文件(更新服务器上的文件或数据库)

2. 向服务器发送大量数据(POST 没有数据量限制)

3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

哪些地方会出现css阻塞,哪些地方会出现js阻塞?

js 的阻塞特性:所有浏览器在下载 JS 的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。

直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。

为了提高用户体验,新一代浏览器都支持并行下载 JS,但是 JS 下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。

由于浏览器为了防止出现 JS 修改 DOM 树,需要重新构建 DOM 树的情况,所以就会阻塞其他的下载和呈现。

嵌入 JS 会阻塞所有内容的呈现,而外部 JS 只会阻塞其后内容的显示,2 种方式都会阻塞其后资源的下载。

也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

CSS 怎么会阻塞加载了?CSS 本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6 下 CSS 都是阻塞加载)

当 CSS 后面跟着嵌入的 JS 的时候,该 CSS 就会出现阻塞后面资源下载的情况。

而当把嵌入 JS 放到 CSS 前面,就不会出现阻塞的情况了。

根本原因:因为浏览器会维持 html 中 css 和 js 的顺序,样式表必须在嵌入的 JS 执行前先加载、解析完。

而嵌入的 JS 会阻塞后面的资源加载,所以就会出现上面 CSS 阻塞下载的情况。

嵌入JS应该放在什么位置?

1. 放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。

2. 如果嵌入JS放在head中,请把嵌入JS放在CSS头部。

3. 使用 defer(只支持IE)

4. 不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用 setTimeout 来调用

Javascript无阻塞加载具体方式:

1. 将脚本放在底部。link还是放在head中,用以保证在js加载前,能加载出正常显示的页面。script标签放在/body前。

2. 阻塞脚本:由于每个script标签下载时阻塞页面解析过程,所以限制页面的script总数也可以改善性能。适用于内联脚本和外部脚本。

3. 非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在 window.onload 事件发出后开始下载代码。

4. defer属性:支持IE4和fierfox3.5更高版本浏览器

5. 动态脚本元素:文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容。代码如下:

var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);

此技术的重点在于:无论在何处启动下载,文件额下载和运行都不会阻塞其他页面处理过程,即使在head里(除了用于下载文件的 http 链接)。

eval是做什么的?

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

2. 应该避免使用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.detachEvent) {
            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 的适用场景

1. 高并发

2. 聊天

3. 实时消息推送

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

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

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

怎么重构页面?

1. 编写 CSS

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

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

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

1. html5 websocket

2. WebSocket 通过 Flash

3. XHR长时间连接

4. XHR Multipart Streaming

5. 不可见的Iframe

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

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

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

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

3. ev.stopPropagation();

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

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. 服务器上设置代理页面

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。

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

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服务器的文件缓存

如何获取UA

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

js 数组去重

答案请参考这里:用JavaScript脚本为Array对象添加一个去除重复项的方法

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个问题:
2.1客户端和服务器时间不同步导致Expires的配置出现问题。
2.2很容易在配置后忘记具体的过期时间,导致过期来临出现浪涌现象

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

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

5. 如果值为 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 += "; path=" + path     }
    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);
}
本文内容来源于网络收集,内容繁杂,难免有误,如果发现错误的地方或者有任何想讨论的问题请在下面留言。

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:JS面试经典题目合集(四)
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00