知识点列表:URLDNS解析、IP地址浏览器缓存TCP建立连接服务器处理、HTTP请求(HTTP缓存,产生 HTTP报文,请求报文、响应报文)状态码网站处理、MVC后台、数据库请求浏览器渲染(浏览器渲染引起的问题Repaint 和 Reflow、script放置问题+页面加载产生的白屏和FOUC、CSS加载造成阻塞问题)TCP连接结束性能优化
现象:用户体验、网页太卡打不开(卡、慢)、服务器带宽流量(成本)、服务器压力
从哪处理:JS加载顺序、浏览器加载-白屏和FOUC、CSS阻塞、函数节流+防抖、减少HTTP请求+HTPP缓存机制、使用CDN
参考链接:
display:none和visibility:hidden两者的区别
从URL输入到页面展现到底发生什么?
浏览器输入 URL 后发生了什么?
低端外包程序员:前端面试题---一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
面试题:在浏览器输入“google.com”后都发生了什么?
「真香警告」重学TCP/IP 协议 与三次握手
关于三次握手与四次挥手面试官想考我们什么?--- 不看后悔系列
Fundebug:一文搞懂TCP与UDP的区别
方应杭:「每日一题」你是如何做性能优化的?
方应杭:「每日一题」什么是 Web 服务器(server)
图解浏览器的基本工作原理
浏览器的渲染:过程与原理
JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制
当考虑网页首屏加速的时候,我们在考虑什么
css加载会造成阻塞吗? - 掘金
Fundebug:经典面试题:浏览器是怎样解析CSS的?
从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
HTTP协议
为什么HTTPS比HTTP更安全?
漫画:什么是 HTTPS 协议?
前端基础篇之HTTP协议
1、URL/URI 分别是什么
(1)URL是什么
随意在浏览器里输入一个网址,比如 baidu.com 你会看到什么?看到百度的搜索页面。
URL:(Uniform Resource Location 统一资源定位符) 通过描述资源的位置来描述资源。 就是我们使用浏览器等访问web页面的时候需要输入的地址,俗称“网址”,用于定位互联网上的资源,如图片、文件或css文件等,需要通过互联网中的URL进行对其的定位。如http://www.baidu.com
(2)URI是更通用的资源标识符,URL是它的一个子集。URI由两个主要的子集构成,
URI:Uniform Resource Identifier 统一资源标识符
(3)URN:通过名字来识别资源,和位置无关
3、URL由什么组成
协议、主机名、域名、默认端口号、资源路径、参数或其他相关信息
http://samaritan89.github.io/f2e/js/ajax.html
//通用的URL由9部分组成
://:@:/;?#
://.://
以下几部分具体解释:
4、常见的协议http、https、ftp、file协议
关于HTTP协议的相关文章会另外写一篇:
1、搞清楚以下几个问题
(1)域名是什么
对于http://http://wangxiaoqin.com:8080/blog( :8080可以省略),或者 www.http://baidu.com
(加粗的均为域名)
(2)IP是什么
每个处于互联网的设备都有IP地址,形如:192.168.0.1 ,没有IP地址,就无法找到你。局域网IP和公网IP是有差别的,当你使用同一局域网IP,IP地址就是这个局域网的地址。但如果是公网IP,IP地址是可变的 ,当你家庭或个人上网时,系统会动态分配IP地址给你,当你断网不使用IP地址,这个地址就会释放掉给别人使用。
实践说明:做一个手机页面的开发项目,调试手机,在PC端搭建服务器后测试项目是没问题。在手机上如何测试?即手机和电脑连接同一个WiFi,手机浏览器通过 电脑的ip地址去访问电脑上的服务器。
(3)域名查询(DNS解析)是什么
DNS(Domain Name System,域名系统),简单来说,对URL中的域名解析成IP地址。通过域名解析查找到对应IP地址的过程叫做域名解析(或主机名解析)。官方解释:万维网上作为域名 和 IP地址 相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。域名的作用最后也是要找到IP,为何不直接使用IP?
平时用的网站,IP对应的均为数字,或者一个网站对应众多IP地址,而域名则具有语义化的作用,好识别。
电脑突然上不了网?
—— 关于 DNS连接上网问题解决方法:修改dns为8.8.8.8或者114.114.114.114即能上网8.8.8.8 , 即谷歌提供的一个dns服务器。如打不开http://baidu.com是因为你中间的某个环节出问题,然后http://baidu.com对应的IP找不到,此时可将电脑中的dns服务器直接改成谷歌的服务器,那么就会直接从谷歌的服务器去找该域名下对应IP114.114.114.114 ,权威提供dns的国内服务商结论:从某个有记录的服务器去查找DNS劫持是什么?
比如,黑客攻击某个节点或某根域名服务器(即攻击这里所管理的众多IP地址),如http://baidu.com相对应的百度IP被侵入任意网站的IP,再打开http://baidu.com通过域名解析之后,可能通过ISP dns上查找到任意IP,会得到“真域名 假IP”的假网站,危害巨大 。结论:域名是IP地址的一个伪装的外衣,只是包装得很好看的一个外衣而已
2、复杂的IP寻址过程 ——浏览器如何去通过域名去查询URL对应的IP地址呢?
(1) 从几个缓存和服务器说起,网站第一次对域名DNS解析的流程是这个样的:浏览器缓存 -> 系统缓存 -> 路由器 缓存 -> ISP DNS缓存 -> 递归搜索
说明:开发一个网站,开发过程中,关于开发网站的 HTML、CSS 等文件资料均在本地,而我想要写一个线上的域名,如 http://wangxiaoqin.com。想要修改,去开启一个服务器去测试,不想找到远程服务器的东西,而是找到电脑中的文件。此时,我们可以在 系统缓存 中找到 http://wangxiaoqin.com对应的IP地址,打开html文件,所有的请求资源如果是 http://wangxiaoqin.com则将会自动转向相对应的IP地址。
在浏览器输入 URL 地址,通过 DNS 服务器解析获得对应IP地址(经过一段复杂的 IP 寻址的过程:DNS 查询),浏览器将 IP 地址打在协议上,同时请求参数也会在协议搭载,然后一并发送给对应的服务器。浏览器可以向 IP 地址发送请求
HTTP 请求分为三个部分:TCP 三次握手、HTTP请求、响应信息、关闭 TCP 连接
在客户端发送数据之前,会发起 TCP 三次握手 用来同步客户端和服务端的序列号和确认号,并交换 TCP 窗口大小信息。
“三次握手”的目的: 为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误。——谢希仁著《计算机网络》中讲
TCP 三次握手结束后,开始发送 HTTP 请求报文。
(1)请求报文
在浏览器上输入URL,浏览器随即发送请求,之后做DNS的查询找到对应服务器。那么,请求在网络传输中是一种什么样的格式?即为请求报文
请求报文由请求行(request line)、请求头部(header)、请求体三个部分组成,如下图所示:
a、请求行
POST /chapter17/user.html HTTP/1.1
请求行,包含请求方法、URL 、协议版本
b、请求头
请求头,包含请求的附加信息,由 关键字/值 对组成,每行一对,关键字和值用英文冒号 “:”分隔。
请求头部通知服务器有关于客户端请求的信息。它包含许多有关的客户端环境和请求正文的有用信息。其中比如:Host,表示主机名,虚拟主机;Connection,HTTP/1.1 增加的,使用 keepalive,即持久连接,一个连接可以发多个请求;User-Agent,请求发出者;兼容性以及定制化需求。c、请求体
请求体,可以承载多个请求参数的数据,包含回车符、换行符和请求数据,并不是所有请求都具有请求数据。
name=tom&password=1234&realName=tomson
上面代码,承载着 name、password、realName 三个请求参数。
web服务器处理完请求后,交至网站(如 http:// wagxiaoqin.com ),运行代码文件,后台执行。
1、先了解这里涉及的专有名词
(1)服务器(Server)
服务器,是一台安装系统的机器,就是一台主机。或者是一种软件程序,提供一些对外服务,如邮件服务、数据库服务、网页服务等,每台服务器上都会安装处理请求的应用 —— web server。而我们通常说的则是后者,可以全天时段提供服务的软件程序。常见的系统:Linux(无图形界面)、windows sever2012(可以安装一些服务端的软件,有图形界面)
(2)web服务器(担任管控的角色)
从字面上理解,就是为web提供服务的服务器(Server)。对于不同用户发送的请求,会结合配置文件,把不同请求委托给服务器上处理相应请求的程序进行处理(例如 CGI 脚本,JSP 脚本,servlets,ASP 脚本,服务器端 JavaScript,或者一些其它的服务器端技术等),然后返回后台程序处理产生的结果作为响应。
比如我们访问的https://www.baidu.com 就是百度提供的服务器(Server),对外提供的服务一般是 HTTP服务,所以我们的URL都会出现 https:// 开头。
常见的web服务器:Apache、Nginx、IIS、Lighttpd 作用:web服务器,用于接收用户的Request交给网站相关代码,或者接收请求反向代理到其他web服务器,即管理的入口
白色区域为服务器系统机器上安装了Nginx 的web服务器,如访问 http://jscode.me或 http://jirengu.com或http://hungerworks.com(三个网站请求,网站地址和域名都不一样,但都是在同一个服务器里)通过域名解析从服务器获得了同一个IP地址:202.112.230.14 ,即打开这三个网站均能找到这台机器,请求被机器中的web服务器—— Nginx 接管,通过配置文件将请求的网站匹配相应的文件夹代码,运行返回效果。
凡是通过http方式获取的网站,都是通过web服务器做一个管控。即使在本地搭建网站也是需要搭建web服务器。
(3)后端语言
ruby、nodejs、python。。。等
2、MVC模式模型(model)视图(view)控制器(controller)
rails+ruby做范例比如,浏览器访问 http://wangxiaoqin.com/users, 交至/users 这个网站后代码运行,匹配路由,发现有/users之后,交给控制器(一个代码文件);它会向模型(可看成文件)发送调用查找所有用户请求,模型从数据库中进行查找,数据库返回之后,控制器获取模型所提供user.all 的接口数据,控制器获取所有用户数据;将数据添置到视图(可看成模板)中生成一个html,发回浏览器,即能看到有所有用户的html页面。前端对应则是视图(htmlcss框架等) 3、HTTP响应报文(含状态码)
响应报文由响应行(request line)、响应头部(header)、响应主体三个部分组成。
(1) 响应行包含:协议版本、状态码、状态码描述(原因短语)
状态码规则如下:
1xx:指示信息--表示请求已接收,继续处理。
2xx:成功--表示请求已被成功接收、理解、接受。
3xx:网页重定向--要完成请求必须进行更进一步的操作。
4xx:客户端错误--请求有语法错误或请求无法实现。404
5xx:服务器端错误--服务器未能实现合法的请求。
(2) 响应头部包含 响应报文的附加信息,由 属性/值 对组成
(3) 响应主体包含 回车符、换行符和 响应返回数据,并不是所有响应报文都有响应数据
服务器、网站后台处理之后,浏览器拿到响应文本,生成HTML页面发回浏览器,
当解析到 HTML 字符串 被浏览器接收后被一句句读取解析;
当解析到 link标签后,如某个标签对应的 CSS 地址,重新发送请求获取CSS代码;
当解析到 script 标签后,向如src的地址向服务器发送请求,获取JS并执行代码;
当解析到img标签后,发送请求获取图片资源。
即第一次获取html时,浏览器会重新把html里的链接和相关资源再请求一次,审查元素里有众多 Requests 。
1、浏览器解析渲染页面5步骤(让用户看见页面)
(1)解析 HTML 标签, 构建 DOM 树
(2)解析 CSS 标签, 构建 CSSOM 树
(3)把 DOM 和 CSSOM 组合成 渲染树 (render tree)
(4)在渲染树的基础上进行布局, 计算每个节点的几何结构
(5)根据计算好的信息把每个节点绘制到屏幕上 (painting)
1.根据 HTML 解析 DOM 树
根据 HTML 的内容,将标签按照结构解析成为 DOM 树,DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点,再构建下一个兄弟节点。
在读取 HTML 文档,构建 DOM 树的过程中,若遇到 script 标签,则 DOM 树的构建会暂停,直至脚本执行完毕。
2.根据 CSS 解析生成 CSS 规则树
解析 CSS 规则树时 js 执行将暂停,直至 CSS 规则树就绪。
浏览器在 CSS 规则树生成之前不会进行渲染。
3.结合 DOM 树和 CSS 规则树,生成渲染树
DOM 树和 CSS 规则树全部准备好了以后,浏览器才会开始构建渲染树。
精简 CSS 并可以加快 CSS 规则树的构建,从而加快页面响应速度。
4.根据渲染树计算每一个节点的信息(布局)布局:通过渲染树中渲染对象的信息,计算出每一个渲染对象的位置和尺寸回流:在布局完成后,发现了某个部分发生了变化影响了布局,那就需要倒回去重新渲染。
5.根据计算好的信息绘制页面
绘制阶段,系统会遍历呈现树,并调用呈现器的“paint”方法,将呈现器的内容显示在屏幕上。重绘:某个元素的背景颜色,文字颜色发生改变等,不影响元素周围或内部布局的属性,将只会引起浏览器的重绘。回流:某个元素的尺寸发生了变化,则需重新计算渲染树,重新渲染。
六、前端性能优化
个人认为在页面展现之后,还有前端优化的工作需要处理。关于这类的文章,实际场景非常细碎,会另外写一篇,感兴趣的同学请自行关注哦~~