客户端和浏览器端交互模型

如何做一个网站?
1、买一台服务器,服务器脸上网络之后,会存在一个外网的IP地址,我们把html+css上传到服务器
2、买一个域名
3、进行DNS解析(域名解析)
   www.zhang.cn   220.114.23.45(服务器外网ip地址) 80(服务器端口号)

当用户在自己的浏览器中输入一个网址,到最终看到页面和内容,发生了哪些事情?

服务器的端口号:(0~65535)
  我们的一台服务器上可以发布很多项目,而每个项目都有一个自己对应的房间或者区域,服务器使用端口号
使用端口号来区分具体是那个项目
   一般都把自己的项目发布到80/443这两个项目下


1、通过域名到dns服务器上找到对应的服务器的外网ip和对应的端口号
2、dns服务器找到对应的服务器和房间号
3、在房间中把index.html文件的源代码返回给客户端
4、客户端解析源代码


引擎:
每一个浏览器都有自己的引擎,谷歌浏览器是v8引擎
火狐浏览器是Gecko引擎
ie浏览器是Trident引擎

w3c
是一个无盈利的一个组织(制定咱们开发的规范,HTML HTML5 CSS CSS3)
谷歌是 -webkit-xxx:xxx


谷歌浏览器控制台NetWork这一项,可以看到客户端向服务器端所有的请求以及请求的状态信息等


通过network中观看,我们发现当我们第一次把html源代码请求回来的时候,浏览器开始按照自己的引擎渲染,在渲染的过程中我们
还会出现从新向服务器还会出现从新向服务器请求css/img/js每一次的请求步骤和HTML一模一样,如果请求的资源次数过多,页面打开
的速度和渲染速度就会变慢,所以我们页面优化的方法中,首先要做的就是减少http请求次数

1、css合并一个(内嵌式)
2、js合并成一个 或者采用内嵌式
3、图片合并(雪碧图技术)或者图片延迟加载 (加快第一次打开的速度)
4、Ajax请求和资源文件请求的原理是一样的


URL

http://v.qq.com:80/index.html?name=zhangxiaohuan&age=18#a

http:传输协议
v.qq.com域名
80:端口号
index.html请求资源的文件名
?name=zhangxiaohuan&age=18 URL问号传参
#a锚点定位

传输协议:
 http:超文本传输协议,除了传输文本还可以传输其它的东西,例如:xml
 https:更加安全的http
 ftp:文件传输协议(应用于把项目文件传递到服务器上)

在不指定端口的情况下,每一种协议会有一个默认的端口号
 http默认会找服务器的80端口
 https默认会找443端口
 ftp默认会找21端口 


客户端:发送请求,接收内容解析
服务器:创建服务,监听端口,在当前服务器中接收客户端请求的内容,然后把对应的数据或者内容返回给客户端

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法修养

Atom打造 c/c++编译环境(忙了一个上午)

众所周知 Atom是一款非常酷炫的编辑器。因为它就像上古卷轴一样,玩家可以开发各种dlc补丁,实现自己想要的效果。所以Atom 可以被你改造成自己想要的东西,可...

65370
来自专栏代码小睿

Atom 备份神器 —— Sync Settings

  当 Atom 的扩展越装越多,配置也越来越偏离了系统默认设置时,一旦电脑重装后需要复原开发环境,这将是一件比较头疼的事,但今天发现一个扩展,可以解决这一问题...

299100
来自专栏DeveWork

提升用户体验,微信小程序“授权失败”场景的优雅处理

微信小程序中提供了相关API 让开发者能获取到微信用户的相关信息,在首次去获取的时候会展示一个用户是否同意授权的对话框。Jeff 发现有不少线上的小程序都没有处...

31990
来自专栏极客编程

打包利器webpack

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

10720
来自专栏张戈的专栏

博客文章重新启用评论,附一键填写评论中用户信息代码生成工具

博客关闭评论近一个月的时间,总体的感觉很是安逸,不过看了留言板的反馈,感觉关闭评论对一些真正需要帮助的朋友还是带来了些许不方便,思前考后,决定再次开放评论。 但...

36670
来自专栏Web 开发

ubuntu学习手札——中文设置,源设置等等最基本的

3. 对于类似“哪个源更快”这样的问题,并没有一个标准答案。每个人的网络状况有不同,不同网站的下载速度对会不同。更改完设置之后,在Software Sour...

9310
来自专栏Wordpress专用主机|主题模板|必备插件

腾讯云服务器如何安装宝塔面板

对于很多wordpress爱好者来讲,会优先选择服务器而不是虚拟主机。毕竟服务器在性能以及可控性上很不小的优势。

3.7K100
来自专栏乐百川的学习频道

Visual Studio Code介绍

应该有很多人都知道Atom编辑器吧,它是由Github开发的一个跨平台的编辑器。它使用了跨平台的Electron,用前端技术编写图形界面。一开始我也推荐过这个编...

29950
来自专栏逸鹏说道

webp图片实践之路

最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中。传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显...

53690
来自专栏Web项目聚集地

三周学会小程序第二讲:客户端代码准备和功能详解

通过上一讲大家已经申请了小程序了,这一讲我们主要讲解三部分,小程序开发工具使用,客户端代码准备,和基础的客户端讲解,并且运行第一预览版本。

12620

扫码关注云+社区

领取腾讯云代金券