前面说过，用户感受的响应时间是取决于诸多因素的，我们几乎不能得到真实的用户响应时间。对于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. 【学习笔记】---老男孩学Python，day1

    老早同学就推荐自己学编程了,因为各种事耽误了几年的时间,也可以说自己没有居安思危的意识吧… 直到今年2月份决定掏钱学线上课,但是又被兼职打断了,公司忙,兼职事多,拖来拖去只能把课程延期.这一拖就到了五 ...

  2. HTML文字闪烁

    <div id="blink">闪烁的文字</div> <script language="javascript"> fun ...

  3. PHP-隐藏手机号中间四位

    substr_replace('手机号', '****', 3, 4);

  4. vscode sync插件 在不同设备 同步的坑

    sync的好处不言而喻,在不同的设备都可以同步自己的插件和所有配置: 但是有时有总是会有坑, 现在把我遇到的坑记录下来,以防再次踩坑 VSCode 同步方案 VSCode 的插件 Setting Sy ...

  5. 绝对良心提供百度网盘的jdk1.8源码下载包含sun包的

    但是openjdk网站有提供的: http://hg.openjdk.java.net/jdk8u/jdk8u/jdk/file/6bfaecb8ff77/src/share/classes/ 或者直 ...

  6. phar 反序列化学习

    前言 phar 是 php 支持的一种伪协议, 在一些文件处理函数的路径参数中使用的话就会触发反序列操作. 利用条件 phar 文件要能够上传到服务器端. 要有可用的魔术方法作为"跳板&qu ...

  7. jQuery获取json数据

    出自---小瓶子编辑 $.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是遍历的index,第二个是当前遍历的值. ...

  8. Appium环境搭建python篇（mac系统）

    1.安装Appium 通过终端安装: 安装nodejs,下载地址:https://nodejs.org/download/,安装完成后打开终端输入node -v,检查是否安装成功 安装npm,打开终端 ...

  9. vs 2012/2013 等工具中，使用正则表达式，查找、替换

    有这样一个需求,就是一个文本中,需要找出指定格式的字符串进行指定的替换,当前我的真实需求是,一个sql创建触发器的文本,我需要将所有的 包含 TB_SYS 的表名后面添加一个 “_NEW”字符串! 例 ...

  10. Python学习---Python环境变量安装问题0907

    问题背景: 重新安装操作系统后,原来的环境变量丢失[因Python3.5安装目录是E盘,文件还在,只是丢失了环境变量而已,添加即可] 问题解决: 方法一:使用cmd命令添加path环境变量 在cmd下 ...