您的位置：首页 > 职场人生

前端面试笔记（七）

2017-03-16 11:10 162 查看
1.线程与进程的区别

答：

1. 一个程序至少有一个进程,一个进程至少有一个线程

2. 线程的划分尺度小于进程，使得多线程程序的并发性高

3. 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率

4. 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制 

5. 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

2.你如何对网站的文件和资源进行优化？
答：期待的解决方案包括：

1. 文件合并

2. 文件最小化/文件压缩

3. 使用 CDN 托管

4. 缓存的使用（多个域名来提供缓存）

5. 其他

3.请说出三种减少页面加载时间的方法

答： 1. 优化图片 

2. 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方） 

3. 优化CSS（压缩合并css，如 margin-top, margin-left...) 

4. 网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。） 

5. 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但
影响速度，也影响浏览体验。 

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览
体验也更好了） 

6. 减少http请求（合并文件，合并图片）

4.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
答：FOUC - Flash Of Unstyled Content 文档样式闪烁

<style type="text/css" media="all">@import "../fouc.css";</style> 

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

5.null和undefined的区别？
答：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

undefined表示 “缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

1. 变量被声明了，但没有赋值时，就等于 undefined

2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined

3. 对象没有赋值的属性，该属性的值为 undefined

4. 函数没有返回值时，默认返回 undefined

null表示“没有对象”，即该处不应该有值。典型用法是：

1. 作为函数的参数，表示该函数的参数不是对象

2. 作为对象原型链的终点

6.new操作符具体干了什么呢?
答：1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型

        2. 属性和方法被加入到 this 引用的对象中

        3. 新创建的对象由 this 所引用，并且最后隐式的返回 this

7.对JSON 的了解？
答：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。

2. 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）

3. 按需异步载入js

9.documen.write和 innerHTML 的区别

答：

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

10..call() 和 .apply() 的作用？

答：动态改变某个类的某个方法的运行环境。

11.哪些操作会造成内存泄漏？

答：

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

2. 闭包

3. 控制台日志

4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

12.如何判断当前脚本运行在浏览器还是node环境中？

答：通过判断 Global 对象是否为window，如果不为window，当前脚本没有运行在浏览器中。即在node中的全局变量是global
,浏览器的全局变量是window。 可以通过该全局变量是否定义来判断宿主环境

3. window.name、window.postMessage

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

14.你都使用哪些工具来测试代码的性能？

答：1. Profiler

2. JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）

3. Dromaeo

2. 添加、移除、替换、插入

3. 查找

16.对Node的优点和缺点提出了自己的看法？

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

缺点：

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

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

2. 提升用户体验

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

前景：

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

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

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

4. 做好的页面结构，页面重构和用户体验；

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

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

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

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

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

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

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

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

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

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

5. 500-599 用于支持服务器错误

    503：服务不可用

19.一个页面从输入 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

3. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）

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

5. CSS 跟 HTML 分文件夹并行存放，命名都得统一（例如 style.css）

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

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

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

答：最流行的一些东西：

1. Node.js

2. Mongodb

3. npm

4. MVVM

5. MEAN

6. three.js

7. React

常去的网站：

1. 牛客网

2. Github

3. CSDN

22.javascript对象的几种创建方式
答：

1. 工厂模式

2. 构造函数模式

3. 原型模式

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

5. 动态原型模式

6. 寄生构造函数模式

7. 稳妥构造函数模式

23.javascript继承的 6 种方法
答：

1. 原型链继承

2. 借用构造函数继承

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

4. 原型式继承

5. 寄生式继承

6. 寄生组合式继承

24.ajax 的过程是怎样的
答：

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

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

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

4. 发送HTTP请求

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

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

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

答：

grunt：

UglifyJS 是基于 NodeJS 的 Javascript 语法解析/压缩/格式化工具

官网：http://lisperator.net/uglifyjs/ 或者 https://github.com/mishoo/UglifyJS2
安装：

使用方法见官网 demo

YUI compressor：

YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具，采用Java开发。

使用方法：

Google Closure Compiler：

官网：https://developers.google.com/closure/compiler/

使用方法：

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

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

3. 使用google提供的RESTful API

26.Flash、Ajax各自的优缺点，在使用中如何取舍？

答：

Flash：

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

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

Ajax：

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

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

共同点：

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

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

2. 操作DOM

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  前端 面试题
相关文章推荐
新的分享
章节导航