前面说过，用户感受的响应时间是取决于诸多因素的，我们几乎不能得到真实的用户响应时间。对于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 并发编程(管道,事件,信号量,进程池)

    管道 Conn1,conn2 = Pipe() Conn1.recv() Conn1.send() 数据接收一次就没有了 from multiprocessing import Process,Pip ...

  2. vue-router重定向 不刷新问题

    前阵子太忙了,自己一个人一边开发着新项目,一边维护着旧项目,没时间写博客,终于让我腾出时间了.废话少说,开始正文. 问题描述: 之前项目是angular开发的,后来用vue重构后.项目路径和vue路径 ...

  3. 【java】一些零碎的知识点

    java注释文档 一些常用的javadoc标签 常用javadoc标签 @see: other-class 引用other-class 生成的html文档会有一个See Alse 作为超链接的只是条目 ...

  4. 绑定Oracle Database 到 ActiveReport

    ActiveReport 可以和多种数据源交互,包括OLEDB, SQL, XML和集合对象. 在本文中我们将阐述如何绑定Oracle 数据库到 ActiveReport . 这是一件很轻松的事情.下 ...

  5. Java Web 开发填坑记- 如何正确的下载 Eclipse

    一直以来,做 Java web 开发都是用 eclipse , 可是到 eclipse 官网一看,我的天 http://www.eclipse.org/downloads/eclipse-packag ...

  6. SqlServer为字段创建索引

    语法:CREATE [索引类型] INDEX 索引名称ON 表名(列名) 创建索引实例: 聚簇索引 create clustered index index_name on table_name (c ...

  7. 通过ajax GET方式查询数据，Django序列化objects

    点击“查找2”按钮,通过ajax GET方式进行查询数据,这样页面不需要整体刷新,之后清空tbody数据,将查询结果重新附加到tbody 前端html: <div class="box ...

  8. 【未完成】[Spark SQL_2] 在 IDEA 中编写 Spark SQL 程序

    0. 说明 在 IDEA 中编写 Spark SQL 程序,分别编写 Java 程序 & Scala 程序 1. 编写 Java 程序 待补充 2. 编写 Scala 程序 待补充

  9. 第六次作业 orm整合 接口

    结合以前一个项目,将普通的jdbc进行了相关整合,全部改写成了hibernate接口 项目名称:短视频分享平台 主要功能:用户模块:注册.登录.编辑资料.查看用户相关 分类模块:分类添加.查看 视频共 ...

  10. olivettifaces数据集实现人脸识别代码

    数据集: # -*- coding: utf-8 -*- """ Created on Wed Apr 24 18:21:21 2019 @author: 92958 & ...