程序员经验分享-hwhale

分析url从输入到展过程中的页面优化、performance

2023-05-16

浏览器会开启一个线程处理URL请求

url从输入到展示页面的过程
1、输入网址
2、DNS解析
3、建立tcp连接（请求队列queuing、请求等待stalled
4、客户端发送HTPP请求
5、服务器处理请求　
6、服务器响应请求
7、浏览器下载资源并展示HTML
8、浏览器发送请求获取其他在HTML中的资源。

优化

页面本身的加载性能 + 所有依赖资源的加载性能
浏览器：C 服务器：S
C减少请求数
C优化请求顺序
压缩传输的数据
S提升传输效率

中间
Gzip Components Gzip压缩
几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩代码体积

设置客户端缓存：Cache-control 强缓存和协商缓存HTTP强缓存与协商缓存

C客户端
代码习惯
Put Stylesheets at the Top 把CSS放顶部：让浏览者能尽早的看到网站的完整样式。
Put Scripts at the Bottom 延迟加载非必要脚本：网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。

避免CSS Expressions：CSS表达式只被IE支持的东西执行时候的运算量非常大，移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个（就是在说IE6）

减少DOM的访问次数：JS访问DOM是很慢的，尽量不要用JS来设置页面布局。

减少图片、css、script、flash等元素的数量、把多个JS、CSS在可能的情况下写进一个文件
页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。
减少iframe数量，更有效的利用 ifames
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本 iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义
尽量用GET方式进行AJAX请求
Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。
减小Cookie：Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。

S服务器
使用HTTP 1.0/1.1协议，chrome只允许每个源拥有6个TCP连接，因此可以通过划分子域将多个资源分布在不同子域上。3-5个即可
但是需要注意多个子域意味着更多的DNS查询时间

CDN加速
Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率

performance

window.performance.：获取网页加载详细性能指标的API
在这里插入图片描述

window.performance.timing完整的网页本身加载性能数据
在这里插入图片描述

navigationStart属性：在用户代理完成提示卸载上一个文档后立即返回时间。如果没有以前的文档，此属性必须返回与取启动相同的值。

unloadEventStart属性：如果以前的文档和当前文档的来源相同[IETF RFC 6454]，则此属性必须在用户代理开始上一文档的卸载事件之前立即返回时间。如果没有以前的文档或以前的文档与当前文档的来源不同，此属性必须返回零。

unloadEventEnd属性：如果以前的文档和当前文档的原点相同，则此属性必须在用户代理完成上一文档的卸载事件后立即返回时间。如果没有以前的文档或以前的文档与当前文档的来源不同或卸载尚未完成，则此属性必须返回零。如果导航时有 HTTP 重定向或等价物，并且并非所有重定向或等价物都来自同一来源，则卸载和卸载必须返回零。

redirectStart属性：如果导航时有 HTTP 重定向或等价物，如果所有重定向或等价物都来自同一来源，则此属性必须返回启动重定向的取件的开始时间。否则，此属性必须返回零。

redirectEnd属性：如果导航时有 HTTP 重定向或等价物，并且所有重定向和等价物都来自同一来源，则此属性必须在收到最后一个重定向响应的最后一个节后立即返回时间。否则，此属性必须返回零。

fetchStart属性：如果要使用 HTTP GET或等价物获取新资源，取件必须立即返回用户代理开始检查任何相关应用程序缓存之前的时间。否则，它必须返回用户代理开始获取资源的时间。

获取资源的第一步是查询是否有相应的缓存，确认需要需要请求资源，然后DNS

domainLookupStart属性：此属性必须在用户代理开始域名查找当前文档之前立即返回时间。如果使用持久连接[RFC 2616]或从相关应用程序缓存或本地资源检索当前文档，此属性必须返回与取启动相同的值。

domainLookupEnd属：用户代理完成域名查找当前文档后立即返回时间。如果使用持久连接[RFC 2616]或从相关应用程序缓存或本地资源检索当前文档，此属性必须返回与取启动相同的值。

connectStart属性（TCP）：此属性必须在用户代理开始建立连接到服务器以检索文档之前立即返回时间。如果使用持久连接[RFC 2616]或从相关应用程序缓存或本地资源检索当前文档，此属性必须返回域名查找端的价值。

connectEnd属性:在用户代理完成与服务器的连接以检索当前文档后立即返回时间。如果使用持久连接[RFC 2616]或从相关应用程序缓存或本地资源检索当前文档，此属性必须返回域查找端的价值
如果传输连接失败，用户代理重新打开连接，则连接启动和连接End应返回新连接的相应值。
连接端必须包括建立传输连接的时间间隔以及其他时间间隔，如 SSL 握手和袜子身份验证。

secureConnectionStart属性
此属性是可选的。没有此属性可用的用户代理必须将其设置为未定义的。当此属性可用时，如果当前页面的方案是HTTPS，则此属性必须立即返回用户代理开始握手过程之前的时间，以确保当前连接的安全。如果此属性可用，但未使用 HTTPS，则此属性必须返回零。

requestStart属性:在用户代理开始从服务器或相关应用程序缓存或本地资源请求当前文档之前立即返回时间。
如果在发送请求后传输连接出现故障，并且用户代理重新打开连接并重新发送请求，则请求启动应返回新请求的相应值。
不表示用户代理发送请求的完成

responseStart属性：在用户代理收到服务器或相关应用程序缓存或本地资源响应的第一个要节后立即返回时间。

responseEnd属性：在用户代理收到当前文档的最后一个节后或在传输连接关闭之前立即返回时间，以先到者为准。此处的文件可以从服务器、相关应用程序缓存或本地资源接收。

domLoading属性：解析DOM树

domInteractive属性：在用户代理将当前文档准备设置为"交互式"之前立即返回时间。

domContentLoadedEventStart属性：在用户代理在文档中触发DOM 会议加载事件之前立即返回时间。

domContentLoadedEventEnd属性：在文档的DOM 会议加载事件完成后立即返回时间。

domComplete属性：在用户代理设置当前文档准备"完成"之前立即返回时间。

如果当前文档准备状态多次更改为同一状态，则多米加载、多米时联动、多米定件加载事件开始、多米定件加载事件结束和圆顶完成必须返回相应文档准备更改首次发生的时间。

loadEventStart属性：在当前文档的负载事件被激发之前立即返回时间。尚未发射负载事件时，它必须返回零。

loadEventEnd属性：返回当前文档的负载事件完成的时间。当负载事件未被激发或未完成时，它必须返回零。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

URL

performance

从输入到展过程中的页面优化

分析url从输入到展过程中的页面优化、performance 的相关文章

  • R、Rcpp 与 Armadillo 中矩阵 rowSums() 与 colSums() 的效率

    背景 来自 R 编程 我正在扩展到 C C 形式的编译代码Rcpp 作为循环交换 以及一般的 C C 效果的实践练习 我实现了 R 的等效项rowSums and colSums 矩阵的函数Rcpp 我知道它们以 Rcpp 糖的形式存在 并

  • 为什么n++执行速度比n=n+1快？

    在C语言中 为什么n 执行速度快于n n 1 int n n int n n n 1 我们的老师在今天的课堂上问了这个问题 这不是家庭作业 如果您正在开发一个 石器时代 编译器 的情况下 石器时代 n比n 比n n 1 机器通常有incre

  • 扩展 RegExp 以获取文件扩展名

    我知道 已经有很多基于 RegExp 的解决方案 但是我找不到适合我需求的解决方案 我有以下函数来获取 URL 的各个部分 但我还需要文件扩展名 var getPathParts function url var m url match w

  • 如何检查设备是否“快”足够

    我找不到更好的措辞来回答我的问题 在我的应用程序中的某个时刻 我设置了一些非常密集的动画 事实是 在高端设备上 动画运行流畅且赏心悦目 另一方面 我测试的一款低端设备在制作动画时的性能非常糟糕 为了将用户体验放在第一位 我想在计算能力足够的

  • getItem 与 getItemAtPosition

    有两种方法可以获取列表视图中的选定项目 list getAdapter getItem position list getItemAtPosition position 我的问题是 哪一种是首选的做法 我见过人们同时使用这两种方法 您可以使

  • Javascript 播放声音性能重吗？

    我正在用 Javascript 制作一个简单的游戏 当一个物体与墙壁碰撞时 它会发出 砰 的声音 声音的响度取决于物体的速度 速度越高 gt 声音越大 播放功能 playSound function id vol ID of the sou

  • Python if 与 try- except

    我想知道为什么下面程序中的 try except 比 if 慢 def tryway try while True alist pop except IndexError pass def ifway while True if alist

  • FireMonkey iOS RAD Studio XE2 - 在从 URL 加载的表单上显示图像

    是否可以将 TImage 放置在 iOS 的 FMX 表单上 并将图像 jpg 从 URL 加载到此 TImage 中以在 iOS 应用程序中显示 我尝试过但没有成功 任何正确方向的提示或指出都会受到赞赏 将 TButton TImageC

  • 如何在 Dart 中以正确的方式重定向和重新加载？

    在 Dart 中进行重定向和重新加载的首选方法是什么 我们是否只使用 window location href window location href 有几种不同的方法可以处理 URI 更改 每种方法都有自己的用途 当您想要将用户发送到另

  • 如何优化分割重叠范围？

    我编写的这个 Python 脚本用于将重叠范围拆分为唯一范围 最后一次迭代 https codereview stackexchange com questions 285932 python script to split overlap

  • 在什么情况下 do-while 比 while 更高效？

    while 与 do while while 和 do while 在功能上是等效的当块为空时 虽然 while 看起来更自然 do while keepLooping while keepLooping 使用空块的 while do wh

  • 如何改变HTML5视频的播放速度？

    如何更改 HTML5 中的视频播放速度 我查过视频标签的属性 https www w3schools com html html5 video asp在 w3school 但无法做到这一点 根据这个网站 http www chipwreck

  • 如何对单个 TypoSript 对象生成进行基准测试？

    我想对单个 TypoScript 对象生成进行基准测试以控制性能 是否可以使用某些 stdWrap 方法 我想要对其进行基准测试的 TS 对象示例 Test 1 page 10 RECORDS page 10 tables pages so

  • ModX Revo：更新站点基本 URL？

    在选择域名之前 我为客户开发了一个网站 因此 网站页面的 URL 如下所示 http host mynost net tempname index php id 8 域名现已购买 但如果我单击任何 Wayfinder 链接 它仍然使用上面的

  • 在 PHP 中从 URL 斜杠后获取两个单词

    我需要从 URL 中获取两个单词 例如我有以下 URL http mydomain com alrajhi invoice 108678645541 http mydomain com alrajhi invoice 10867864554

  • 具有独特矩阵转置问题的 2D 分块

    我有类型的复杂值数据struct complex double real 0 0 double imag 0 0 以 3 阶张量的形式组织 底层容器具有与内存页边界对齐的连续内存布局 The natural slicing directio

  • 快速检查网络速度

    我想从我的 swift 应用程序检查网络速度 我发现很多帖子描述了Reachability特别是查找连接是否可达以及是 WIFI 连接还是 WWAN 连接的方法 我的问题 是否可以检测 WWAN 的类型 2G 3G 4G 你可以用以下命令检

  • Android：了解 OnDrawFrame、FPS 和 VSync (OpenGL ES 2.0)

    一段时间以来 我在 Android 游戏中遇到了运动精灵间歇性 卡顿 的情况 这是一个非常简单的 2D OpenGL ES 2 0 游戏 这是一个持续存在的问题 我已经多次重新访问过 在我的游戏循环中 我有 2 个 计时器 一个用于记录前一

  • 使用 Python 3.x 基本获取 URL 的 HTML 正文

    我是Python新手 我对 Python 2 x 中的旧 urllib 和 urllib2 与 Python 3 中的新 urllib 之间的差异有点困惑 除此之外 我不确定数据在发送到 urlopen 之前何时需要编码 我一直在尝试使用

  • 索引在 NOT IN 或 <> 子句中起作用吗？

    我读过 至少 Oracle 数据库中的普通索引基本上是 B 树结构 因此存储处理适当根节点的记录 小于 根的记录被迭代地存储在树的左侧部分 而 大于 根的记录被存储在右侧部分 正是这种存储方法有助于通过树遍历实现更快的扫描 因为深度和广度都

随机推荐

  • Eigen求解大型稀疏对称矩阵（Cholesky分解）

    参考自Eigen文档 代码如下 xff1a span class token macro property span class token directive hash span span class token directive ke

  • CMake的基本使用方法与install命令

    源代码 main cpp文件如下 span class token macro property span class token directive hash span span class token directive keyword

  • docker常用命令总结

    docker常用命令总结 span class token function uname span span class token parameter variable r span span class token comment 查看

  • 基于STC15的飞控设计（1）飞控电路设计

    前言 学校举办的无人机比赛 xff0c 要求使用stc15系列芯片设计飞控 xff0c 然后完成一台四轴的无人机进行穿越障碍的比赛 xff0c 第一次设计飞控 xff0c 如果有什么设计得不好的希望大家多多指教 这个博客算是制作流程的记录

  • STM32F407霸天虎FreeRTOS学习笔记——移植FreeRTOS到开发板上

    STM32F407霸天虎FreeRTOS学习笔记 移植FreeRTOS到开发板上 FreeRTOS源码获取移植第一步 xff1a 创建文件夹Keilmain c 实验效果 FreeRTOS源码获取 在移植之前 xff0c 首先要获取到 Fr

  • 倒立摆及其应用//2021-2-23

    前言 xff1a 以前搞电赛的时候搞过Pid平衡小车 xff0c 倒立摆基本实现方法与平衡小车差不多 xff0c 有一次刚院跑到实验室唠嗑 xff0c 问你知不知道倒立摆的应用 xff1f 我说不知道 xff0c 他说航天火箭 xff0c

  • TypeError: Cannot convert a symbolic Keras input/output to a numpy array.

    问题类型 TypeError Cannot convert a symbolic Keras input output to a numpy array This error may indicate that you re trying

  • 自己的学习记录

    从今天开始学习如何使用Java来写数据库课程设计的作业 xff01 xff01 xff01

  • Tsai分享：资源分享（1）——视觉SLAM十四讲及视频

    Tsai分享 xff1a 资源分享 xff08 1 xff09 视觉SLAM十四讲及视频 一 视觉SLAM十四讲 如若转载请附上链接 xff1a https blog csdn net weixin 43338642 article det

  • pycharm如何查看python文件的工作目录

    在找bug的过程中发现python文件的工作目录和存放目录地址有可能是不一样的 xff0c pathlib路径操作中的pathlib Path cwd 获取的是工作目录而不是存放目录地址发现工作目录和存放目录地址不同的时候一定要修改过来 x

  • C++中vector的用法详解

    文章目录 构造函数增加函数删除函数遍历函数判断函数大小函数交换函数赋值函数改变空间 构造函数 span class token comment vector 创建一个空vector span vector span class token

  • 华为技术面

    文章目录 手撕代码流程题目描述方法介绍面试官评价思维扩展 项目描述技术问题内存说明下C 43 43 的内存分配情况 xff0c 栈和队列的区别以及程序员如何分配回收内存 xff1f C 43 43 程序员和Java程序员有一个很大的区别 x

  • 华东师范大学计算机学硕2023考研经验贴

    文章目录 1 个人经历1 1 一战1 2 二战1 3 心态 2 初试2 1 政治2 2 英语2 3 数学2 4 408 3 复试3 1 机试A 数字猜想B 特殊质数C 最小字符串D 数字排序E 整数分解 3 2 英语面试3 3 综合面试 1

  • Go后端部署服务器

    go后端部署服务器方式一 xff1a xff08 最简单 xff09 和暑假做重点场所项目部署一样 xff0c 简单 xff0c 无脑 xff0c 手动 xff0c 麻烦 span class token number 1 span spa

  • 数据分析实用python程序

    文章目录 1 pdf转txt2 判断txt文件是否为空3 获取txt文件每一行4 获取文件夹所有文件名5 读写xlsx表格6 遍历txt每个字符7 字符串中字符替换 1 pdf转txt span class token comment de

  • 51单片机之数码管

    1 静态数码管原理图 LED数码管根据LED的不同接法分为两类 xff1a 共阴和共阳 为了显示数字或字符 xff0c 必须对数字或字符进行编码 七段数码管加上一个小数点 xff0c 共计8段 因此为LED显示器提供的编码正好是一个字节 共

  • 银行排队模拟（队列）

    银行排队模拟程序 队列类Queue ifndef span class token constant QUEUE H span define span class token constant QUEUE H span struct Rec

  • C/C++中struct和class的区别

    目录 struct class struct和class的区别 struct struct是描述一个数据结构的集合 xff0c 像一周有七天 xff0c 你可以把一周看成是一个结构体 xff0c 然后在结构体里面定义一个数组来存放这个七天

  • java枚举（enum）使用详解

    文章目录 前言一 枚举类型定义二 访问成员三 遍历四 在switch xff08 xff09 中使用枚举五 方法1 内置方法1 1 ordinal 用于返回成员的索引1 2 compareTo 用于比较枚举类型中两个成员的索引值1 3 va

  • 分析url从输入到展过程中的页面优化、performance

    浏览器会开启一个线程处理URL请求 url从输入到展示页面的过程 1 输入网址 2 DNS解析 3 建立tcp连接 xff08 请求队列queuing 请求等待stalled 4 客户端发送HTPP请求 5 服务器处理请求 6 服务器响应请

热门标签