转载的一些面试题

一. 输入url后的加载过程

从输入 URL 到页面加载完成的过程当中都发生了什么

计算机网络体系结构

• 应用层(HTTP、SMTP、FTP、POP3)
• 运输层(TCP、UDP)
• 网络层(IP(路由器))
• 数据链路层(网桥(CSMA/CD、PPP))
• 物理层(集线器)

1. 查找域名对应IP地址

这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存...
(1) 浏览器搜索本身的 DNS 缓存（维护一张域名与 IP 地址的对应表）；
(2) 搜索操做系统中的 DNS 缓存（维护一张域名与 IP 地址的对应表）；
(3) 搜索操做系统的 hosts 文件（ Windows 环境下，维护一张域名与 IP 地址的对应表）；
(4) 操做系统将域名发送至 LDNS（本地区域名服务器），LDNS 查询 本身的 DNS 缓存（通常查找成功率在 80% 左右），查找成功则返回结果，失败则发起一个迭代 DNS 解析请求：

① LDNS 向 Root Name Server （根域名服务器，如 com、net、org等的解析的顶级域名服务器的地址）发起请求，此处，Root Name Server 返回 com 域的顶级域名服务器的地址；

② LDNS 向 com 域的顶级域名服务器发起请求，返回 baidu.com 域名服务器地址；

③ LDNS 向 baidu.com 域名服务器发起请求，获得 www.baidu.com 的 IP 地址；

(5) LDNS 将获得的 IP 地址返回给操做系统，同时本身也将 IP 地址缓存起来；

(6) 操做系统将 IP 地址返回给浏览器，同时本身也将 IP 地址缓存起来；

2. 创建链接(TCP的三次握手)

(1) 主机向服务器发送一个创建链接的请求；

(2) 服务器接到请求后发送赞成链接的信号；

(3) 主机接到赞成链接的信号后，再次向服务器发送了确认信号 ;

注意：这里的三次握手中主机两次向服务器发送确认，第二次是为了防止已失效的链接请求报文段传至服务器致使错误。

3. 构建网页

(1) 浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；

(2) 服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；

(3) 服务器将获得的 HTML 文件发送给浏览器；

(4) 在浏览器尚未彻底接收 HTML 文件时便开始渲染、显示网页；

(5) 在执行 HTML 中代码时，根据须要，浏览器会继续请求图片、音频、视频、CSS、JS等文件，过程同请求 HTML ；

浏览器渲染展现网页过程

1. HTML代码转化为DOM(DOM Tree)
2. CSS代码转化成CSSOM（CSS Object Model）
3. 结合DOM和CSSOM，生成一棵渲染树（包含每一个节点的视觉信息）(Render Tree)
4. 生成布局（layout），即将全部渲染树的全部节点进行平面合成
5. 将布局绘制（paint）在屏幕上

4. 断开链接(TCP的四次挥手)

(1) 主机向服务器发送一个断开链接的请求；

(2) 服务器接到请求后发送确认收到请求的信号；(此时服务器可能还有数据要发送至主机)

(3) 服务器向主机发送断开通知；(此时服务器确认没有要向主机发送的数据)

(4) 主机接到断开通知后断开链接并反馈一个确认信号，服务器收到确认信号后断开链接；

注意：这里的四次挥手中服务器两次向主机发送消息，第一次是回复主机已收到断开的请求，第二次是向主机确认是否断开，确保数据传输完毕。

三次握手 && 四次挥手

---

二. 有了解过Common.js吗？

发现这方面的资料不多啊，都没有相中的比较好理解的。

浅析JS中的模块规范（CommonJS，AMD，CMD）

前端模块化（CommonJs,AMD和CMD）

前端模块化

前端模块化

三. 有了解过React.js吗？

React.js 只是一个视图库

　　（1）声明式设计

　　（2）高效：经过对DOM的模拟，最大限度的减小与DOM的交互。

　　（3）灵活：能够与已知的框架或库很好的配合。

　　（4）JSX：是js语法的扩展，不必定使用，但建议用。

　　（5）组件：构建组件，使代码更容易获得复用，可以很好地应用在大项目的开发中。

　　（6）单向响应的数据流：React实现了单向响应的数据流，从而减小了重复代码，这也是解释了它为何比传统数据绑定更简单。

react 经过prop管理组件通讯,经过state 驱动视图比较差别进行更新操做

做者：第七页
连接：https://www.zhihu.com/question/39825457/answer/83544390
来源：知乎
著做权归做者全部，转载请联系做者得到受权。

angular 是MV* 框架, react是用来构建可重复使用的UI组件的， 能够当作是个提供工具的library。
react 能够和 angular 的 directive作比较。 这样比较的话， react是比angular directive 在组建UI上更powerful的。

做者：空空
连接：https://www.zhihu.com/question/23444167/answer/24957302
来源：知乎
著做权归做者全部，转载请联系做者得到受权。

React.js 初学者应该知道的 9 件事

React之特色及常见用法

React 入门实例教程

请问 React 和 Angular 各有什么优缺点，各自又适合什么开发场景？

---

四. angular和vue的区别

唉，这个真的太难总结了，求评论！！！

Vue拥有相似 Angular 的双向数据绑定，以及相似 React 的虚拟DOM。

angular && vue && react

Vue.js 很好，但会比 Angular 或 React 更好吗？

vue.js与angular，react等框架分析比较

浅析angular，react，vue.js jQuery使用区别

---

五. less的特色

每次被问到这个我只能想起less中的定义变量，用过久less都忘了css不能嵌套，醉了醉了。

1. 变量
2. 混合（Mixins）
3. 嵌套规则
4. 运算
5. 函数
6. 命名空间
7. 做用域
8. 注释
9. 导入（Import）

Less语言特性

sass-vs-less

Sass和Less的区别

sass 与 less 的区别与学习

---

六. less的原理

本质上，less 包含一套自定义的语法及一个解析器，用户根据这些语法定义本身的样式规则，这些规则最终会经过解析器，less 把这些样式规则编译成浏览器能够识别的 css 样式。less 并无裁剪 css 原有的特性，更不是用来取代 css 的，而是在现有 css 语法的基础上，为 css 加入程序式语言的特性。less 最终须要编译成 css 文件才能起到样式的效果，咱们能够称 less 为 css 样式生成工具。

---

七. gulp的特色

1. 使用 gulp.js，你的构建脚本是代码，而不是配置文件；
2. 使用标准库（node.js standard library）来编写脚本；
3. 插件都很简单，只负责完成一件事－基本上都是 20 行左右的函数；
4. 任务都以最大的并发数来执行；
5. Gulp是一个基于流的构建系统，使用代码优于配置的策略。输入／输出（I/O）是基于“流式”的。

做用

1. Sass、Less编译
2. Css Js 图片压缩
3. Css Js 合并
4. Css Js 内联
5. Html的include功能
6. Autoprefixer(自动处理浏览器css前缀)
7. 自动刷新
8. 去缓存
9. Handlebars模板文件的预编译
10. 雪碧图
11. ESLint
12. rem移动端适配方案

其余补充

	gulp	grunt
速度	快	慢
格式	和node差很少	json套json
操做基于	二进制流	文件

gulp VS grunt

前端工程的构建工具对比 Gulp vs Grunt

模块化 && 构建

dist是指distribution——分配,分发——发布完成的文件夹通常命名dist。

dest则是destination——目的地,终点——用于grunt文件路径相关的配置项，通常会和src配对出现。好比文件压缩插件：压缩源（src）文件，生成压缩包到（dest）。

做者：峰子
连接：https://www.zhihu.com/question/29199796/answer/82862432
来源：知乎
著做权归做者全部，转载请联系做者得到受权。

常规GruntFile.js && gulpFile.js

• GruntFile.js

<script> module.exports = function(grunt) { // 导入模块 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-contrib-watch'); // 配置任务 grunt.initConfig({ // js压缩 默认加密压缩 uglify: { // 主任务名称 options: { // [配置选项] mangle: false // 是否加密压缩 }, a: { // 子任务名称 expand: true, // 是否分开压缩 src: 'js/*.js', // 源文件 dest: 'build' // 目标文件 自动建立源文件文件夹 } }, cssmin: { a: { expand: true, src: 'css/*.css', dest: 'build' } }, htmlmin: { options: { removeComments: true, // 是否移除注释 collapseWhitespace: false // 是否去掉空白 }, a: { src: '*.html', dest: 'build' } }, // imagemin: { // a: { // expand: true, //分开执行 // cwd: 'images', // src: ['**/*.{png,jpg}'], // dest: 'build/images' // } // }, watch: { a: { files: ['*.html', 'css/*.css', 'js/*.js'], tasks: ['cssmin', 'htmlmin', 'uglify'] } } }); // 注册一个默认任务 grunt.registerTask('default', ['uglify', 'cssmin', 'htmlmin', 'watch']); } </script>

• gulpfile.js

<script> // 导入模块 var gulp = require('gulp'); var cssmin = require('gulp-cssmin'); var uglify = require('gulp-uglify'); var htmlmin = require('gulp-htmlmin'); var concat = require('gulp-concat'); var rename = require('gulp-rename'); // 更名 // 配置任务 gulp.task('uglify:css', function() { gulp.src('css/*.css') .pipe(cssmin()) // 压缩 .pipe(concat('all.min.css')) // 合并 .pipe(gulp.dest('build/css')) // 输出 }); gulp.task('uglify:js', function() { gulp.src('js/*.js') .pipe(uglify()) // 压缩 .pipe(gulp.dest('build/js')) // 输出 }); gulp.task('uglify:html', function() { gulp.src('*.html') .pipe(htmlmin({ // 压缩 collapseWhitespace: true, removeComments: true })) .pipe(gulp.dest('build')) // 输出 }); gulp.watch('*.*', ['uglify:css', 'uglify:js', 'uglify:html']); gulp.task('default', ['uglify:css', 'uglify:js', 'uglify:html']); </script>

<script> var gulp = require('gulp'); var uglify = require('gulp-uglify'); var clean = require('gulp-clean-css'); var sass = require('gulp-sass'); gulp.task('uglify',function(){ return( gulp.src('./src/*.js') .pipe(uglify()) .pipe(gulp.dest('dist')) ) }) gulp.task('minify-css',function(){ return ( gulp.src('./src/*.css') .pipe(clean()) .pipe(gulp.dest('dist')) ) }) gulp.task('compile-sass',function(){ return ( gulp.src('./src/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('dist')) ) }) gulp.task('default',function(){ gulp.watch('./src/*.js',['uglify']); gulp.watch('./src/*.css',['minify-css']); gulp.watch('./src/*.scss',['compile-sass']); }) </script>

---

八. ajax的原理

• 在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,而且哪怕只是一次很小的交互、只需从服务器端获得很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去从新读取整个页面。而使用Ajax后用户从感受上几乎全部的操做都会很快响应没有页面重载（白屏）的等待。

• Ajax的原理简单来讲是在用户和服务器之间加了—个中间层(AJAX引擎)，经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。使用户操做与服务器响应异步化。这其中最关键的一步就是从服务器得到请求数据。

  • Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript能够及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

天天10个前端知识点：ajax && jsonp

ajax过程

1. 得到ajax
2. 打开地址
3. 发送数据
4. 接收数据

<script>
 // 1.得到ajax if (window.XMLHttpRequest) { //查看当前浏览器XMLHttpRequest是不是全局变量 var oAjax = new XMLHttpResquest(); } else { var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //IE6,传入微软参数 } // 2.打开地址 switch (json.type.toLowerCase()) { case 'get': oAjax.open('GET', json.url + '?' + jsonToURL(json.data), true); // 提交方式(大写)，url，是否异步 oAjax.send(); // 3.发送数据 break; case 'post': oAjax.open('POST', json.url, true); oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); oAjax.send(jsonToURL(json.data)); // 3.发送数据 break; } // 4.接收数据 oAjax.onreadystatechange = function() { //监控状态 if (oAjax.readyState == 4) { json.complete && json.complete(); if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) { json.success && json.success(oAjax.responseText); //执行成功的回调函数, responseText为响应内容 } else { json.error && json.error(oAjax.status); //执行失败的回调函数 } } }; </script>

---

九. 有了解过ES6吗？

哈哈，这个后面会写一整篇，敬请期待！

【探秘ES6】系列专栏（一）：ES6简介

---

十. git merge

git merge 和 git rebase 小结

---

十一. less不依靠构建转css

我猜这道面试题应该也不让用 lessc ，哈哈哈！

依旧求评论，我只会lessc和构建转化诶。

甩上gulp构建转化

<script> var gulp = require('gulp'), less = require('gulp-less'); gulp.task('testLess', function() { gulp.src(['src/less/index.less', 'src/less/detail.less']) //多个文件以数组形式传入 .pipe(less()) .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css以及detail.css }); gulp.task('testWatch', function() { gulp.watch('src/**/*.less', ['testLess']); //当全部less文件发生改变时，调用testLess任务 }); </script>

---

十二. 冒泡、快排

这个后面也有一篇简单的算法篇，敬请期待！

• 冒泡排序
  每次比较相邻的两个数，若是后一个比前一个小，换位置。
  时间复杂度：O(n^2)

<script>
    var arr = [3, 1, 4, 6, 5, 7, 2]; function bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { for(var j = 0; j < arr.length - 1; j++) { if(arr[j + 1] < arr[j]) { var temp; temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } } console.log(bubbleSort(arr)); </script>

• 快速排序
  采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边。
  时间复杂度：O(nlog2(n))

<script>
    var arr = [3, 1, 4, 6, 5, 7, 2]; function quickSort(arr) { if(arr.length == 0) { return []; // 返回空数组 } var cIndex = Math.floor(arr.length / 2); var c = arr.splice(cIndex, 1); var l = []; var r = []; for (var i = 0; i < arr.length; i++) { if(arr[i] < c) { l.push(arr[i]); } else { r.push(arr[i]); } } return quickSort(l).concat(c, quickSort(r)); } console.log(quickSort(arr)); </script>

---

十三. promise

Promise对象有如下两个特色。

1. 对象的状态不受外界影响。Promise对象表明一个异步操做，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）。只有异步操做的结果，能够决定当前是哪种状态，任何其余操做都没法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其余手段没法改变。

2. 一旦状态改变，就不会再变，任什么时候候均可以获得这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种状况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会当即获得这个结果。这与事件（Event）彻底不一样，事件的特色是，若是你错过了它，再去监听，是得不到结果的。

ECMAScript 6入门 - Promise对象

---

十四. 性能优化

详见性能优化篇！

---

十五. js的冒泡(Bubbling Event)和捕获(Capture Event)的区别

js之事件冒泡和事件捕获详细介绍

1. 冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

2. 捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，而后到最精确(也能够在窗口级别捕获事件，不过必须由开发人员特别指定)。

3. DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，可是，捕获型事件先发生。两种事件流会触及DOM中的全部对象，从document对象开始，也在document对象结束。
   DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

示例
假设一个元素div，它有一个下级元素p。

<div> 　　<p>元素</p> </div>

这两个元素都绑定了click事件，若是用户点击了p：

• 事件捕获
  当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。
• 事件冒泡
  当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

addEventListener函数，它有三个参数，第三个参数如果true，则表示采用事件捕获，如果false，则表示采用事件冒泡。
IE只支持事件冒泡，不支持事件捕获。

Paste_Image.png

阻止冒泡

• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；

在捕获的过程当中stopPropagation（）；后，后面的冒泡过程也不会发生了。

阻止捕获

阻止事件的默认行为，例如click <a>后的跳转
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;

---

十六. 数组的翻转（非reverse）

<script>
    var arr=[1,2,3,4]; var arr2=[]; while(arr.length) { var num=arr.pop(); arr2.push(num); } alert(arr2); </script>

数组更多应用详见：天天10个前端知识点：数组应用篇

---

十七. js的Object和其余语言的object的区别

js对象的建立 js对象和java对象的不一样

面向对象分为基于原型的面向对象和基于模板的面向对象。

• Java：基于模板的面向对象。

class A { private String name; public void fun(){ } } A a = new A(); a.fun();

• JavaScript：基于原型的面向对象，基于事件的网页脚本语言。

<script> function CreateObject() { } CreateObject.prototype = { constructor: CreateObject, // 可特地声明constructor指向 CreateObject name: 'xxx', age: '11', children: ['aaa', 'bbb'], getName: function() { return this.name; } } var p = new CreateObject(); console.log(p.name); // 'xxx' </script>

---

十八. js的Element和Node的区别

JavaScript中Element与Node的区别，children与childNodes的区别

• Element继承了Node类，也就是说Element是Node多种类型中的一种。
• children是Element的属性，childNodes是Node的属性

HTML中的Node和Element的区别

• NODE是相对TREE这种数据结构而言的。TREE就是由NODE组成。
  node有几个子类型：Element，Text,，Attribute，RootElement，Comment，Namespace等。
• ELEMENT则是HTML里的概念，是元素即标签包含内部属性及内容的整体，是HTML中的数据的组成部分之一。

---

十九. svn与git的区别

1. git是分布式的，svn不是。
   git跟svn同样有本身的集中式版本库或服务器。但git更倾向于被使用于分布式模式，克隆版本库后即便没有网络也可以commit文件，查看历史版本记录，建立项目分支等，等网络再次链接上Push到服务器端。

2. git把内容按元数据方式存储，而svn是按文件。
   全部的资源控制系统都是把文件的元信息隐藏在一个相似.svn,.cvs等的文件夹里。
   git目录是处于你的机器上的一个克隆版的版本库，它拥有中心版本库上全部的东西，例如标签，分支，版本记录等。

3. git没有一个全局的版本号，svn有。

4. git的内容完整性优于svn。
   由于git的内容存储使用的是SHA-1哈希算法。

5. git能够有无限个版本库，svn只能有一个指定中央版本库。
   当svn中央版本库有问题时，全部工做成员都一块儿瘫痪直到版本库维修完毕或者新的版本库设立完成。
   每个git都是一个版本库，区别是它们是否拥有活跃目录（Git Working Tree）。若是主要版本库（例如：置於GitHub的版本库）有问题，工做成员仍然能够在本身的本地版本库（local repository）提交，等待主要版本库恢复便可。工做成员也能够提交到其余的版本库！

---

二十. 定时器

这是一道笔试题，小白就是小白啊，还第一次见到定时器的第三个参数，仍是这么写的。

广义上咱们遇到定时器的题目通常是这样的

• setTimeout

<script> for (var i = 0; i < 3; i++) { var t = setTimeout(function() { console.log(i); // 2. 输出三次3 }, 10); } console.log(i); // 1. 3 </script>

此次碰见的是这样的：

循环只进行两次

<script> for (var i = 1; i < 4; i++) { var t = setTimeout(function(i) { console.log(i); // 2. 1 4.2 console.log(t); // 3. 3 5.3 clearTimeout(t); }, 10, i); } console.log(i); // 1. 4 </script>

因而我检测了如下变形

循环只进行两次

<script> for (var i = 1; i < 4; i++) { var t = setTimeout(function(i) { console.log(i); // 2. 2 4. 2 console.log(t); // 3. 3 5. 3 clearTimeout(t); }, 10, 2); } console.log(i); // 1. 4 </script>

循环只进行两次

<script> for (var i = 1; i < 4; i++) { var t = setTimeout(function(i) { console.log(i); // 2. 2 4. 2 console.log(t); // 3. 3 5. 3 clearTimeout(t); }, 10, 2); } console.log(i); // 1. 4 </script>

循环只进行两次

<script> for (var i = 1; i < 4; i++) { var t = setTimeout(function(i, t) { console.log(i); // 2. 2 4. 2 console.log(t); // 3. 3 5. 3 clearTimeout(t); }, 10, 2, 3); } console.log(i); // 1. 5 </script>

只有此次是循环输出3次

<script> for (var i = 1; i < 4; i++) { var t = setTimeout(function(i, t) { console.log(i); // 2. 1 4. 2 6. 3 console.log(t); // 3. undefined 5. 1 7. 2 clearTimeout(t); }, 10, i, t); } console.log(i); // 1. 5 </script>

• setInterval

<script> for (var i = 0; i < 4; i++) { var t = setInterval(function() { console.log(i); // 2. 一直输出4 }, 10); } console.log(i); // 1. 4 </script>

此次碰见的长这样：

<script> for (var i = 0; i < 4; i++) { var t = setInterval(function(i, t) { console.log(i); // 2. 0,1,2,3,3,3,... clearInterval(t); }, 10, i, t); } console.log(i); // 1. 4 </script>

因而我作了如下测试

<script> for (var i = 1; i < 4; i++) { var t = setInterval(function(i, t) { console.log(i); // 2. 2 4. 2 6. 2... console.log(t); // 3. 3 5. 3 7. 3... clearInterval(t); }, 10, 2, 3); } console.log(i); // 1. 4 </script>

<script> for (var i = 0; i < 4; i++) { var t = setInterval(function(i, t) { console.log(i); // 2. 0 4. 1 6. 2 8. 3 10. 3... console.log(t); // 3. undefined 5. 1 7. 2 9. 3 11. 3... clearInterval(t); }, 10, i, t); } console.log(i); // 1. 4 </script>