从打开浏览器输入网址，到页面显示出来经历了什么?

前端的基础知识看似很少：HTML，CSS，JS，实则不然，随着这些年前端工程化，自动化盛行还有大量优秀框架的产生，让没太更新知识的人捉襟见肘这个博客把我自己的经验结合其他优秀前端分享的知识做一个整理和沉淀。

从打开浏览器输入网址，到页面显示出来，拢共分几步？
答：5步（粗略）

第一步：解析DNS

输入域名后对域名进行逐级查找，从运营商到国家级域名服务器再到美国根节点，不管是域名还是IP，都可以返回数据或不返回，所以我们需要梯子来;

第二步：与服务器建立HTTP连接

拿到域名对应服务器的IP地址后进行TCP / IP连接，三次牵手通信，DDoS攻击和DOS攻击就是针对这个过程的特点来进行。

第三步：服务器处理请求并返回报文

服务器根据请求类型，URI地址解析并生成HTML（包头，包体）返回给客户端，早期服务端统一输出的时代SQL脚本注入就是在请求阶段进行的。并且，面试也经常会问到的报文结构;以HTTP1.1为例，举一个最简单的请求例子：

请求

POST /index.html HTTP/1.1
HOST: www.XXX.com
User-Agent: Mozilla/5.0(Windows NT 6.1;rv:15.0) Firefox/15.0

Username=admin&password=admin

响应

头：
HTTP/1.1 200 OK
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
报体：



    
    


    
this is http response

我们打开Chrome的浏览器，在network里，找到第一个HTML的请求就可以看到最详细完整的内容，请求返回的HTTP状态代码（100,200,300,400,500）各代表什么意义？能用来做什么？
服务器数据缓存memcahe＆redis的和浏览器的缓存（HTML，CSS，JS，IMG静态资源），器浏览的缓存分为这块强制缓存状语从句：协商缓存，所对应的的StatusCode是什么？这就是协议和浏览器的基础知识应用。
浏览器发起GET，POST请求，和AJAX的REST风格的请求会有哪些不同？哪些相同？自己拿原生JS来实现要怎么做？AJAX请求属于I / O任务，在事件循环里处在什么位置？另外，现在常见的http2.0，https和安防等等也需要了解

第四步：浏览器拿到报文数据开始加载

浏览器拿到数据了，开始加载和解析，CSS和JS文件都是带一定阻塞性的，就有了预加载，懒加载和文件包管理的点。

第五步：浏览器开始进行解析和渲染

首先解析HTML和CSS，并生成DOM树，进而生成渲染树;在这个阶段还要注意重排和重绘两个点，为了减少实际的Dom操作现在第三方框架后续再分享

这5步，涉及的知识点：协议（TCP / IP，HTTP，HTTPS），浏览器（的loadFile，工作原理，脚本解释引擎V8等），JS，CSS编程，计算机命名，工程化管理等诸多知识。

为什么要问基础？因为要的是工程师（enginer know framework）而不是框架使用者（框架的用户）所有的问题，都是靠基础知识来判断问题并解决