前面说过，用户感受的响应时间是取决于诸多因素的，我们几乎不能得到真实的用户响应时间。对于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. 初学HTML-3

    标题标签:<h#>...</h#>,从h1到h6,字号由大变小. 段落标签:<p>...</p>,在浏览器中独占一行. 空格:" " ...

  2. java队列Queue及阻塞队列

    java队列 接口Queue类在java.util包,定义了以下6个方法 详细查看官方文档https://docs.oracle.com/javase/7/docs/api/java/util/Que ...

  3. python常用模块-01

    1. 简单了解模块 写的每一个py文件都是一个模块. 还有一些我们一直在使用的模块 buildins 内置模块. print, input random 主要是和随机相关的内容 random()    ...

  4. sublime3 常用快捷键

    轻量级编辑器,一直用的sublime text3 , 可以根据自己喜好安装喜欢的风格插件,根据工作需求安装代码处理插件. 下一章将推荐我常用的一些风格与代码插件 这里记录一些sublime 常用的快捷 ...

  5. vue中prop传值时加不加v-bind（冒号：）

    前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...

  6. 从零开始学习html（九）CSS的继承、层叠和特殊性

    一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

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

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

  8. Android开发工具Android Studio、Android SDK和Genymotion完全配置

    所谓“工欲善其事,必先利其器”.Android Studio 是谷歌推出一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提 ...

  9. Android Design Support Library（三）用CoordinatorLayout实现Toolbar隐藏和折叠

    此文的代码在Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果代码的基础上进行修改,如果你没有看过本系列的第一篇文章最好先看一看.Co ...

  10. 【python】python常用函数

    urlencode与urldecode 当url中包含中文或者参数包含中文,需要对中文或者特殊字符(/.&)做编码转换. urlencode的本质:把字符串转为gbk编码,再把\x替换成%.如 ...