<commit_before>---
layout:     post
title:      前端经典面试题集锦
subtitle:   面试题
date:       2017-07-25
author:     Ywg
header-img: img/home-bg-o.jpg
catalog:    true
tags: JavaScript 
---

## 从输入URL到页面加载出来的详细过程
大致流程：
1. DNS域名解析
2. 发送HTTP请求
3. 服务器收到并处理请求，返回HTTP报文
4. 浏览器接收响应数据，并解析渲染页面

#### 1.DNS域名解析
DNS解析的过程就是浏览器根据DNS服务器得到域名的IP地址的过程。<br>
![DNS域名解析](https://sfault-image.b0.upaiyun.com/364/224/3642243792-5911b7a9a4a24_articlex)

域名解析是一个层级查找的过程：<br>
查找浏览器缓存 ——> 查找操作系统缓存 ——> 查找路由器缓存 ——> 查找本地DNS缓存 ——> 递归查询<br>
（DNS：域名和IP地址相互映射的一个分布式数据库）<br>
浏览器得到服务器IP地址后，域名解析结束。

#### 2.发送HTTP请求
浏览器通过IP地址查找到对应的服务器，并发送http请求。<br>
发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。<br>
HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。<br>
在Chrome中查看：右键选择检查 -> Network -> 点击Name中的加载资源 -> Headers查看

#### 3.服务器处理请求并返回HTTP报文
HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。<br>
状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值: <br>
```
1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。
```
常见状态码:
```
200(请求成功)
204(请求成功处理，没有内容返回)
301(永久重定向，表示请求的资源已经永久的搬到了其他位置)
302(临时重定向，表示请求的资源临时搬到了其他位置)
304(发送的附带条件请求未满足)
400(请求报文语法错误或参数错误)
401(需要通过HTTP认证，或认证失败) 
403(服务器拒绝请求),
404(服务器找不到请求的页面)
500(内部服务器错误)
503(服务当前不可用,可能因为超载或停机维护)
```

#### 4.浏览器接收响应数，并解析渲染页面
渲染的过程：<br>
![DOM渲染](https://sfault-image.b0.upaiyun.com/775/625/775625205-57d4063b7b60d_articlex)<br>
首先浏览器会解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其显示在屏幕上。涉及reflow回流和repain重绘，页面首次加载必定会经历。reflow回流和repain重绘很耗性能，所以尽量减少，特别是在移动端，很容易造成卡顿。<br>

JS引擎解析:<br>
![JS引擎解析](https://sfault-image.b0.upaiyun.com/342/674/3426749863-57d54b4293001_articlex)<br>
JS解析是由浏览器中的JS引擎完成的。JS是单线程运行的，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。分为：同步任务(synchronous)和异步任务(asynchronous)。JS的执行机制就可以看做是一个主线程（同步任务）加上一个任务队列(异步任务);异步任务只有在同步任务执行完后执行。<br>
JS运行机制： http://www.ruanyifeng.com/blog/2014/10/event-loop.html <br>

浏览器在解析过程中，如果遇到请求外部资源时，如图像,iconfont,JS等，并不会影响HTML文档进行加载，但是当文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。原因是因为JS有可能修改DOM结构，这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。所以JS文件要放在文档最后。

## window.onload和DOMContentLoaded的区别
window.onload：页面中的全部资源加载完才会执行，包括图片，视频等
DOMContentLoaded：DOM渲染完就会执行，此时资源还没加载。
```
document.addEventListener('DOMContentLoaded', function(){},false);
```
jQuery中的实现：
```
$(document).ready(function(){})：DOM渲染完就执行
$(function(){})：上面的简写，作用一样，常用
$(window).load(function(){})：页面中的全部资源加载完才会执行，包括图片，视频等
```
<commit_msg>Update 2017-07-25-前端经典面试题集锦.md<commit_after>---
layout:     post
title:      前端经典面试题集锦
subtitle:   面试题
date:       2017-07-25
author:     Ywg
header-img: img/home-bg-o.jpg
catalog:    true
tags: JavaScript 
---

## 从输入URL到页面加载出来的详细过程
大致流程：
1. DNS域名解析
2. 发送HTTP请求
3. 服务器收到并处理请求，返回HTTP报文
4. 浏览器接收响应数据，并解析渲染页面

#### 1.DNS域名解析
DNS解析的过程就是浏览器根据DNS服务器得到域名的IP地址的过程。<br>
![DNS域名解析](https://sfault-image.b0.upaiyun.com/364/224/3642243792-5911b7a9a4a24_articlex)

域名解析是一个层级查找的过程：<br>
查找浏览器缓存 ——> 查找操作系统缓存 ——> 查找路由器缓存 ——> 查找本地DNS缓存 ——> 递归查询<br>
（DNS：域名和IP地址相互映射的一个分布式数据库）<br>
浏览器得到服务器IP地址后，域名解析结束。

#### 2.发送HTTP请求
浏览器通过IP地址查找到对应的服务器，并发送http请求。<br>
发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。<br>
HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。<br>
在Chrome中查看：右键选择检查 -> Network -> 点击Name中的加载资源 -> Headers查看

#### 3.服务器处理请求并返回HTTP报文
HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。<br>
状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值: <br>
```
1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。
```
常见状态码:
```
200(请求成功)
204(请求成功处理，没有内容返回)
301(永久重定向，表示请求的资源已经永久的搬到了其他位置)
302(临时重定向，表示请求的资源临时搬到了其他位置)
304(发送的附带条件请求未满足)
400(请求报文语法错误或参数错误)
401(需要通过HTTP认证，或认证失败) 
403(服务器拒绝请求),
404(服务器找不到请求的页面)
500(内部服务器错误)
503(服务当前不可用,可能因为超载或停机维护)
```

#### 4.浏览器接收响应数，并解析渲染页面
渲染的过程：<br>
![DOM渲染](https://sfault-image.b0.upaiyun.com/775/625/775625205-57d4063b7b60d_articlex)<br>
首先浏览器会解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其显示在屏幕上。涉及reflow回流和repain重绘，页面首次加载必定会经历。reflow回流和repain重绘很耗性能，所以尽量减少，特别是在移动端，很容易造成卡顿。<br>

JS引擎解析:<br>
![JS引擎解析](https://sfault-image.b0.upaiyun.com/342/674/3426749863-57d54b4293001_articlex)<br>
JS解析是由浏览器中的JS引擎完成的。JS是单线程运行的，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。分为：同步任务(synchronous)和异步任务(asynchronous)。JS的执行机制就可以看做是一个主线程（同步任务）加上一个任务队列(异步任务);异步任务只有在同步任务执行完后执行。<br>
JS运行机制： http://www.ruanyifeng.com/blog/2014/10/event-loop.html <br>

浏览器在解析过程中，如果遇到请求外部资源时，如图像,iconfont,JS等，并不会影响HTML文档进行加载，但是当文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。原因是因为JS有可能修改DOM结构，这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。所以JS文件要放在文档最后。

## window.onload和DOMContentLoaded的区别
window.onload：页面中的全部资源加载完才会执行，包括图片，视频等
```
window.addEventListener('load', function(){},false);
```
DOMContentLoaded：DOM渲染完就会执行，此时资源还没加载。
```
document.addEventListener('DOMContentLoaded', function(){},false);
```
jQuery中的实现：
```
$(document).ready(function(){})：DOM渲染完就执行
$(function(){})：上面的简写，作用一样，常用
$(window).load(function(){})：页面中的全部资源加载完才会执行，包括图片，视频等
```

{'fraction_non_alphanumeric': 0.14931945556445156, 'fraction_numerical': 0.061248999199359486, 'mean_word_length': 10.129175946547884, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 49, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3863411', 'n_tokens_mistral': 3814, 'n_tokens_neox': 4272, 'n_words': 195}