转 web前端性能分析--原理篇
转自http://blog.csdn.net/five3/article/details/7686715
web前端性能:
即是web用户在访问一个页面时所要花费的时间总和。即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素。那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧。
页面的请求过程:
1、浏览器的url请求
2、递归寻找DNS服务器
3、连接目标IP并建立TCP连接
4、向目标服务器发送http请求
5、web服务器接收请求后处理
6、web服务器返回相应的结果【无效、重定向、正确页面等】
7、浏览器接收返回的http内容
================================前端解析分割线===========================================
8、开始解析html文件,当然是自上而下,先是头部,后是body
9、当解析到头部css外部链接时,同步去下载,如果遇到外部js链接也是下载【不过js链接不建议放在头部,因为耽误页面第一展现时间】
10、接着解析body部分,边解析边开始生成对应的DOM树,同时等待css文件下载
11、一旦css文件下载完毕,那么就同步去用已经生成的DOM节点+CSS去生成渲染树
12、渲染树一旦有结构模型了,接着就会同步去计算渲染树节点的布局位置
13、一旦计算出来渲染的坐标后,又同步去开始渲染
14、10-13步进行过程中如果遇到图片则跳过去渲染下面内容,等待图片下载成功后会返回来在渲染原来图片的位置
15、同14步,如果渲染过程中出现js代码调整DOM树机构的情况,也会再次重新来过,从修改DOM那步开始
16、最终所有节点和资源都会渲染完成
=========================================分析结束分割线==============================================
17、渲染完成后开始page的onload事件
18、整个页面load完成
整个过程中会有很多的分别请求,所以TCP连接会很多,并且每一个用完都会自己关了,除非是keep-live类型的可以请求多次才关闭。
综上所述:
一个页面的请求等于一个或多个url的请求,因此一个页面里包含的外部请求数会影响页面的整体性能
【每请求一次就要多占用一次cpu使用、多一次tcp连接】
每个url的请求又包括寻址、连接、请求传输、返回传输、断连的过程;因此每个阶段的外部环境也会影响整体性能
【DNS服务器的寻址时间,请求和返回内容时的网络环境】
除了URL请求数量外,每个请求的内容大小也是影响性能的主要因素
【文件越大消耗在传输过程中的时间就越长】
请求同样多的资源,并行请求和串行请求速率是不一样的,所以请求的资源要尽量支持同步请求
【同步请求不同资源,即请求被发送到不同的资源服务器即可】
依据浏览器的加载、渲染机制,选择合适的HTML内容排版方式
【减少反复创建对象实例的次数、充分利用缓存机制】
优先加载用户关注的内容
【css加载优于js内容,首屏内容优于非首屏内容】
关注完http请求的过程后,再来关注整个请求过程中关注的几个时间点,通过确定时间点就可以确定影响性能的时间段,就是确定影响性能的因素。根据上面的介绍主要的几个时间点又可以分页面的整体时间点、以及单个url请求过程中的时间点。【基于httpanalyzer工具的指标】
单个url请求的主要时间点:
1、Cache Read:缓存读取时间,或304错误的处理时间
2、Block:请求等待时间,取决于缓存检查,网络连接等待
3、DNS Lookup:DNS服务器查找时间,取决于dns服务的数量,dns注册的域
4、Connect:tcp连接的总时间,取决于连接类型,ssh,keepalive都会比http长
5、Send first to last:发送请求内容的时间,取决于请求内容大小,及上行的传输速度
6、Wait:等待响应的时间,取决于网络环境的响应,web服务器的处理时间
7、Receive first to last:接收响应内容的时间,取决于响应内容,下行的传输速度,也要考虑服务器的带宽
8、Time to first byte:从请求一直到接收到第一个字符的总时间,等于1+2+3+4+5+6
9、Network:网络消耗时间,等于3+4
10、Begin to end:整个请求的总时间,等于1+2+3+4+5+6+7
单个页面的主要时间点:
1、DOM Ready Time: DOM完成的时间,从接收html到完全转换成dom树所需的时间
2、DOM Ready to Page Load: 页面元素的加载和渲染完成时间,包括html,css,img及其它内容
3、Page Load Time: page页onload事件的时间,其实际时间等于总时间 - (DOM ready + 元素渲染时间)
4、URL Requests Begin to End:url请求所消耗的所有时间,从发送请求发起到接收最后一个字节断开
5、Network Time:消耗在网络上的时间,即tcp的连接时间
6、Begin to End:所有消耗的时间,包括请求结束后的渲染时间
PS:
浏览器是怎样工作的
http://blog.csdn.net/zzzaquarius/article/details/6532299
英文原文:
http://taligarsiel.com/Projects/howbrowserswork1.htm
转 web前端性能分析--原理篇的更多相关文章
- 转 WEB前端性能分析--工具篇
在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ...
- 转 web前端性能分析--分析篇
通过具体实施后就可以获得第一手的web前端性能的数据了,然后每次新版本都跑,这就会获得大量的数据,为性能分析提供了基础的输入,同时应该还要综合使用多种工具去从不同的方向收集数据:比如showslow同 ...
- Web前端性能分析
Web前端性能通常上代表着一个完全意义上的用户响应时间,包含从开始解析HTML文件到最后渲染完成开始的整个过程,但不包括在输入url之后与服务器的交互阶段.下面是整个过程的各个步骤: 开始解析html ...
- 转 web前端性能分析--实践篇
当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff ...
- Web前端性能优化进阶——完结篇
前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...
- Web前端性能优化教程05:网站样式和脚本
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...
- web前端性能概述
1.认识前端性能 不管你的网站设计的有多好,后端有多好,对于用户来说全部都是无感知的,用户只关心页面打开的速度,而前端性能表现很大程度上影响着用户的这种感知. 改善前端的性能对用户感知的整体性能提升有 ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
随机推荐
- 第九章 JVM调优推荐
说明:本文主要参考自<分布式Java应用:基础与实践> 1.JVM的调优主要是内存的调优,主要调两个方面: 各个代的大小 垃圾收集器选择 2.各个代的大小 常用的调节参数 -Xmx -Xm ...
- 曲线平滑-B样条曲线 【转】
版权声明:本文为博主原创文章,未经博主允许不得转载. 3D空间曲线三次B样条平滑示例: struct D_DOT3D //D_DOT3D示例,未完全实现 { double x,y,z; } doubl ...
- SQL Server中数据的修改是如何落盘的?
SQL Server 维护着一个叫做buffer cache的东西, 在buffer cache中SQL Server 读取必须被取回的data pages. 数据在修改时并不是直接写到磁盘上的, 而 ...
- Longest Common Prefix leetcode java
题目: Write a function to find the longest common prefix string amongst an array of strings. 题解: 解题思路是 ...
- 亚马逊AWS免费套餐EC2安装centos连接登录并创建root
前言:刚开始使用亚马逊的AWS的免费套餐EC2,由于个人习惯使用centos系统,所以果断安装,但是AWS为了安全性,默认禁止用户使用root账户,导致安装配置环境各种问题.所以我把从安好系统后遇到的 ...
- 13个可实现超棒数据可视化效果的Javascript框架
随着商业及其相关需求的发展,数据成为越来越重要的元素之一,为了更加直观和明显的展示商业潜在的趋势和内在的特性,我们需要使用图表和图形的方式来直观动态的展示数据内在秘密,在今天的这篇文章中我们推荐12款 ...
- [模仿微软Live.cn]JavaScript输入邮箱自动提示
原理是:在一个输入框 中,当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入123的时候 下拉框有所有123的邮箱 输入其他的时候 有其他文案对应的邮箱. 同理 此插件不需要任何html标签, ...
- 【HBase】学习笔记
HBASE 1 简介 1.1 官网 1.1.1 http://hbase.apache.org/ 1.1.2 Apache HBase™ is the Hadoop database, a distr ...
- 嵌入式web服务器-thttpd
交叉编译thttpd http://lakie.blog.163.com/blog/static/45185220201162910432330/ thttpd安装与调试 http://blog.cs ...
- php之快速入门学习-10(数组)
PHP 数组 数组能够在单个变量中存储多个值: <?php $cars=array("Volvo","BMW","Toyota"); ...