关于网页F12后的世界

一.网站快与慢的标准定义 7/bF0 4~%
在几年前，业内有一个“8秒”原则，也就是一个网站，从输入网址，敲回车起，到网页被显示成功，如果超过8秒，就可认为这个网站速度“太慢”。 Gk)6ljL
而随着中国互联网基础设施的更替与扩展，普通家庭宽带已经从2Mbps升级至10Mbps甚至光纤，8秒定律已经不再适用于现在的中国互联网。而定义 IDp2#qg_
一个网站快慢，得要从“浏览体验”/“访客与服务器的延迟”/"访客带宽"/"服务器带宽"等方面来综合评价。比如一个类似淘宝的商城，在5秒内加载完成， :(i=> ~O
我们依然可以接受他的速度，并觉得比较快。而一个网页，比如只简单的输出"hello!"文本的页面需要3秒钟，我们就觉得这个网站比较慢（输出的内容与页面打开时间的比例太不合理）。 muKjeg'b
F#|mN0op
$~T|v7Y%
二.造成网站慢的原因 —— 善于使用Chrome开发者工具查看网站快慢的源头 nW]T-!
一个网页从请求到显示完成，你的电脑与网站服务器大致需要完成以下几个步骤： "Wy!,RH
1.DNS解析，将域名解析成IP； ~~使用TCP协议完成的那部分，客户端与DNS服务器~~[注意，不是WEB服务器] ~~需要经过三次握手~~（请教了下朋友，DNS默认采用UDP协议，UDP协议不需要三次握手）。 wfM|3GS+.
2.浏览器发出请求到IP[封装域名为主机头]，客户端与WEB服务器需要经过三次握手。 Jy0(g T
3.假如请求是POST，在上面处理完成过前浏览器将不发送POST数据，处理完成后浏览器才发送POST数据。 D`PA@t
4.服务器收到数据，WEB服务器处理请求数据，期间需要运行WEB程序（若非静态网页或静态文件），计算出所有需要显示到网页上的数据。 /[|A(,N}{
5.服务器将网页内容传输到客户端。 _+qtH< F/
6.浏览器获取到数据，开始渲染内容并请求CSS/JS/图片数据。 hD7Lgi-N)W
7.处理CSS数据时，大多浏览器都是异步渲染的，不会阻塞页面。 !-8y;,P
8.处理JS数据时，浏览器会暂缓执行其它JS段/JS文件的内容，直到本次JS程序运行完毕。 jC'Diu4|Q
9.处理图片显示理论上是按HTML输出的源的顺序，一批一批（通常2个一批）请求然后显示。 CMYkxU
10.页面渲染完成，显示在浏览器上。 .;37 e
=]-D_$S~
Chrome开发者工具：是指Chrome为WEB开发人员而打造的一款集成在CHROME浏览器中的WEB军工利器，使用它你不仅可以很方便地调试你的HTML/JS/CSS代码（反正笔者现在做HTML都不用DREAMWAVER了，全身投靠CHROME），而且你还可以使用Network（网络）标签里的功能，来对请求进行抓包分析，甚至在进行WEB优化时，使用它来进行请求/加载/渲染分析，很是方便。 m[A$Sp_"-h
!H`uN
Windows下Chrome开发者工具的启动方式是按下“F12”键，MAC下和LINUX下的请自行百度，笔者不知。在启动CHROME开发者工具后，界面大致如下： K}Lu1:~

图片:QQ截图20130420224026.png

_%<q ZT
f:h<tlob
OZno 3Hn
在这里我们要派上用场的主要是Network工具，你点击过后，里面是什么也没有的（在你刷新页面前）： CjU?3Ag

图片:2.png

N)X51;+
z_87 ;y;=
我们刷新一下看看 `YK#m4gc
是不是就有内容了? s5oU
x-SYfvYY
8&v%>wxR@

图片:3.png

%F]:nk`
Bmi9U
^j7]> I
$!:xjb
把鼠标移动到timeline下面的横条上，是不是可以看到时间花费在每一项上的详细? :SVWi}:Co1
Blocking [阻塞]  ：是指发送请求的同时，如果插件/页面上其它元素有可能会引起阻塞，延迟请求的发出 ^-K ~y
Sending [发送]  ：是指请求和请求数据（包括有POST数据数据时POST请求）的发出， t<znz6
Waiting [等待]  ：是指请求数据发出后，到开始接收页面数据的过程。通常在这种过程中服务器的工作就是计算出网页代码。 ?^ `EI}g
Receiving [接收]  ：是指浏览器接收服务器响应的数据的过程。 B@,#,-=
tnC,1HV0[

图片:4.png

2$?j'i!
$~:|Vj5iZ\
在上述过程中，Blocking/Sending/Waiting/Receiving的任何一环节花费时间过长，都将直接导致网站打开速度的缓慢[理论上一个请求完成的时间为上述所有过程花费时间的总长加上渲染的时间]。 O+o_{t\R
下面详细讲解一下各个环节花费时间过长的原因 I=}R Z9
造成Blocking环节花费时间过长：通常是因为访客浏览器安装了不当插件，或者页面上的各个请求按排得不合理，导致浏览器请求这些元素时执行了延迟。 q#.+P1"U
造成Sending花费时间过长，通常是访客本身上行带宽严重不足（比如在开坑爹的某雷，或者很暴力的某播时），或者服务器入带宽严重堵塞（比如被DDOS公鸡时），就会导致发送数据的过程过长。 q%MLj./?[
造成Waiting花费的时间过长，通常是服务器计算的过程过长导致，而导致服务器计算的过程过长，以多种原因，比如程度写得不当，CMS程序安装的插件过多，CMS读取缓存失败或者根本没缓存机制，CPU计算资源严重不足（比如被HTTP FLOOD 也就是CC公鸡时），硬盘满了或者坏了，页面所对应的程序处理时未采取分段处理输出等等原因。 {_]<mwd
而造成Receiving花费时间过长，通常就是服务器出带宽或者浏览者的入带宽不足导致。如果此环节是导致网站访问体验的最大瓶颈，解决办法就是升级带宽或者优化带宽分配（优化带宽分配的方式请见三）。 -\}Ix>
.0]Odf:@
?4lDoP{
:tBZu%N/N
三.如何解决网页浏览慢 CL"q "
在二中已经粗略地给出了各个环节出现访问瓶颈时的原因排查方式和可能有效的解决方法，此处再粗地讲一下如何解决带宽不足的问题。 r r(UE
如果你是一个不是很缺钱的团队，建议你升级带宽，因为这是最直接有效/立竿见影的方法。如果你跟我一样是个铞丝，把自己网站撸上千百遍折腾都不嫌蛋痛的人，又囊中羞涩，那么这下面的就有可能是你逆袭的天书了。 yx/.4DW1Ua
BY??X=
n}4Lq^$
首先，查看一下网站中各个元素的缓存头，具体方法是点击一个NETWORK工具中的目标请求的URL， A{a`%FAV

图片:5.png

};]f 3
3H@29TrJ+
然后右边出现了这个请求的具体数据，包括Request Headers（请求头），Query String Parammeters（URL请求参数，如果是GET），Form Data（POST数据，如果是POST）和Response Headers（响应头） >A1;!kGE#
此处我们只关心响应头，由于上面的参数们都又臭又长，所以我们得要往下拉 [^A>hs*
r#/Bz5Jb*

图片:6.png

|%5nV=&\
firiYL"=44
看到Response Headers了吧?这里面的Cache-Control就是我们需要用的。 =idZvD
[USE&_RN

图片:7.png

3(>NS?lX
!7aJfs2
IT\ x0b cv
Cache-Cotrol是缓存设置的时长这么久的时间，单位秒， !<j)D_
Expires是缓存到指定的时刻。 73kL>u
D^\2a;[AxA
如上，笔者给自己网站CSS设置的缓存头是10年，在10年里如果浏览的用户的浏览器不出意外，不主动更新缓存，那么他们访问我的网站将不再请求这个CSS，而直接从缓存中调取，就像读本地文件一样。 c9R|0Yn^J
不用担心文件更替或者文件删除的问题，如果文件已经删除了，你大不了页面上不再引用这个文件了。文件更替了，你可以在URL后面设置一个新版本号 Ems0"e

关于网页F12后的世界相关推荐

【网页上视频无法拖动进度条，如何进行加速播放操作以及网页失焦后如何可继续播放】
面对网页视频无法加速时如何进行加速播放遇到一 zhengzhi 刷题任务时 ,发现无法拖动进度条,也没有加速播放并且鼠标一失焦就会自动暂停时,让我乖乖看完是不可能,因此找了一个解决方案快速完成该任务 ...
网站f12怎么查询服务器,网页f12查看服务器
网页f12查看服务器内容精选换一换主机管理的云服务器列表中仅显示以下主机的防护状态:在所选区域购买的华为云主机已接入所选区域的非华为云主机在所选区域购买的华为云主机已接入所选区域的非华为云主机若 ...
php鼠标经过显示文本,jQuery实现鼠标单击网页文字后在文本框显示的方法
这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考 ...
java获取页面标签_java获取网页源代码后，提取标签内容……
java获取网页源代码后,提取标签内容-- 关注:245 答案:2 mip版解决时间 2021-02-01 09:11 提问者咏bù琂败 2021-01-31 13:49 import java ...
thinkpad e440 如何进入BIOS界面，实测开机按F1/F12后失败后的方法
thinkpad e440 如何进入BIOS界面,实测开机按F1/F12后失败后的方法以win10为例,具体步骤如下: 打开设置–更新与安全-恢复-高级启动(立即启动)–疑难解答–高级选项–UEFI ...
比切糕还贵揭秘80后研制世界最快硬盘
切糕比不了最快硬盘一块3万元一块切糕数百元,和切糕大小差不多的硬盘却要3万元!这究竟是什么样的硬盘得这么贵.最近国内报道两位80后创业者研制出世界最快硬盘,高达1500MB/秒的读写速度.每秒I ...
创业、女性、数字化：后COVID-19世界的复苏“铁三角”
整个世界应对新冠病毒COVID-19疫情,已经长达两年多的时间.这期间,许多地方的经济和社会生活都陷入了停滞.不过,生活重启,似乎不再遥不可及了. 每一场危机都有一个终点.今年以来,丹麦.瑞典.挪威. ...
赠书 | “世界互联网教父” 凯文·凯利的 50 条生存建议——全新预言5000 天后的世界...
文中有数据派THU福利哦本文摘编自凯文·凯利著作<5000天后的世界> 在互联网商业化的5000 天后, 社交网络开始"攻城略地", 现在距离社交媒体的兴起又过了50 ...
idm抓取网页视频原理 idm抓取网页视频后怎么提取
对于网页视频的下载,我们可以使用windows端多线程下载工具--Internet Download Manager,通过Internet Download Manager我们可以直接抓取网页视频,i ...

关于网页F12后的世界

关于网页F12后的世界相关推荐

最新文章

热门文章