前面说过，用户感受的响应时间是取决于诸多因素的，我们几乎不能得到真实的用户响应时间。对于Web应用前端性能的研究也不是为了准备得到一个响应时间，其性能一部分取决于Web服务器和应用服务器(下载资源，执行等)，另一部分取决于浏览器的实现机制、界面JS文件的执行等，所以我们讨论前端性能的目的是减少总的响应时间，或者说让用户“感觉很快”。

一、与前端性能相关的头信息

a）Accept-Encoding：编码方式。是否支持压缩，支持何种格式的压缩；

b）Connetion：连接。是否持久连接；

c）Expires：返回数据的到期时间。与浏览器的缓存机制有关，此处不细说，详情请看http相关的头域说明；

二、浏览器从输入URL开始到页面完全可用的大致过程

a)连接到URL所在服务器；

b)获取页面对应的HTML文档；

c)解析文档并获取所需要的资源；

d)页面上的JS文件与CSS文件；

e)onload事件。

三、提高前端性能的常用方法

　　从第二点的过程来看，主要有两大思路：

①减少页面加载所需要的时间：从请求的数据、请求的并发度以及网络传输时间等方面着手；

②提升用户的观感，让用户觉得页面很快：让页面尽快开始显示着手。

3.1  减少网络时间

①.使用DNS缓存技术

②.减少需要传输文件的尺寸

③.加快文件传输速度

3.2  减少发送的请求数量

①.利用浏览器缓存

②.使用合并的图片文件

3.3  提高浏览器下载的并发度

①.JS文件放在HTML文档的最后

②.使用多个域名

3.4  让页面尽早开始显示

①.将样式表的引用放在HTML文档的开头(如放在<Head>标签中)

②.将JS的引用放在HTML文档的最后

--------------------------------------------------------------分割线--------------------------------------------------------------

　　对于协助测试前端性能的工具，有HttpWatch、Chrome自带的开发者工具(F12)、Page Speed工具、YSlow等。我用过一段时间的YSlow，操作很简单，而且也会给出优化前端性能的建议，有兴趣的看客不凡去试试。安装包大概需要点百度功底，教程的话，百度即可，看一遍就懂了。对于性能测试，我们平时更多的还是针对服务器、数据库等，此文记录纯为了解，开拓自身眼界。

____江湖没什么好，也就酒还行

Web前端性能杂记的更多相关文章

  1. 如何合理优化WEB前端 高效提升WEB前端性能

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  2. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  3. Web前端性能优化教程09：图像和Cookie优化

    本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看:  一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...

  4. Web前端性能优化教程06：减少DNS查找、避免重定向

    本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...

  5. Web前端性能优化教程08：配置ETag

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...

  6. Web前端性能优化教程05：网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  7. Web前端性能优化教程03：添加Expires头

    本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...

  8. Web前端性能优化教程04：压缩组件

    本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...

  9. Web前端性能优化教程07：精简JS 移除重复脚本

    本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中 ...

随机推荐

  1. Codeforces550C(SummerTrainingDay01-H)

    C. Divisibility by Eight time limit per test : 2 seconds memory limit per test : 256 megabytes input ...

  2. Code Signal_练习题_growingPlant

    Each day a plant is growing by upSpeed meters. Each night that plant's height decreases by downSpeed ...

  3. 01-Javascript简介(了解)

    [转]01-Javascript简介(了解) Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用 ...

  4. python-建造者模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 假如要组装一台电脑,将主板,CPU,内存等部件按照某个稳定的步骤组合,基本过程是 ...

  5. 使用PHPExcel实现数据批量导入到数据库

    此例子只使用execel2003的.xls文档,若使用的是其他版本,可以保存格式为“Execel 97-2003 工作簿(*.xls)”即.xls文件类型即可! 功能说明:只能上传Excel2003类 ...

  6. 微信小程序-上传照片-多张显示

    图片就是一个简单的效果 实现 先看wxml和wxss代码 <view class='in-demand'> <view class='dema-title'> <text ...

  7. SpringCloud 组件Eureka参数配置项详解

    Eureka涉及到的参数配置项数量众多,它的很多功能都是通过参数配置来实现的,了解这些参数的含义有助于我们更好的应用Eureka的各种功能,下面对Eureka的配置项做具体介绍,供大家参考. Eure ...

  8. JAVA后端笔试试题（一）

    2017年6月7日,天气晴转阴.心情还不错. 上周六参加了自己的第一场笔试,感觉很糟糕,主要是对基础知识掌握不扎实,现在把笔试中的部分问题总结归纳如下,便于以后查看. 1.GC是什么?为什么要GC? ...

  9. 高性能JavaScript（快速响应的用户界面）

    浏览器UI线程 用于执行JavaScript代码和更新界面的进程被称为 “浏览器UI线程” . UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到线程空闲,一旦空闲队列就被重新提取出来运行 ...

  10. 让你的app体验更丝滑的11种方法！冲击手机应用榜单Top3指日可待

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由WeTest质量开放平台团队发表于云+社区专栏 一款app除了要有令人惊叹的功能和令人发指交互之外,在性能上也应该追求丝滑的要求,这样 ...