首先了解一下URL的组成：
从上面的URL可以看出，一个完整的URL包括以下几部分：
1、协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符
2、域名部分：该URL的域名部分为“www.baidu.com”。一个URL中，也可以使用IP地址作为域名使用
3、端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口80
4、虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”
5、文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
6、锚部分：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分
7、参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。
很多大公司面试喜欢问这样一道面试题， 输入URL到看见页面发生了什么？ ,今天我们来总结一下。 简单来说，共有以下几个过程
下面我们来看看具体的细节
输入 www.google.com 网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去 com 顶级域名服务器查找，，如此的类推下去，直到找到IP地址，然后把它记录在本地，供下次使用。大致过程就是 .->.com -> google.com.-> www.google.com. 。 (你可能觉得我多写 .，并木有，这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，既然是默认情况下，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上)
既然已经懂得了解析的具体过程，我们可以看到上述一共经过了N个过程，每个过程有一定的消耗和时间的等待，因此我们得想办法解决一下这个问题！
DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。
在你的chrome浏览器中输入:chrome://dns/，你可以看到chrome浏览器的DNS缓存。
系统缓存主要存在/etc/hosts(Linux系统)中
检查浏览器是否有缓存
通过 Cache-Control 和 Expires 来检查是否命中强缓存，命中则直接取本地磁盘的html（状态码为200 from disk(or memory) cache，内存or磁盘）；
如果没有命中强缓存，则会向服务器发起请求（先进行下一步的TCP连接），服务器通过 Etag 和 Last-Modify 来与服务器确认返回的响应是否被更改（协商缓存），若无更改则返回状态码（304 Not Modified）,浏览器取本地缓存；
若强缓存和协商缓存都没有命中则返回请求结果。
不知道你们有没有注意这样一件事，你访问http://baidu.com的时候，每次响应的并非是同一个服务器（IP地址不同），一般大公司都有成百上千台服务器来支撑访问，假设只有一个服务器，那它的性能和存储量要多大才能支撑这样大量的访问呢？DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是DNS负载均衡
TCP 协议通过三次握手建立连接。
翻译成大白话就是：
为什么是3次？ ：避免 历史 连接，确认客户端发来的请求是这次通信的人。
为什么不是4次？ ：3次够了第四次浪费
建立连接的过程是利用客户服务器模式，假设主机A为客户端，主机B为服务器端。
采用三次握手是为了防止失效的连接请求报文段突然又传送到主机B，因而产生错误。失效的连接请求报文段是指：主机A发出的连接请求没有收到主机B的确认，于是经过一段时间后，主机A又重新向主机B发送连接请求，且建立成功，顺序完成数据传输。考虑这样一种特殊情况，主机A第一次发送的连接请求并没有丢失，而是因为网络节点导致延迟达到主机B，主机B以为是主机A又发起的新连接，于是主机B同意连接，并向主机A发回确认，但是此时主机A根本不会理会，主机B就一直在等待主机A发送数据，导致主机B的资源浪费。
采用两次握手不行，原因就是上面说的失效的连接请求的特殊情况。而在三次握手中， client和server都有一个发syn和收ack的过程， 双方都是发后能收， 表明通信则准备工作OK.
为什么不是四次握手呢？ 大家应该知道通信中著名的蓝军红军约定， 这个例子说明， 通信不可能100%可靠， 而上面的三次握手已经做好了通信的准备工作， 再增加握手， 并不能显著提高可靠性， 而且也没有必要。
第一次握手 ：
客户端发送syn包(Seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认；
第二次握手：
服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（Seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手：
客户端收到服务器的SYN ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。
握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去。
要先申请CA证书，并安装在服务器上（一个文件，配置nginx支持监听443端口开启ssl并设置证书路径）
浏览器发送请求；
网站从浏览器发过来的加密规则中选一组自身也支持的加密算法和hash算法，并向浏览器发送带有公钥的证书，当然证书还包含了很多信息，如网站地址、证书的颁发机构、过期时间等。
浏览器解析证书。
验证证书的合法性。如颁发机构是否合法、证书中的网站地址是否与访问的地址一致，若不合法，则浏览器提示证书不受信任，若合法，浏览器会显示一个小锁头。
若合法，或用户接受了不合法的证书，浏览器会生成一串随机数的密码（即密钥），并用证书中提供的公钥加密。
使用约定好的hash计算握手消息，并使用生成的随机数（即密钥）对消息进行加密，最后将之前生成的所有消息一并发送给网站服务器。
网站服务器解析消息。用已有的私钥将密钥解密出来，然后用密钥解密发过来的握手消息，并验证是否跟浏览器传过来的一致。然后再用密钥加密一段握手消息，发送给浏览器。
浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。这里浏览器与网站互相发送加密的握手消息并验证，目的是为了保证双方都获得了一致的密码，并且可以正常的加密解密数据，为后续真正数据的传输做一次测试。
发送HTTP请求
首先科补一个小知识，HTTP的端口为80/8080，而HTTPS的端口为443
发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口 请求报文由 请求行 ， 请求抱头 ， 请求正文 组成。
请求行
请求行的格式为 Method Request-URL HTTP-Version CRLF eg: GET index.html HTTP/1.1常用的方法有:GET ,POST ,PUT ,DELETE ,OPTIONS ,HEAD 。
常见的请求方法区别
这里主要展示 POST 和 GET 的区别
常见的区别
注意一点你也可以在GET里面藏body，POST里面带参数
重点区别
GET 会产生一个 TCP 数据包，而 POST 会产生两个 TCP 数据包。
详细的说就是：
注意一点，并不是所有的浏览器都会发送两次数据包，Firefox就发送一次
请求报头
请求报头允许客户端向服务器传递请求的附加信息和客户端自身的信息。
从图中可以看出，请求报头中使用了Accept, Accept-Encoding, Accept-Language, Cache-Control, Connection, Cookie等字段。Accept用于指定客户端用于接受哪些类型的信息，Accept-Encoding与Accept类似，它用于指定接受的编码方式。Connection设置为Keep-alive用于告诉客户端本次HTTP请求结束之后并不需要关闭TCP连接，这样可以使下次HTTP请求使用相同的TCP通道，节省TCP连接建立的时间。
请求正文
当使用POST, PUT等方法时，通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。在请求包头中有一些与请求正文相关的信息，例如: 现在的Web应用通常采用Rest架构，请求的数据格式一般为json。这时就需要设置 Content-Type: application/json 。
更重要的事情-HTTP缓存
HTTP属于客户端缓存，我们常认为浏览器有一个缓存数据库，用来保存一些静态文件，下面我们分为以下几个方面来简单介绍HTTP缓存
缓存的规则
缓存规则分为 强制缓存 和 协商缓存
强制缓存
当缓存数据库中有客户端需要的数据，客户端直接将数据从其中拿出来使用（如果数据未失效），当缓存服务器没有需要的数据时，客户端才会向服务端请求。
又称对比缓存。客户端会先从缓存数据库拿到一个缓存的标识，然后向服务端验证标识是否失效，如果没有失效服务端会返回304，这样客户端可以直接去缓存数据库拿出数据，如果失效，服务端会返回新的数据
强制缓存
对于强制缓存，服务器响应的header中会用两个字段来表明——Expires和Cache-Control。
Expires
Exprires的值为服务端返回的数据到期时间。当再次请求时的请求时间小于返回的此时间，则直接使用缓存数据。但由于服务端时间和客户端时间可能有误差，这也将导致缓存命中的误差，另一方面，Expires是HTTP1.0的产物，故现在大多数使用Cache-Control替代。
Cache-Control
Cache-Control有很多属性，不同的属性代表的意义也不同。
协商缓存
协商缓存需要进行对比判断是否可以使用缓存。浏览器第一次请求数据时，服务器会将缓存标识与数据一起响应给客户端，客户端将它们备份至缓存中。再次请求时，客户端会将缓存中的标识发送给服务器，服务器根据此标识判断。若未失效，返回304状态码，浏览器拿到此状态码就可以直接使用缓存数据了。
对于协商缓存来说，缓存标识我们需要着重理解一下，下面我们将着重介绍它的两种缓存方案。
Last-Modified
Last-Modified：服务器在响应请求时，会告诉浏览器资源的最后修改时间。
从字面上看，就是说：从某个时间节点算起，是否文件被修改了
这两个的区别是一个是修改了才下载一个是没修改才下载。
Last-Modified 说好却也不是特别好，因为如果在服务器上，一个资源被修改了，但其实际内容根本没发生改变，会因为Last-Modified时间匹配不上而返回了整个实体给客户端（即使客户端缓存里有个一模一样的资源）。为了解决这个问题，HTTP1.1推出了Etag。
Etag
Etag：服务器响应请求时，通过此字段告诉浏览器当前资源在服务器生成的唯一标识（生成规则由服务器决定）
但是实际应用中由于Etag的计算是使用算法来得出的，而算法会占用服务端计算的资源，所有服务端的资源都是宝贵的，所以就很少使用Etag了。
缓存的优点
不同刷新的请求执行过程
浏览器地址栏中写入URL，回车
F5
Ctrl+F5
服务器处理请求并返回HTTP报文
它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。这一部分工作一般是由Web服务器去进行，我使用过的Web服务器有Tomcat, Nginx和Apache等等 HTTP报文也分成三份， 状态码 ， 响应报头 和 响应报文
状态码
状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:
平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500
常见状态码区别
200 成功
请求成功，通常服务器提供了需要的资源。
204 无内容
服务器成功处理了请求，但没有返回任何内容。
301 永久移动
请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 临时移动
服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
304 未修改
自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
400 错误请求
服务器不理解请求的语法。
401 未授权
请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 禁止
服务器拒绝请求。
404 未找到
服务器找不到请求的网页。
422 无法处理
请求格式正确，但是由于含有语义错误，无法响应
500 服务器内部错误
服务器遇到错误，无法完成请求。
响应报头
常见的响应报头字段有: Server, Connection...。
响应报文
你从服务器请求的HTML,CSS,JS文件就放在这里面
就是 Webkit 解析渲染页面的过程。
这个过程涉及两个比较重要的概念 回流 和 重绘 ，DOM结点都是以盒模型形式存在，需要浏览器去计算位置和宽度等，这个过程就是回流。等到页面的宽高，大小，颜色等属性确定下来后，浏览器开始绘制内容，这个过程叫做重绘。浏览器刚打开页面一定要经过这两个过程的，但是这个过程非常非常非常消耗性能，所以我们应该尽量减少页面的回流和重绘
这个过程中可能会有dom操作、ajax发起的http网络请求等。
web-socket、ajax等，这个过程通常是为了获取数据
setTimeout、setInterval、Promise等宏任务、微任务队列
当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
会导致回流的操作：
一些常用且会导致回流的属性和方法：
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
JS的解析是由浏览器的JS引擎完成的。由于JavaScript是单线程运行，也就是说一个时间只能干一件事，干这件事情时其他事情都有排队，但是有些人物比较耗时（例如IO操作），所以将任务分为 同步任务 和 异步任务 ，所有的同步任务放在主线程上执行，形成执行栈，而异步任务等待，当执行栈被清空时才去看看异步任务有没有东西要搞，有再提取到主线程执行，这样往复循环（冤冤相报何时了，阿弥陀佛），就形成了Event Loop事件循环，下面来看看大人物
先看一段代码
结果我想大家都应该知道。主要来介绍JavaScript的解析，至于Promise等下一节再说
JavaScript是一门单线程语言，尽管H5中提出了 Web-Worker ，能够模拟实现多线程，但本质上还是单线程，说它是多线程就是扯淡。
既然是单线程，每个事件的执行就要有顺序，比如你去银行取钱，前面的人在进行，后面的就得等待，要是前面的人弄个一两个小时，估计后面的人都疯了，因此，浏览器的JS引擎处理JavaScript时分为 同步任务 和 异步任务
这张图我们可以清楚看到
js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。 估计看完这些你对事件循环有一定的了解，但是事实上我们看对的没这么简单，通常我们会看到Promise，setTimeout，process.nextTick（），这个时候你和我就懵逼。
不同任务会进入不同的任务队列来执行。 JS引擎开始工作后，先在宏任务中开始第一次循环（ script里面先执行，不过我喜欢把它拎出来，直接称其进入执行栈 ），当主线程执行栈全部任务被清空后去微任务看看，如果有等待执行的任务，执行全部的微任务（其实将其回调函数推入执行栈来执行），再去宏任务找最先进入队列的任务执行，执行这个任务后再去主线程执行任务（例如执行```console.log("hello world")这种任务），执行栈被清空后再去微任务，这样往复循环（冤冤相报何时了）
下面来看一段代码
我们看看它的执行情况
具体的执行过程大致就是这样。
问题一：什么是网页的前端和后端开发 当然他们说的也不专业,前端应该是指前台的设计,包括动画制作,图像处理,文字编辑,版面设计等,需要掌握Dreamweaver,Flash,Fireworks,Photoshop,Freehand等工具.
后端开发应是指后台程序设计,包括数据库设计,动态代码编写,一般需要掌握下面几种语言和数据库:ACCESS,SQL,HTML,ASP,PHP,JSP,.Net,VBscript 或Javascript.
如果你是专门搞网页的话,你还需要掌握AJAX技术,XML,CSS等,这些都是必需的.
祝你下次面试成功.
问题二：互联网前端开发和后端开发是什么？有什么区别吗 能举个例子不？ 前端开发主要是静态用户界面加上一些动态效果，不涉及数据逻辑！例如：一个登陆页面： 前端开发只要做好静态页面部分 ，加上鼠标移入输入框、移出输入框的颜色变化；但是输入用户名、密码 后登录系统的话要连接数据库，这个就需要后台开发做逻辑处理了！
问题三：到底什么是前端，后端，后台 前端是浏览器呈现的部分（美工设计好的网站图片转换成网页html格式。），相对于前端，后台你可以理解为服务器端(即后端)专门处理、读取、存储数据库数据的部分程序。
问题四：网站什么的要分前端和后端的？是什么意思？ 前端 - 通常是针对浏览器而开发的，是在浏览器端运行的程序，而后端 - 针对的是服务器，准确的来说应该是服务器端开发。前端开发偏向于用户体验，比较直观，服务器端开发偏向于性能。两者结合起来，是比较吃香的，可以称之为Web开发，偏向于编程。而PS，可以看成是视觉设计方面的职能。
工资的话很难说，一般是服务器端开发高点。另外还要看公司，如果一个公司重视前端开发，那么这个岗位的待遇不会比服务器端开发的人低。
培训的话，我知道有个国信安还不错，你可以去看看。
问题五：什么是前端，中端，后端营运 网站是依赖于互联网存在的，只有在拥有网络的情况下才可以在线查看相关的站点、网页等；不同的网站会分为前端与后端。
网站一般展现给大众的则是页面信息，这个分为前端；支撑前端展现的则是网站后端，这样的被称为程序，代码类信息。
一、前端
在互联网上网民第一眼看到的则是网站内不同的页面，或是分支点信息页面等。这些都总称为前端，再者则是一些页面的框架分配、图片、文字、视频、语音等整体布局，以设计、展示为准。
二、后端
这一类的信息，网民第一眼是看不到的，或是说只有一些专业的人员才能大致看到是哪一个语言编写的、用什么方式进行创建的、怎么进行继续改写或优化网站比较好的。
网站分为也可以分为前台、后台，也就是说前面是展示类的设计：以图、文等视觉为主的界面；后台以软类技能或计算机语言进行的控制的；在一个网站展现给大众前，是由后台提前创建好、编辑好再向互联网提交后才能展现给大众的。
在前期后端创建完成后，再由前端展现，同时由前端赢得潜在顾客、精准顾客的认可；同时后端是长期需要持续进行的，两者共同配合进行才能让一个网站走的更长久、在网络上拥有一个好的排名。
问题六：求解，什么是前端系统，和后端系统，求通俗点的解释？？ 对于一些比较安全性要求较高、或者较复杂的系统，一般会分为前端和后端。
前端系统：一般只是操作界面，它不会直接访问核心数据库。而是通过调用后端系统的服务，完成业务处理。（类似Web控制台、自助查询终端、手机APP等）
后端系统：完成核心交易处理的系统。它具备业务处理逻辑、并操作核心数据库。以联机接口的形式为外系统提供服务。（如：卡系统、营帐系统、认证系统等）
问题七：到底什么是前端、后端、后台啊? 前端：
你所看到的网页页面，包括控件布局，色调，字体，控件响应等等，技术层面上前端=HTML+CSS+JAVASCRIPT
后端就是网站的逻辑部分，主要涉及数据库，动态语言如PHP、ASP、JSP等
后台一般指的是管理员操作模块，包括对网站内容的更新、注册会员管理等等，是网站的一个子模块
问题八：什么是前端、什么是后端 前端是实现页面的效果，布局，样式。而后台是实现它数据的交互，比如前端做出来，是一个页面，能有各种点击的那些效果，而后端则要把它们各个页面的数据传上去，传到服务器上面，还有比如一个页面被访问点击了多少次，都是由后端负责做的
问题九：前端和后端到底是什么意思 前端:前端对于网站来说，通常是指网站的前台部分，包括网站的表现层和结构层。
后端:后端更多的是与数据库进行交互以处理相应的业务逻辑。
问题十：web前端和后端的区别是什么 前端开发和后端开发的区别在于
1、前端开发主要做的是用户所能看到的前端展示界面
2、后端开发主要做的是逻辑功能等模块，是用户不可见的
3、前端开发用到的技术包括但不限于 html5 css3 javascript jquery
Bootstrap Node.js AngularJs等技术
4、后端开发 以java为例 主要用到的 是包括但不限于Struts spring springmvc Hibernate Http协议 Servlet Tomcat服务器 等技术
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）