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

什么叫优雅降级和渐进增强?

1. 优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

2. 渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

对Node的优点和缺点提出了自己的看法?

优点:

1. 因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。

2. 与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。

缺点:

1. Node是一个相对新的开源项目,所以不太稳定,它总是一直在变。

2. 缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子(第三方库现在已经很丰富了,所以这个缺点可以说不存在了)。

对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。

1. 实现界面交互

2. 提升用户体验

3. 有了Node.js,前端可以实现服务端的一些事情

前景:

1. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好

2. 参与项目,快速高质量完成实现效果图,精确到1px;

3. 与团队成员,UI设计,产品经理的沟通;

4. 做好的页面结构,页面重构和用户体验;

5. 处理hack,兼容、写出优美的代码格式;

6. 针对服务器的优化、拥抱最新前端技术。

你有哪些性能优化的方法?

1. 减少http请求次数:CSS Sprites, JS、CSS 源码压缩、图片大小控制合适;网页 Gzip,CDN 托管,data 缓存 ,图片服务器

2. 前端模板 JS + 数据,减少由于HTML标签导致的带宽浪费,前端用变量保存 AJAX 请求结果,每次操作本地变量,不用请求,减少请求次数

3. 用 innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 javascript 性能

4. 当需要设置的样式很多时设置 className 而不是直接操作 style

5. 少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作

6. 避免使用 CSS Expression(css表达式)又称 Dynamic properties(动态属性)

7. 图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳

http状态码有那些?分别代表是什么意思?

1. 100-199 用于指定客户端应响应的某些动作

2. 200-299 用于表示请求成功

3. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息

4. 400-499 用于指出客户端的错误

400:语义有误,当前请求无法被服务器理解

401:当前请求需要用户验证

403:服务器已经理解请求,但是拒绝执行它

5. 500-599 用于指出服务器错误

503:服务不可用

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

分为4个步骤:

1. 当发送一个 URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。

2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。

3. 一旦 TCP/IP 连接建立,浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。

4. 此时,Web 服务器提供资源服务,客户端开始下载资源。

请求返回后,便进入了我们关注的前端模块

简单来说,浏览器会解析 HTML 生成 DOM Tree,其次会根据 CSS 生成 CSS Rule Tree,而 javascript 又可以根据 DOM API 操作 DOM

平时如何管理你的项目?

1. 先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等

2. 编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行)

3. 标注样式编写人,各模块都及时标注(标注关键样式调用的地方)

4. 页面进行标注(例如 页面 模块 开始和结束)

5. CSS 跟 HTML 分文件夹并行存放,命名都得统一(例如 style.css)

6. JS 分文件夹存放 命名以该 JS 功能为准的英文翻译

7. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

说说最近最流行的一些东西吧?常去的哪些网站?

最流行的一些东西:

1. Node.js
2. Mongodb
3. npm
4. MVVM
5. MEAN
6. three.js
7. React

常去的网站:

1. 牛客网
2. Github
3. CSDN

javascript对象的几种创建方式

1. 工厂模式

2. 构造函数模式

3. 原型模式

4. 混合构造函数和原型模式

5. 动态原型模式

6. 寄生构造函数模式

7. 稳妥构造函数模式

javascript继承的 6 种方法

1. 原型链继承

2. 借用构造函数继承

3. 组合继承(原型+借用构造)

4. 原型式继承

5. 寄生式继承

6. 寄生组合式继承

ajax 的过程是怎样的

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

3. 设置响应HTTP请求状态变化的函数

4. 发送HTTP请求

5. 获取异步调用返回的数据

6. 使用JavaScript和DOM实现局部刷新

异步加载和延迟加载

1. 异步加载的方案: 动态插入 script 标签

2. 通过 ajax 去获取 js 代码,然后通过 eval 执行

3. script 标签上添加 defer 或者 async 属性

4. 创建并插入 iframe,让它异步执行 js

5. 延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的

前端的安全问题?

1. XSS

2. sql注入

3. CSRF:是跨站请求伪造,很明显根据刚刚的解释,他的核心也就是请求伪造,通过伪造身份提交POST和GET请求来进行跨域的攻击

完成CSRF需要两个步骤:

1. 登陆受信任的网站A,在本地生成 COOKIE

2. 在不登出A的情况下,或者本地 COOKIE 没有过期的情况下,访问危险网站B。

ie 各版本和 chrome 可以并行下载多少个资源

1. IE6 2 个并发

2. iE7 升级之后的 6 个并发,之后版本也是 6 个

3. Firefox,chrome 也是6个

javascript里面的继承怎么实现,如何避免原型链上面的对象共享

用构造函数和原型链的混合模式去实现继承,避免对象共享可以参考经典的extend()函数,很多前端框架都有封装的,就是用一个空函数当做中间变量

grunt, YUI compressor 和 google clojure用来进行代码压缩的用法。

grunt:

UglifyJS 是基于 NodeJS 的 Javascript 语法解析/压缩/格式化工具
官网:http://lisperator.net/uglifyjs/ 或者 https://github.com/mishoo/UglifyJS2
安装:

$ npm install uglify-js -g

使用方法见官网 demo

YUI compressor:
YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。
使用方法:

// 压缩JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
// 压缩CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

Google Closure Compiler:
官网:https://developers.google.com/closure/compiler/

使用方法:

1. 在命令行下使用一个google编译好的java程序

2. 使用google提供的在线服务

3. 使用google提供的RESTful API

Flash、Ajax各自的优缺点,在使用中如何取舍?

Flash:

1. Flash适合处理多媒体、矢量图形、访问机器

2. 对CSS、处理文本上不足,不容易被搜索

Ajax:

1. Ajax对CSS、文本支持很好,支持搜索

2. 多媒体、矢量图形、机器访问不足

共同点:

1. 与服务器的无刷新传递消息

2. 可以检测用户离线和在线状态

2. 操作DOM

请解释一下 JavaScript 的同源策略。

概念:

同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制:

我们举例说明:比如一个黑客程序,他利用Iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

为什么要有同源限制?

我们举例说明:比如一个黑客程序,他利用Iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

什么是 “use strict”; ? 使用它的好处和坏处分别是什么?

ECMAscript 5添加了第二种运行模式:”严格模式”(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。

设立”严格模式”的目的,主要有以下几个:

1. 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

2. 消除代码运行的一些不安全之处,保证代码运行的安全;

3. 提高编译器效率,增加运行速度;

4. 为未来新版本的Javascript做好铺垫。

注:经过测试 IE6,7,8,9 均不支持严格模式。

缺点:

现在网站的 JS 都会进行压缩,一些文件用了严格模式,而另一些没有。这时这些本来是严格模式的文件,被 merge 后,这个串就到了文件的中间,不仅没有指示严格模式,反而在压缩后浪费了字节。

[v_notice]本文内容来源于网络收集,内容繁杂,难免有误,如果发现错误的地方或者有任何想讨论的问题请在下面留言。[/v_notice]

本站所有文章均由网友分享,仅用于参考学习用,请勿直接转载,如有侵权,请联系网站客服删除相关文章。若由于商用引起版权纠纷,一切责任均由使用者承担
极客文库 » JS面试经典题目合集(三)

Leave a Reply

欢迎加入「极客文库」,成为原创作者从这里开始!

立即加入 了解更多