前面说过，用户感受的响应时间是取决于诸多因素的，我们几乎不能得到真实的用户响应时间。对于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. pycharm 光标快速移动到括号外或行尾

    coupon = models.ForeignKey("Coupon", on_delete=models.CASCADE) pycharm中编写程序,  需要将光标快速移动到“” ...

  2. LOJ#6085. 「美团 CodeM 资格赛」优惠券(set)

    题意 题目链接 Sol 考虑不合法的情况只有两种: 进去了 再次进去 没进去 但是出来了 显然可以用未知记录抵消掉 直接开个set维护一下所有未知记录的位置 最优策略一定是最后一次操作位置的后继 同时 ...

  3. 【读书笔记】iOS-定位服务与地图应用开发

    一,定位服务. iOS设备能提供3种不同的定位途径: 1,WiFi定位,通过查询一个WiFi路由器的地理位置的信息,比较省电:iPhone,Ipod touch 和iPad都可以. 2,蜂窝式移动电话 ...

  4. 从零开始学习html（十三） CSS代码缩写，占用更少的带宽

    一.盒模型代码简写 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  5. js获取浏览器和设备相关width（屏幕的宽度）

    首先呢,我们将iPhone手机的相关数据表示如下 我们要理解很多东西,比如逻辑分辨率.物理分辨率.缩放因子.ppi等,这里先不讨论. 首先呢,我们先介绍下各个屏幕宽度: 网页可见区域宽: docume ...

  6. 关于在JSP页面用c标签写if语句

    2017年5月28日,晴,心情还不错. 昨晚和同事撸串,回来后继续威士忌走起,喝到凌晨2点多,聊的甚欢.彼此分享了很多自己成长过程中的故事,相互之间有了进一步的了解,友情又进了一步.在以后的时光里,愿 ...

  7. 图片轮播(Jquery)

    昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用. 经过调整和整合,完成了第一版本的jquery. ...

  8. Oracle 用户、角色管理简介

    Oracle 用户.角色管理简介 by:授客 QQ:1033553122 创建用户 形式1:创建名为testacc2的用户 CREATE USER testacc2 IDENTIFIED BY abc ...

  9. python + Jenkins + requests 数据驱动接口测试 环境部署

    ** Jenkins安装: * 安装包选择:Jenkins.war * windows下有msi和war两种格式,我使用的是war,下载下来丢到xmapp的指定目录就行,操作方便一点      * m ...

  10. 纯Css实现Div高度根据自适应宽度（百分比）调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...