zoukankan      html  css  js  c++  java
  • 如何打造亚秒级加载的网页2——网络性能 过程解读

    对于我们前端来说,页面的加载速度是直接影响到用户的体验度

    这一篇是第二篇关于提高网页加载速度的博客了,

    第一篇可以在我以前的博客中找到

    附上链接:

    https://www.cnblogs.com/mlw1814011067/p/9683919.html

    PS:本篇博客中我没做太多样式处理,如果你对这方面有兴趣的话请耐着性子看完,毕竟是有点枯燥的

    页面加载速度影响因素——网络性能   

    过程解读

    在浏览器中输入 http://www.thinks.com/ 并按下回车后,

    浏览器首先通过DNS查询解析该域名对应的IP地址

    访问每个域名都需要进行这样的查询

    在获得IP地址后,浏览器发起一个到服务器的TCP连接,TCP握手需要2次往返(1次可使用TCP Fast Open)。

    对于安全的SSL连接,TSL握手需要额外的2次往返(1次可使用TLS False Start 或 Session Resumption)。

    初始连接完成后,浏览器发出的实际请求并等待返回的数据。获得首个字节所需要的时间主要取决于客户端和服务器之间的距离,

    其中还包括服务器呈现网页(包括回话查询、数据库查询、模板呈现等环节)所需的时间

    最后一步需要下载资源(本例中为HTML)这一过程需要多次往返,尤其是新连接通常需要更多往返,

    因为初始拥塞窗口很小。这意味着TCP并不能在一开始就全面使用所有可用带宽,而是会随着时间流逝逐渐增加带宽用量(可参阅TCP拥塞控制)。

    具体速度受制于启动速度缓慢的算法,这种情况下会让每个往返的拥塞窗口内片段数量翻倍,直到数据包真正开始丢失。

    在移动和WiFi网络中,因为这种情况导致的数据包丢失会对性能产生极大影响。

    另外还要注意:在使用HTTP/1.1 的情况下,最多只能创建6个并发连接(如果浏览器依然沿袭了最初的标准,则最多只能创建2个连接)。

    页面加载速度影响因素——网络性能 

    1、 持久连接是必须的。HTTP是基于TCP应用协议进行数据请求的,TCP是服务器握手的协议

    如果每次请求数据,都需要重新进行TCP握手,请求速度会有很大的影响,使用websocket可以保证持久连接

    2、 尽可能避免重定向,重定向会大幅度降低页面初始加载速度。例如请尽量链接至完整URL(例如链接至www.thinks.com 而不是 thinks.com)

    3、 可行的情况下使用HTTP/2。该标注可通过服务器推送一个请求传输多个资源,并可通过页头压缩降低请求和回应数据大小,

    同时可通过管道化(Pipelinling)和多路复用(Multiplexing)借助一个连接发送任意数量的并行请求,

    例如在使用服务器推送的情况下,服务器可以在发送HTML的同时,无需等待实际发出请求,

    直接将网页所需的CSS和JS发送给客户端

    4、 为静态资源(CSS  JS  徽标等图片)设置明确的缓存标头。借助可以告诉浏览器将这些资源缓存多久,何时重新验证。

    缓存机制可大幅减少往返次数以及需要下载的字节数。

    如果未设置明确的标头,浏览器将会进行启发式(Heuristic)缓存,

    虽然是权宜之计,但这总归并非最优化的做法

    5、 使用内容交付网络(CDN)缓存图片、CSS、JS和HTML。这种分布式缓存网络可以大幅拉近用户与资源之间的距离,

    实现更快速的资源交付。同时这种技术也可以加快初始化连接速度,因为此时将会与距离最近的CDN节点进行TCP和TLS握手,

    同时这种节点会与网络后端建立快速持久的连接。在客户端缓存资源

    6、 考虑构建单页面应用,其中只包含小体积的初始页面,并通过异步方式加载其余内容。

    为此可以使用可缓存的HTML模板,通过小请求加载动态数据,并只在导航过程中对页面中的部分区域进行更新

    7、 在客户端缓存资源:缓存必要的应用资源,避免每次都重复请求相同的内容,例如多图片下载可以考虑使用缓存

    呼~枯燥的知识普及到这总算是告一段落了

    下次更新为大家做一个小总结

    敬请期待: 

       如何打造亚秒级加载的网页3——用户体验  总结

  • 相关阅读:
    Codeforces 1237D. Balanced Playlist
    Codeforces 1237C2. Balanced Removals (Harder)
    使用excel计算指数平滑和移动平均
    HP滤波原理浅学
    第二章平稳时间序列模型——ACF和PACF和样本ACF/PACF
    第二章平稳时间序列模型——AR(p),MA(q),ARMA(p,q)模型及其平稳性
    第一章时间序列基础——差分方程和求解(二)
    R中的par()函数的参数
    你真的懂了R中的stem函数是如何绘制茎叶图的么?
    关于R中的mode()和class()的区别
  • 原文地址:https://www.cnblogs.com/mlw1814011067/p/9703702.html
Copyright © 2011-2022 走看看