web前端页面性能

前段性能的意义

对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求、网络传输、页面加载、渲染等)。根据web优化的黄金法则:80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像、样式表、脚本和Flash等,的下载上。减少页面元素将会减少HTTP请求次数。这是快速显示页面的关键所在。根据著名“2-5-8原则”,用户访问一个页面:

当用户能够在2秒以内得到响应时,会感觉系统的响应很快;

当用户在2-5秒之间得到响应时,会感觉系统的响应速度还可以;

当用户在5-8秒以内得到响应时,会感觉系统的响应速度很慢,但是还可以接受;

而当用户在超过8秒后仍然无法得到响应时,会感觉系统糟透了,或者认为系统已经失去响应,而选择离开这个Web站点,或者发起第二次请求。

对于一个网站如果希望抓住用户,网站的速度以及稳定性是首当其冲的。目前性能已经被列入google的网站的排名规则中。

前端性能关注的重点

1:加载时间指标,主要包括三个时间断

a. Time to First Impression

表示从用户在浏览器键入url按下回车键一刻开始到页面开始有反应(用户可以在页面中看见一点点内容)为止。经常能感觉到的一个信号就是网页开始显示title。

b.Time to onLoad Event

表示从页面开始显示内容,到浏览器开始触发OnLoad函数这一时间段。只有当初始的文本和所引用的对象加载完成,浏览器才开始触发OnLoad函数

c.Time to Fully Loaded

表示从上一时间段末到整个网页完全加载完成(所有OnLoad函数以及相关的动态资源加载完成)。在网页中含有timeout或定时刷新之类处理时较为难判断结束点。

2:资源情况指标

网页由初始的html文本中嵌入图片以及通过XHR或者修改dom树动态加载的内容组成,css负责样式,js负责行为。所以当网页资源过多为了下载资源,客户端和服务器的网络来回就更多。下面是资源方面相关的指标。

a. Total Number of Requests

包括html网页请求,css、js资源下载及其它网络请求。优化的目标之一是要尽量减少请求数。

b. Total Number of HTTP 300s/400s/500s

表示返回状态为300(重定向)、400(客户端错误)、500(服务器端错误)的http请求。尽量避免这些请求,以提高页面load的时间。造成这些状态的原因经常是服务器的实施、配置和部署问题。

c. Total Size of Web Site

构成网页元素总的大小。图片或者js库的增加都会对下载时间造成重要的影响。

d. Total Size of Images/CSS/JS

image、css、js在网页元素大小中占主要比例。

e. Total Number of XHR(XMLHttpRequest) Requests

通过js异步从服务器端获得数据的请求数。一些js框架提供了跟服务器端的更新机器,就是XHR请求。通过配置可以减少XHR请求的数目

3:网络连接指标

浏览器底层的网络连接对资源的下载速度有很大影响。资源的下载过程分为很多阶段。下面介绍这些阶段以及浏览器、网络、请求如何影响这些阶段的时间

a. DNS Time

dns 查询的时间。网页请求会产生一次寻找该网页资源所在主机的dns查询。在同个域名进行网页切换不会造成新的dns查询。

b. Connect Time

指浏览器和服务器之间建立tcp/ip连接的时间,对于ssl连接包括握手的时间。网络连接过慢、使用ssl、使用短连接而非常连接都是造成connect time较多的原因。

c. Server Time

指收到请求后服务器逻辑处理的时间,

d. Transfer Time

这一指标与浏览器和服务器之间的连接速度相一致,通过减小传输内容或使用cdn来降低Transfer Time。

e. Wait Time

等待时间和同一个域中服务资源的数量直接相关。每个域的浏览器的物理网络的限制,导致资源等待可用的连接。减少资源的数量,或将资源散布在不同的域,能将一时间降低。平均等待时间的大小更能反映等待时间是否需要注意。

f. Number of Domains / Single Resource Domains

部署网站资源的域主机数量是很重要的,因为它影响的DNS,连接和等待时间。

专门用户资源下载的域是必要的,他将直接减少等待时间。应避免单一的资源域,否则你将为dns查询以及资源下载付出昂贵的代价。

时间: 2024-10-14 16:28:37

web前端页面性能的相关文章

web前端页面性能优化小结

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html PS:结合了精英的思想和自己的一些小小的总结~ 影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,

web 前端页面性能优化总结

影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化 得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户

web前端页面项目经验总结

项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容:    1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_banner)+引入(jquery-1.4.2.min.js):    2.2天完成页面架构,2天添加特效,半天查看.检查.配兼容问题,半天总结整理:    3.期间遇到问题,自己网上查资料,最终解决:    4.寻找合适的js效果时,用时太久,而且有些不适合,不过最终都配到合适的:    5.写代码时,一

web前端之性能优化

作为一个前端工作人员,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道.在解读这些规则的同时,我会用我一年半多的移动网站开发经历提出一些针对移动网站的优化建议. 首先我们从三个大类讲起:一,网络服务器.二,浏览器,三代码上面,针对这三个大类总结出了下面

前端页面性能参数搜集

经常会看些性能分析的书,但是实际在做优化的时候又无从下手. 因为没有数据,也不能确定实际用户到底在哪一环影响了他们的性能. 现在H5提供了一些很方便的Performance接口,可以让我们更方便的搜集到用户的数据,不过有几个方法的兼容性实在太差. 插件已经上传到Github中,可以在这里获取到,index.html中写的是一些示例,插件源码在"js/primus.js"中. 写的比较仓促,自己能力也有限,如有问题,欢迎指正. 一.请求时间统计 上图是performance.timing

web前端页面解决中文传参乱码问题

问题背景:在项目中往往会涉及到前端跳转页面时要传一些参数给下一个页面,如果参数是英文或者数字的时候就很好解决,然而有时候传参会涉及到中文汉字,这个时候再单纯的拼接往往就会导致中文乱码,下面我们就该讨论一下如何解决中文传参乱码的问题. 假设A页面跳转到B页面并且A向B传参,首先在A页面中要调用这个方法:encodeURI("这里是中文参数"); 完整的拼接效果为: window.location.href="B.html?&title="+encodeURI(

前端页面性能优化方式

避免内嵌/嵌入代码∞ ? 您有三种基本方法可以在您的页面上包含CSS或JavaScript: 1)内联: CSS内部定义一个style属性和JavaScript内部的一个onclick属性,例如在任何HTML标签中; 2)嵌入式: CSS在<style>标签内部定义,JavaScript内部<script>标记; 3)外部: CSS中从加载<link>和从JavaScript的src所述的属性<script>标记. 前两个选项尽管减少了HTTP请求的数量,实

移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签

<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head> <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome -->

java web 前端页面的分页逻辑

1 <div class="divBody"> 2 <div class="divContent"> 3 <%--上一页 --%> 4 <c:choose>//page是你通过查询出来当前页得所有的对象数据 pagenum是当前页 如果=1 那么(上一页)的没有连接的 显示出来 5 <c:when test="${page.pagenum eq 1 }"><span class=&