1. Chrome查看开发者工具面板,常看的一些数据?

Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。

Sources:断点调试JS。

Network:从发起网页页面请求request后分析HTTP请求后得到的各个请求资源信息(包括状态,资源类型,大小,所用时间等),可以根据这个进行网络性能优化。

Timeline:记录分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能。

Performance:记录JS,CPU执行时间细节,可以录制过程。

Application:记录网站加载的所有资源信息,包括存储数据(Local Storage,Session Storage,IndexedDB,Web SQL,Cookies)、缓存数据、字体、图片、脚本、样式表等。

Security:判断当前页面是否安全。

Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

  1. 一个web页面的访问过程?

用户在浏览器输入url,比如http://sina.com,那么接下来:

①浏览器首先会查询本机的系统来获取主机名对应的IP地址;

②若本机查询不到相应的IP地址,则会发起DNS请求,获取主机名对应的IP地址;

③使用查询到的IP地址,直接访问目标服务器。

首先说说访问目标地址的两种方式:

第一,使用目标IP地址访问。比如你可以直接在浏览器中输入新浪的IP地址:218.30.13.36来直接访问它的主机;

第二,由于IP地址都是一堆数字不方便记忆,于是有了域名这种字符型标识。DNS服务器则完成域名解析的工作,它将你访问的目标域名转换成相应的IP地址。

因此若你的电脑上不了网未必就一定是目标主机的问题,还可能是DNS服务器的故障。所以这种情况下,你能熟知几个常用的IP地址,那么在命令行使用ping一下就能知道问题是否是出现在了DNS服务器上了。比较常用的IP有:百度180.76.76.76,谷歌8.8.8.8或阿里云223.5.5.5

为什么我们不能自己建立一个www.sina.com网站,让全世界的人都访问我的这个网站呢?由以上几步可以看出,因为域名系统的存在,使得我们可以访问目标域名(www.sina.com)的时候,DNS服务器总是解析对应的IP地址(218.30.13.36)。所以若要别人都访问你的“新浪”,则需要将DNS的服务器路径指向你本机所在的IP地址,这显然得新浪愿意才行。

④浏览器发送HTTP请求。

HTTP请求由三部分组成,分别是:请求行、消息报头、请求正文。

⑤从请求消息中获得客户机想访问的主机名。

⑥从请求信息中获取客户机想要访问的web应用。(web应用程序指提供浏览器访问的程序,简称web应用)

⑦从请求信息中获取客户机想要访问的web资源。(web资源,即各种文件,图片,视频,文本等)

⑧读取相应的主机下的web应用,web资源。

⑨用读取到的web资源数据,创建一个HTTP响应。

⑩服务器回送HTTP响应。

HTTP响应也是由三个部分组成,分别是:状态行、消息报头、响应正文。

⑪客户浏览器解析回送的资源,并显示结果。

  1. HTTP协议详解:

HTTP(Hyper Text Transfer Protocol)超文本传输协议,目的是保证浏览器与服务器之间的通信。HTTP的工作方式是客户端与服务器之间的请求-应答协议。是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。

HTTP协议的主要特点概括如下:

①支持客户/服务器模式;

②简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET,POST,PUT.DELETE。每种方法规定了客户与服务器练习的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度快。

③灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

④无连接:无连接的含义是限制每次连接只处理一个请求,服务器处理完客户的请求,并收到客户的应答后,即断开连接。,采用这种方式可以节省传输时间。

⑤无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆功能。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

  1. Get与Post区别?

HTTP是基于TCP/IP的关于数据如何在万维网中通讯的协议。HTTP的底层是TCP/IP,所以GET和POST的底层也是TCP/IP,也就是说GET/POST都是TCP链接,他们能做的事是一样的。他们最大的区别是GET产生一个TCP数据包,POST产生两个TCP数据包。具体来说,对于GET请求,浏览器会把http header和data一并发送出去,服务器相应200(返回数据);而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 OK(返回数据)。据研究,在网络环境好的情况下,发一次包的时间和发两次包的时间差别基本上可以无视。而在网络差的情况下,两次包的TCP在验证数据包完整性上,有非常大的有点。另外,并不是多有的浏览器都会在post中发送两次包,Firefox就只发一次。

Get请求的参数写在url中,传输的参数安全性低,传输的数据大小有限制,不超过2KB、GET方式服务器端用request.QueryString获取变量的值。

Post方式将表单内各字段和内容放在HTML HEADER中一起传送到action属性所指定的URL地址,用户看不到这个过程、传送的数据量比较大、传输的数据安全性较高、POST方式在服务器端用Request.Form获取提交的数据。

通常,get用于从服务器获取数据,post用于向服务器提交数据。

页面访问过程及get/post的理解——的更多相关文章

  1. 从输入url到浏览器显示页面的过程

    总体来说有两个大的方面: 一.网络通信连接部分.二.页面渲染展示部分. 细分详细过程: (网络通信) 1.输入url. 2.DNS解析域名. 3.拿到IP地址后,浏览器向服务器建立tcp连接. 4.浏 ...

  2. angularjs中的页面访问权限设置

    11月在赶一个项目,这阵子比较忙,挤挤时间更一篇博客吧,如标题所述说说在ng中页面访问权限控制的问题,水平有限各位看官见谅: 在以往的项目中,前后端常见的配合方式是前端提供页面和ui加一点DuangD ...

  3. 从输入URL到浏览页面的过程

    之前我们已经讨论过浏览器的渲染原理,今天我们来讨论下更广泛的从输入URL到渲染出页面的过程. 1. 查询该URL是否有缓存 如果有,则直接返回,没有的话,下一步 2. 查询URL对应的IP 首先,到 ...

  4. 《Webkit技术内幕》之页面渲染过程

    文章同步到github<Webkit技术内幕>之页面渲染过程 最近拜读了传说中的<Webkit技术内幕>一书,有很大收获,尤其是对页面渲染有了较深的认识.由于功力有限,而且书中 ...

  5. Spring Boot Web项目整合jsp页面访问

    这个内容就是实操过程中各种访问不了jsp页面,各种尝试后的解决方案吧.可能不是最优的,但是目前能解决项目中的一些问题.之前觉得没有什么问题直接可以操作的,没想到在这部分还是耗时了. 开发工具idea2 ...

  6. 友盟(Swift)-集成、统计用户数量、具体页面访问数量、具体按钮点击数量

    什么是友盟.有什么用? 这些傻瓜问题这里就不解释了,可以自己百度去. 友盟提供的文档和demo都是oc的,这里用swift写了一个小demo,在此分享一下. 步骤1:友盟后台注册应用(iOS),拿到a ...

  7. Asp.net 页面访问模板页的属性

    首先 页面需要添加下面一段代码 <%@ MasterType VirtualPath="~/User/User.Master" %> 添加的位置如图 这样就可以在这个页 ...

  8. Session的使用(登录例案+其它页面访问)

    本程序功能是使用Session将用户输入的用户名保存在Session中(登录成功情况下,登录失败不会有Session值),其它页面想访问时会先判断是否有之前存的Session值. 登录Login.ht ...

  9. 自建目录中jsp页面访问servlet路径出错404

    ---恢复内容开始--- 自建目录中jsp页面访问servlet路径出错404 使用eclipse建立的项目,总是会遇到路径问题,比如jsp页面访问servlet,jsp在默认的路径.jsp在自建目录 ...

随机推荐

  1. json文件处理四个函数

    import json # json.dumps(json_dict,ensure_asscii = False)函数的使用,将字典转化为字符串 ensure_ascii=False将Unicode编 ...

  2. redis 和 memache 缓存的区别

    总结一: 1.数据类型 Redis数据类型丰富,支持set list等类型 memcache支持简单数据类型,需要客户端自己处理复杂对象 2.持久性 redis支持数据落地持久化存储 memcache ...

  3. maven私仓搭建——nexus3

    maven私仓搭建——nexus3本文主要介绍maven私仓在windows下的搭建.本文主要参考:http://www.cnblogs.com/bingyeh/p/5913486.html好,下面上 ...

  4. 从Buck-Boost到Flyback

    电源的拓扑有很多种,但是其实我们能够理解一种拓扑,就可以理解其他拓扑结构.因为组成各种拓扑的基本元素是一样的. 对于隔离电源.大家接触最多的电路拓扑应该是 flyback. 但是大家一开始做电源的时候 ...

  5. linux负载均衡杂谈

    假如架构中的主机拥有全量数据集,即使其中一台挂了,也不会导致离线,高可用(负载均衡集群) 假如架构中的各主机只拥有sharing,那我们谓之 分布式集群 硬件ctrix F5-BIG-IP(一台动辄2 ...

  6. vuex中mapState、mapMutations、mapAction的理解

    当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性. // 在单独构建的版本中辅助函数为 Vue ...

  7. Array数组对象方法

    Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果. copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中. entries() 返回数组的可迭 ...

  8. Ubuntu下搜狗输入法乱码(二)

    本文适用于Ubuntu 16.04,造冰箱的大熊猫@cnblogs 2018/10/25 搜狗输入法时不时出现候选字乱码的问题.参照网上所说的修改Fcitx配置中的简体中文和繁体中文转换配置的方法,无 ...

  9. Linux任务计划及周期性任务执行:at、crontab命令

    一.概述 未来的某时间点执行一次某任务:at, batch 周期性运行某任务:crontab 这两个任务的执行结果:会通过邮件发送给用户 (本地终端用户之间的邮件通知) centos 5,6,7默认开 ...

  10. UOJ #455 [UER #8]雪灾与外卖 (贪心、模拟费用流)

    题目链接 http://uoj.ac/contest/47/problem/455 题解 模拟费用流,一个非常神奇的东西. 本题即为WC2019 laofu的讲课中的Problem 8,经典的老鼠进洞 ...