关于前端性能的文章:

http://www.cnblogs.com/fnng/archive/2011/09/19/2181894.html

web应用的前端性能响应时间指浏览器的页面加载时间。浏览器的页面加载时间包括对html的解析,对页面图片及css等文件的获取和加载、客户端脚本的执行时间以及对你页面进行展现所花费的时间。这个与并发用户量的大小并没有直接的关系,主要关注:如何提高浏览器下载和执行资源的并发性,如何让浏览器尽快开始渲染页面,如何让浏览器尽可能充分的利用缓存。在yahoo中,到少50个团队通过纯粹的前端性能相关的技巧,将最终用户的响应时间减少了25%以上。

在了解web前端性能时,我们应该知道http协议。

http协议采用请求/响应模型,客户端向服务器发送一个请求,请求头包含请求的方法、URI、协议版本等信息,服务器以一个状态行作为响应,响应的内容包括消息协议的版本、成功或者错误编码加上包含服务器的信息、实体元信息等内容。该协议是一种非面向连接的协议,每个http请求都是独立的。

请求报文的格式:请求行 | 通用信息头 | 请求头 | 实体头 | 报文主体   Method     Request-URI  HTTP-versionCRIF

响应报文的格式:状态行 | 通用信息头 | 响应头 | 实体头 | 报文主体

响应报文的状态码如下:

1XX:信息响应类,表示接收到请求并继续处理

2XX:处理成功响应类,表示动作被成功接收、理解和接收

3XX:重定向响应类,表示为了完成指定的动作,必须接收进一步处理

4XX:客户端错误,表示客户请求包含语法错误或不能正确的执行

5XX:服务端错误,表示服务器不能正确执行一个正确的请求

与前端性能相关的头信息:

1、accept-encoding:告诉服务器所接受的页面的编码方式,gzip使用gzip压缩,deflate不压缩,压缩可以减少下载所需的时间。

2、connection:因为HTTP是费面向连接的,无状态的协议,每一个HTTP请求都会经过“建立连接--请求页面或资源--获得资源--断开连接”的过程。对于小的资源可能建立连接的时间都会超过对资源的处理时间,为了减少时间引入了持久连接。当浏览器和服务器约定好后,当某个资源传输完成后并不立即断开连接,而是等待一段时间,在这段时间内若传输其他的资源就复用该连接,否则就关闭。当值为keep-alive时有持久连接。

3、expires:用于只是返回数据的到期时间。到期时间之前都是从缓存处直接获取相应的资源,之后才会向服务器发送请求获取。

提高前端性能的方法:

1、减少页面加载的时间,

2、减少网络时间:CDN技术,DNS缓存技术,减少文件的尺寸

3、减少发送的请求量:利用浏览器缓存

4、让页面尽早的开始显示

对于前段性能测试的理解:

由于本人之前有两三个月的时间接触了前端,对于前端的知识点比较熟悉,在这方面理解起来不是很困难,对于http协议,用户响应请求的过程都熟悉,但是那个时候并没有详细的考虑到页面的加载时间问题,只是想着将页面呈现出来,而忽略了对于响应时间的要求。由于自己都是在本机上实现的,所以每次想看结果的时候都要等很久,这就是没有使用性能的思想,去减少页面的加载时间,没有考虑周全。现在对于这方面有了更深的理解。

web前端性能测试小点的更多相关文章

  1. 学不动了!微信官方推出 Web 前端和小程序统一框架 Kbone

    听说最近微信官方推出了一个统一 Web 前端和小程序的框架 -- Kbone ,特意去看了下... 为什么微信要搞Kbone? 微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代 ...

  2. Web前端性能测试-性能测试知多少---深入分析前端站点的性能

    针对目前接手的web前端的性能,一时间不知道从什么地方入手,然后经过查找资料,发现其实还是蛮简单的. 前端性能测试对象: HTML.CSS.JS.AJAX等前端技术开发的Web页面 影响用户浏览网页速 ...

  3. 两款较好的Web前端性能测试工具

    前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么 前端性能测试对象主要包括: HTML.CSS.JS ...

  4. Web 前端面试小知识

    简历投递 前期为了解自身短板, 可以海投一些试试. 不建议长期海投简历, 对用人单位简历筛选和你自身都没什么好处. 投简历之前最起码要关注以下几点(薪资范围, 公司位置, 职位要求, 是否为培训机构冒 ...

  5. 【转】两款 Web 前端性能测试工具

    前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么? 前端性能测试对象主要包括: HTML.CSS.J ...

  6. 利用Docker安装Web前端性能测试工具Sitespeed.io

    目录结构 一.Sitespeed.io概述 1.Sitespeed.io简介 2.Sitespeed.io使用场景 二.Sitespeed.io的安装和使用 1.安装Sitespeed.io 2.连接 ...

  7. web前端常用小函数汇总

    //去掉html标签 function delHtmlTag(str) { var title = str.replace(/<[^>]+>/g, "");// ...

  8. Docker安装Web前端性能测试工具Sitespeed.io

    一.Sitespeed.io概述 1.Sitespeed.io简介 Sitespeed.io:是一款开源的Web性能测试工具,用来衡量Web网站的综合性能,帮助开发和测试人员分析网页的加载速度和渲染性 ...

  9. web前端开源小案例:立方体旋转

    HTML部分: <body class="body"> <div class="rect-wrap">   <!-- //舞台元素 ...

随机推荐

  1. ERROR 1062 (23000): Duplicate entry '0' for key 'PRIMARY'

    OS: centos 6.3DB: 5.5.14 测试创建yoon测试表,没有主键,没有索引,基础数据内容如下: mysql> select * from yoon;+----+-------- ...

  2. [JAVA][RCP]Clean project之后报错:java.lang.RuntimeException: No application id has been found.

    Clean了一下Project,然后就报了如下错误 !ENTRY com.release.nattable.well_analysis 2 0 2015-11-20 17:04:44.609 !MES ...

  3. VirtualBox内Linux系统与Windows共享文件夹

    在日常工作或学习中我们经常需要在一台电脑上同时使用Windows和Linux(这里以Ubuntu为例)两个系统,我们通常的做法有两种: 一种安装双系统(双系统的安装方法经验里已经有很多,大家可以去参照 ...

  4. 因修改system密码导致expdp备份失败

    今天发现一套系统的逻辑备份失效了,检查了一下,发现主要是由于之前其他管理员修改了system用户的密码,导致备份不成功了.为了今后此类的问题发生,修改expdp的脚本连接部分如下:expdp \' / ...

  5. mysql查询差集

    select A.* from A left join B using(name,addr,age) where B.name is NULL; select A.* from A left join ...

  6. Win8 硬盘100%几个修复方法

    上连接 1.改注册表:http://jingyan.baidu.com/article/e3c78d647f79be3c4c85f5d0.html 2.待续

  7. redis常见性能问题和解决方案?

    Master写内存快照,save命令调度rdbSave函数,会阻塞主线程的工作,当快照比较大时对性能影响是非常大的,会间断性暂停服务,所以Master最好不要写内存快照. Master AOF持久化, ...

  8. js eval()执行传参函数的写法

    .cs public class Message<T> { // 数据总数 public int? Total { get; set; } // 关键数据 public List<T ...

  9. 将Xml字符串转换成(DataTable || DataSet || XML)对象

    今天用到一个功能:就是把从数据库读出来的内容转换成XML字符串流格式,并输出给一个功能函数.在写的过程,为方便以后的使用,我对这一功能进行分装.该类的具体格式如下:XmlConvert类命名空间:Ni ...

  10. SQL Server数据库事务日志存储序列

    原文 原文:http://blog.csdn.net/tjvictor/article/details/5251351   如果你的数据库运行在完整或是批量日志恢复模式下,那么你就需要使用作业(job ...