网站工作原理,你搞懂了吗?

  • 网站工作原理
    • 输入网站地址,按下回车会发生啥?
      • 1. DNS解析
      • 2. TCP连接
        • 2.1 TCP介绍
      • 3. 发送HTTP请求
        • 3.1 HTTPS协议
        • 3.2 HTTPS过程
        • 3.3 HTTP请求
      • 4.服务器处理请求并返回Http报文
      • 5.浏览器解析渲染页面
      • 6.连接结束
    • 影响高性能网站的几个因素

网站工作原理

Web十分简单,至少用起来是这样!其实构成万维网的系统相当复杂,大多数情况下我们可以简单的说web就是相互链接的文档的集合。在学习web的工程中,我们经常会提到web服务器、动态和静态内容、HTML、JSON与其他内容,你是否对它们如何进行协调工作有一定的好奇,这篇文章带你了解一下Web 的工作方式及原理。

大家所看到的Web网站通常由大量的系统构成,这些系统协通过工作,营造出单个系统的假象。如果某个系统出现问题的话,会直接导致Web彻底崩溃。

输入网站地址,按下回车会发生啥?

1. DNS解析

计算机需要找到IP地址,通常我们在访问的时候输入的是域名,需要将域名转为ip地址。通常使用的是DNS域名解析服务[它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网]。

  • 所有连接在互联网上的计算机至少配置了一个DNS服务器,在浏览器准备连接到网站之前,必须等待联系ISP的DNS服务器,以获取正确的IP地址。一般域名托管在不错的云服务提供商,速度都挺快的。

  • DNS 优化

    • DNS存在着多级缓存,从离浏览器的距离排序的话,有以下几种: 浏览器缓存,系统缓存,路由器缓存,IPS服务器缓存,根域名服务器缓存,顶级域名服务器缓存,主域名服务器缓存。
    • 在你的chrome浏览器中输入:chrome://dns/,你可以看到chrome浏览器的DNS缓存。
    • 系统缓存:主要存在/etc/hosts(Linux系统)中:
  • DNS负载均衡

    • DNS可以返回一个合适的机器的IP给用户,例如可以根据每台机器的负载量,该机器离用户地理位置的距离等等,这种过程就是DNS负载均衡,又叫做DNS重定向。
    • CDN(Content Delivery Network)就是利用DNS的重定向技术,DNS服务器会返回一个跟用户最接近的点的IP地址给用户,CDN节点的服务器负责响应用户的请求,提供所需的内容。

就以上图为例,上图是ping www.baidu.com 得到的ip地址,首先在本地域名服务器中查询IP地址,如果没有找到的情况下,本地域名服务器会向根域名服务器发送一个请求,如果根域名服务器也不存在该域名时,本地域名会向com顶级域名服务器发送一个请求,依次类推下去。直到最后本地域名服务器得到baidu的IP地址并把它缓存到本地,供下次查询使用。从上述过程中,可以看出网址的解析是一个从右向左的过程: com -> baidu.com ->www.google.com。

那么大家都会问根域名服务器呢?其实真正的域名服务器是www.baidu.com. ,从上图就可以看出来,这个.对应的就是根域名服务器,默认情况下所有的网址的最后一位都是.,既然是默认情况下,为了方便用户,通常都会省略,浏览器在请求DNS的时候会自动加上,所有网址真正的解析过程为: . -> .com -> baidu.com. -> www.baidu.com.。

2. TCP连接

TCP网络协议是当今互联网所用的两个关键协议之一,另一个是UDP。简单来说,TCP是可靠的,UDP不是。

2.1 TCP介绍

TCP 使用IP来传送数据包及对其进行路由,但也保证了传送过程和数据包的顺序。从开发者的角度来说一旦建立 了TCP连接,从一端发送的数据包就保证能到达另一端。为了实现这一点,TCP采用了基于传送数据量的序列码(sequence number)的概念。这部分信息会被路由器忽略,只有连接两端的计算机才会用到。这样,我们就能保持状态,只需在两个传送端点上而非所有的路由器上都保持。采用了序列码,系统就能判定是否数据丢失。

3. 发送HTTP请求

3.1 HTTPS协议

我不知道把HTTPS放在这个部分是否合适。HTTPS报文包裹在TCP报文中发送的,服务器端收到TCP报文时会解包提取出HTTP报文。但是这个过程中有一定的风险,HTTP报文是明文,如果中间被截取的话就存在一些信息泄露的风险。那么在进入TCP报文之前做一次加密就可以解决这个问题。HTTPS协议的本质就是HTTP+SSL(或TLS)。在HTTP报文进入TCP报文之前,先使用SSL对HTTP报文进行加密。从网络的层级结构看它位于HTTP协议与TCP协议之间。

3.2 HTTPS过程

HTTPS在运输数据之前需要客户端与服务器进行一个握手(TLS/SSL握手),在握手过程中将确立加密传输数据的密码信息。TLS/SSL使用了非对称加密,对称加密以及hash等。具体过程。具体过程参考【http://www.ruanyifeng.com/blog/2014/09/illustration-ssl.html】,HTTPS相对于HTTP,虽然提供了安全保证,但是会带来一些时间上的损耗,比如握手和加密等过程,是否需要使用HTTPS需要根据在安全与性能方面做出权衡。

3.3 HTTP请求

主要发生在客户端。发送HTTP请求的过程就是构建HTTP请求的报文并通过TCP协议发送到服务器指定端口(HTTP协议80/8080,HTTPS协议443)。HTTP请求报文就是由:请求行,请求报头,请求正文组成。

4.服务器处理请求并返回Http报文

。后端从在固定的端口接收到TCP报文开始,这一部分对应于编程语言中的socket。它会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装成HTTP Request对象,供上层使用。这一部分工作一般是由Web服务器去进行,经常使用的Web服务器有Tomcat, Jetty和Netty等等。

HTTP响应报文也是由三部分组成: 状态码, 响应报头响应报文

5.浏览器解析渲染页面

浏览器在收到HTML,CSS,JS文件后,它是如何把页面呈现到屏幕上的?下图对应的就是WebKit渲染的过程。

浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其位置和大小等,这个过程称为relow;当盒模型的位置,大小以及其他属性,如颜色,字体,等确定下来之后,浏览器便开始绘制内容,这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的,尤其是在移动设备上,它会破坏用户体验,有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始。但是又存在某些任务比较耗时,如IO读写等,所以需要一种机制可以先执行排在后面的任务,这就是:同步任务(synchronous)和异步任务(asynchronous)。JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务,异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件;脚本运行时先依次运行执行栈,然后会从任务队列里提取事件,运行任务队列中的任务,这个过程是不断重复的,所以又叫做事件循环(Event loop)。

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

6.连接结束

影响高性能网站的几个因素

  • 浏览器会影响网站加载的过程,包括请求文件的次序、渲染页面的方式

    • 浏览器也会收到操作系统和硬件的影响,如果在访问过程中电脑顿住了,其实性能再高的服务器也无济于事。
  • DNS提供了进行负载均衡和提高网站直观速度的简便途径。
  • Web运行在TCP上,每个浏览器和服务器都使用TCP协议,了解TCP协议如何工作,以及这些它提供的有用的保证所进行的过程,可以最大限度的利用资源,并将开销控制到最小。
  • 服务器自身:大多数Linux发行版上自带的Apache服务器在CPU和内存的使用上,效率不太高。但是它能够工作,并且提供大量的文档和支持。如果你需要为静态文件设计高速的小型服务器,且服务器占用资源少,可以考虑Nginx。
  • 开发网站的编程语言:不同的语言和框架有不同的性能特征。
  • 数据库:敲定了编程语言后,就看数据库了。数据库是到目前为止所有web应用中最慢的部分了,尽管实际中能快速运行。
  • 缓存技术:各个网站多少都会遇到各种形式的缓存,但根据经验来看很少有人去配置缓存。通常,服务器或者应用都会先去缓存中查看,然后再进行开销很大的数据库调用或者内容生成。所以一般缓存能极大的提高性能。
  • 还有一些硬件上的东西:比如服务器的硬件和可用带宽等。

网站工作原理,你搞懂了吗?相关推荐

  1. php service原理,轻松搞懂WebService工作原理

    用更简单的方式给大家谈谈WebService,让你更快更容易理解,希望对初学者有所帮助. WebService是基于网络的.分布式的模块化组件. 我们直接来看WebService的一个简易工作流程: ...

  2. 猿创征文|在工作中彻底搞懂原型和原型链的原理

    前言 在前端开发过程中,涉及到JS原理相关的内容也就是常用的几大模块,不仅常用而且很重要,但是涉及到原理的话会有点难懂,尤其是对JS接触不太久的开发者来讲,甚至工作好几年的开发者也只是在平时开发中知道 ...

  3. 链接聚合是将一组物理接口_500字描述华为VLAN聚合工作原理 你看懂了吗?

    VLAN聚合的工作过程和通行情况是如何的呢? 工作原理如下: 和普通VLAN都有一个三层逻辑接口和若干物理接口,VLAN聚合定义的Super-VLAN和Sub-VLAN比较特殊: Sub-VLAN:只 ...

  4. 前端都该懂的浏览器工作原理,你懂了吗?

    前言 在我们面试过程中,面试官经常会问到这么一个问题,那就是从在浏览器地址栏中输入URL到页面显示,浏览器到底发生了什么?这个问题看起来是老生常谈,但是这个问题回答的好坏,确实可以很好的反映出面试者知 ...

  5. 容器原理(搞懂 layerID,diffID,chainID,cache-id 是什么)

    总览 镜像目录及文件说明 /var/lib/docker/image/overlay2 目录 distribution 目录 diffid-by-digest 保存了digest(layerID)-& ...

  6. 容器原理(搞懂 layerID,diffID,chainID,cache-id)

    文章目录 参考 总览 镜像目录及文件说明 镜像 Repository Image Layer 容器[#](https://www.cnblogs.com/koktlzz/p/14365025.html ...

  7. 2023最新全网素材解析网站工作原理,附带成品。

    一.原理分析 现在各大网站的机制和bug都比较完善了,所以没了早些年那些直接绕过会员机制下载VIP素材的,只能通过开通目标站的会员来进行下载了,所以也叫做代下,也就是说,通过程序来模拟下载,然后再把下 ...

  8. 从原理上搞懂如何设置线程池参数大小?

    我们在使用线程池的时候,会有两个疑问点: 线程池的线程数量设置过多会导致线程竞争激烈 如果线程数量设置过少的话,还会导致系统无法充分利用计算机资源 那么如何设置才不会影响系统性能呢? 其实线程池的设置 ...

  9. springaop事务逻辑原理_搞懂Spring AOP,这一篇就够了

    看了这篇文章,如果你还是不会用AOP来写程序,请你打我!! =.=||| 引言 Spring AOP是一个对AOP原理的一种实现方式,另外还有其他的AOP实现如AspectJ等. AOP意为面向切面编 ...

最新文章

  1. Nature:微生物培养技术发展迅猛,未来要搞定一切!
  2. C++内存对象大会战
  3. Linux下Git和GitHub使用方法总结(Ubuntu16.04)
  4. H - 数据结构实验之链表九:双向链表
  5. Delphi中TMediaPlayer播放音乐出现no MCI device open的错误的解决方法
  6. 神舟刷蓝天w650dbios_在DOS中给神舟蓝天刷EC和BIOS的通用方法【AMI】
  7. 关于javaswing做的游戏的一点小总结x
  8. 关于类微博的timeline的设计思考
  9. C/C++学校运动会管理系统
  10. 跟着杨中科学习asp.net之javascript
  11. 计算机系统软硬件结构图,计算机系统结构组成.ppt
  12. 读书笔记(穷查理宝典)
  13. android ios 对比 组件_Android和iOS的区别(从开发角度比较)
  14. 英语中与数字有关的表达方式
  15. 少儿学python真的有用吗_如何看待海淀妈妈们认为Python是儿童才学的低端编程?...
  16. 崩坏三 夏日竞猜 7.21 第一场
  17. NLP-基础任务-中文分词算法(1)-基于词典: 机械分词(词典字符串匹配):前向最大匹配、后向最大匹配、双向最大匹配【OOV:基于现有词典,不能进行新词发现处理】
  18. 透视变换--点对应变换
  19. 队列等待之enq: TX - row lock contention
  20. 小程序源码:云开发表情包制作神器微信小程序

热门文章

  1. 贪吃蛇程序(金沙滩51单片机)-启动篇-1(含演示GIF)
  2. 20h2是04服务器操作系统吗,KB5000858:Windows 10,版本 2004 和 20H2 的服务堆栈更新:2021 年 3 月 9 日...
  3. BFC是什么?开启BFC的标志?解决什么问题?
  4. 数据库约束查找的约束_数据库约束的好处,成本和文档
  5. mui- 给图片添加点击查看大图功能
  6. linux下的grub介绍
  7. 80后90后成股市开户主力 网友调侃解套有希望了
  8. 小米 OPPO 屏幕指纹识别技术都升级了,今年就能用到
  9. 第五章:最后一步准备,1.8的Json模型、状态描述机制详解
  10. Python 的诞生与应用