前端性能优化

当浏览器向服务器发送一个 http 请求获取数据会经历如下过程:DNS域名解析 –> 开启一个链接(tcp/ip 三次握手) –> 建立TCP连接后发起http请求 –> 等待(网络延迟 && 服务器的处理时间) –> 下载
大部分 http 请求花费时间是在建立与等待。http 协议建立 TCP/IP 协议之上。

  • css sprites: 将多张图片合成一副单独的图片,使用css的background-position属性辅助放到合适的位置上。降低了下载量,合并的图片比分离的图片小,降低了图片自身的开销(颜色表、格式信息等),现逐渐被 iconfont 和 SVG Sprite 代替。
  • 内联图片: 通过使用 data:URL 模式可以在页面中包含图片而无需额外的请求。也可将图片放到css中作为背景使用,意味着数据可缓存在样式表内部。另base64有损压缩!
  • iconfont: 可以适应任何分辨率,具有比图片更小的容量,更高的灵活性,
  • 样式表放在顶部: 减少页面呈现时间,样式表放在底部会阻塞页面的逐步呈现。
  • 脚本文件放在底部: 因为 script 中可以通过 document.write 修改页面,所以 script 文件放在顶部也会阻塞页面的逐步呈现。
  • 避免css表达式:
  • 把脚本的样式表放在外部:
  • 移除重复脚本: 如果开发中有依赖管理的方法 AMD、CMD,基本不会出现这种状况

开启 gzip 压缩,需要在 CPU 的消耗和数据块的大小之a间进行取舍。

  • 使用 cdn 加速: 地理上分布的web sever 集合,用于更高效的发布内容。基于网络远近来选择给具体用户服务的 web server,缩短了资源传输响应时间。
  • 减少DNS查找: 用于映射主机名和 IP 地址,一般一次解析需要20~120毫秒。
    域名解析 –> 等待ISP返回结果,减少DNS能够减少等待时间,最好将主机名控制在2~4个之间。

  • 避免重定向:

将一个URL重新路由到另一个URL,重定向功能通过301和302两个状态码完成。

用户输入 URL 以后,浏览器首先要查询域名(hostname)对应服务器的 IP 地址,一般需要耗费 20-120 毫秒 时间。

基于性能考虑,ISP、局域网、操作系统、浏览器都会有相应的 DNS 缓存机制。

首次访问、没有相应的 DNS 缓存时,域名越多,查询时间越长。所以应尽量减少域名数量。但基于并行下载考虑,把资源分布到 2 个域名上(最多不超过 4 个)。这是减少 DNS 查询同时保证并行下载的折衷方案。--域名发散?

www.hello.com.
二级域名.一级域名.顶级域名(根节点)

DNS 迭代解析

基于UDP的
跟节点 –> 顶级域名 –> 一级域名 –> …

  • 拿到URL,浏览器寻找本地 DNS 缓存,查看有无对于的 IP 地址,如果没有则向 DNS Server 发送请求,找到对于 IP 地址。
  • 向你 ISP(互联网服务提供商) 的 DNS servers 发送 DNS query,递归查询,直接返回对应的IP地址。

域名发散

域名发散: PC 时代为突破浏览器的域名并发限制,遵循:http 静态资源采用多个子域名。目的是充分利用现代浏览器的多线程并发下载能力。每个浏览器允许每个域名的并行连接数是有限制的。

并发限制原因:

  • 根本原因是以前服务器负载能力差,浏览器对max connections(最大并发数)进行限制。
  • 防止 ddos 攻击。

域名收敛

域名收敛的意思就是建议将静态资源只放在一个域名下面。因地制宜,移动互联网时代通过无线设备访问网站,这种情况下提出域名收敛。
发送http请求,DNS 解析在移动端占据大部分时间。

 

原文链接:https://www.cnblogs.com/lixuekui/p/8670167.html

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/16165

(0)
上一篇 2022年11月16日
下一篇 2022年11月16日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml