1、认识前端性能

  • 不管你的网站设计的有多好，后端有多好，对于用户来说全部都是无感知的，用户只关心页面打开的速度，而前端性能表现很大程度上影响着用户的这种感知。
  • 改善前端的性能对用户感知的整体性能提升有很大的帮助，如果将后端的响应时间缩短一半，对用户来说整体的响应时间只能减少5%-10%，但如果换作前端，其整体响应时间可以减少40%-45%。
  • 相比后端，对前端的改善工作量要小很多，性价比极高！
  • 只有10%-20%的最终用户响应时间花在了下载html文件上，其他的80%-90%是花在了下载页面中的组件上。
  • 前端性能探讨的目的不是得到这部分响应时间的准确数据（不同用户的使用场景，不同的浏览器等等因素都影响到这部分的响应时间），而是改善优化前端性能来减少总的响应时间。

2、浏览器引擎

通常所谓的浏览器内核也就是浏览器所采用的渲染引擎（Rendering engine），渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。

几大浏览器内核包括：

  • IE：Trident
  • Firefox：Gecko
  • Chrome、Safari：Webkit
  • Opera：Presto

浏览器工作原理介绍

  • 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
  • 浏览器引擎 － 用来查询及操作渲染引擎的接口。
  • 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
  • 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
  • UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
  • JS解释器 － 用来解释执行JS代码。
  • 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

浏览器内部工作原理：http://kb.cnblogs.com/page/129756/

3、HTTP请求过程分析（前端）

1）连接到URL所在的服务器

用户在地址栏中输入一个url回车后要求liulanqi打开该url，浏览器做的第一件事情就是寻找该url所在的服务器。通过DNS服务器查询，浏览器可以获得该url所在网站的IP地址，然后，浏览器向该地址发起连接请求，建立到服务器的连接。

2）获取页面对应的html文档

当连接建立后，浏览器向服务器发送http请求，请求url对应的html文档，不管请求的url是一个静态的html文件，还是一个动态的脚本（ASP、JSP、PHP），服务器返回给浏览器的一定是一个html文档。该html文档就是浏览器需要呈现的页面。

3）解析文档并获取所需要的资源

浏览器在获取html文档后会对文件进行解析，弄清页面需要哪些资源以及生成DOM树。生成DOM树的工作于下载页面上需要的其他资源同时进行。大致来说，浏览器会逐行分析html文档，一旦发现一个标签，就根据标签的要求对指定的资源下载。当DOM树生成后，DOMContentLoaded事件被触发（IE没有实现该事件）。

4）页面上的js和css文件

不同浏览器在下载和执行页面上的js文件时行为不完全相同。对于浏览器而言，在处理js文件或js代码时只需要保证以两点：

  • 所有js代码按照其在html文件中出现的顺序执行，保证js文件之间存在的依赖关系在执行时不会被破坏。
  • js文件在执行时，其依赖的DOM树已经建立好。

5）onload事件

当html文档解析完后，生成了DOM树，所有页面需要的资源文件都已经成功下载和执行（对于js文件）后，浏览器会发出Onload事件并回调html文档中的onload函数，对浏览器来说，onload事件是最接近页面就绪的事件（许多前端性能工具会把onload事件作为一个显著的标志）。、

4、提高前端性能的方法

从浏览器请求url的过程来看，要提高前端性能有两大思路：

  • 减少页面加载所需要的时间（从请求的数量、请求的并发度及网络传输时间等方面）
  • 提升用户的感知，让用户觉得页面更快（主要是从让页面尽快开始显示入手）

1）减少网络时间

  • 使用DNS缓存技术：能够让用户获得更快的DNS解析时间，一般浏览器本身有一定的DNS缓存机制
  • 减少需要传输文件的大小：使用gzip压缩，尽量减少js和css文件大小等
  • 加快文件传输速度：使用cdn（内容分发网络）技术
  • 对组件使用无Cookie的域名（ Use Cookie-free Domains for Components）：将站点的静态文件（如图片、js、css 等）放在一个专门的域名下访问，由于该域名与主站域名不同，所以浏览器就不会把主域名下的 Cookie 传给该域，减少了网络开销，一定程度提高了页面加载速度，特别是细碎静态文件特别多的情况下效果显著。

2）减少发送的请求数量

  • 利用浏览器缓存：保证服务器端返回的资源的响应头带有Expires信息，是的资源可以被缓存；用引用法师使用css和js，使更多的URI可以被缓存。
  • 使用合并的图片文件：当页面上包含许多小图片文件时，可以考虑将小图片文件合并成一个大图片文件，页面上使用css sprites技术可以将大图片显示为分隔开的小图片。在没有缓存的情况下，将许多小图片合并成大图片可以大量减少http的请求数量。选择将哪些小图片合并为大图片需要综合考虑，如果某些小图片经常变化，而另一些相对稳定，则不宜将所有小图片合并成大图片，因为这样会导致大图片经常改变，从而无法利用浏览器的缓存机制。

3）提高浏览器下载的并发度

  • js文件放在html文档的最后面：某些浏览器（如IE6）上，js文件的下载和执行会阻止其他页面资源文件下载和执行，直到js文件下载和执行完成后，其他资源文件才      能下载和执行。
  • 使用多个域名：浏览器中对服务器的连接限制是基于域名的。例如：某个网站拥有2个域名，在浏览器限定最多与同一个域名建立2个连接的情况下，浏览器实际可以与服务器建立4个连接。

4）让页面尽早开始显示

  • 将css的引用放在html文档的开头：比如放在<head>标签中，这样可以让样式表在一开始就下载下来，一旦样式表下载完成，浏览器可以使用样式表中的定义开始在屏幕上显示页面元素，另外，也避免了新样式可能带来的屏幕显示的重绘。
  • 将js的引用放在html文档的最后：这样js文件的下载和执行会在所有页面下载完成后，不会阻止其他页面元素的显示，从用户感知来说，js文件的下载和执行时间完全不会被用户感知到。

5、前端性能工具介绍

1）firebug

2）yslow

3）page speed

6、前端实战调优

1）配置apache的gzip压缩

配置apache配置文件后重启，增加：

LoadModule deflate_module modules/mod_deflate.so

LoadModule headers_module modules/mod_headers.so

<IfModule mod_deflate.c>
DeflateCompressionLevel 7
#不要设置的太高，否则会占用太多的cpu
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php
AddOutputFilter DEFLATE css js
</IfModule>

2）配置apache的expires过期时间

配置apache配置文件后重启，增加：

LoadModule expires_module modules/mod_expires.so

<IfModule expires_module>
ExpiresActive On
ExpiresDefault "access plus 12 month"
ExpiresByType text/html "access plus 12 months"
ExpiresByType text/css "access plus 12 month"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/js "access plus 1 year"

ExpiresByType image/gif "access plus 12 month"
ExpiresByType image/jpeg "access plus 12 month"
ExpiresByType image/ico "access plus 12 month"
ExpiresByType image/jpg "access plus 12 months"
ExpiresByType image/png "access plus 12 months"

ExpiresByType application/x-javascript "access plus 12 month"
ExpiresByType application/x-shockwave-flash "access plus 12 month"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/js "access plus 1 year"
ExpiresByType video/x-flv "access plus 12 months"
</IfModule>

3）KeepAlive：是否保持http连接

  • 适合打开KeepAlive的场景：用户浏览一个网页时，除了网页本身外，还引用了多个js文件，多个css文件，多个图片文件，并且这些文件都在同一个http服务器上。
  • 适合关闭KeepAlive的场景：用户浏览的是一个动态网页，有程序即使生成内容，并且不引用其他内容。
  • 如果服务器内存较少，关闭KeepAlive可以节省很多内存。
  • 前端有类似squid的服务，适合打开KeepAlive。

4）其他

  • HostnameLookups设置为off，尽量减少dns查询的次数。
  • 一般可以关闭apache中的etag（副作用较多），在配置文件加入FileETag none即可。

参阅：

web前端性能优化：http://www.dbanotes.net/web/high_performance_web_site.html

page speed：http://www.cnblogs.com/JustinYoung/archive/2009/08/10/Page-Speed-Google.html

yslow：http://xqtesting.blog.51cto.com/4626073/837766      http://xqtesting.blog.51cto.com/4626073/846908

Cookie-free Domains：http://opoo.org/cookie-free-domains/

前端日志分析：http://andashu.blog.51cto.com/8673810/1375317

web前端性能概述的更多相关文章

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

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

  2. web前端性能优化指南

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

  3. web前端性能优化汇总

    一.概述 web前端性能优化主要点为:减少HTTP请求,减小请求文件大小.其他优化. 二.优化细节 1.减少HTTP请求 (1)使用缓存 (2)雪碧图 (3)合并文件 (4)将javascript和c ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET(转)

    select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供select函数来实现多路复用输入/输出模型, 原型: int select(int maxfd,fd_set *rds ...

  2. 查看APP用到的图片方法

    把APP对应的APK文件下载到电脑上,然后把扩展名修改为zip,然后进行解压,就可以看了.

  3. Spark Streaming中向flume拉取数据

    在这里看到的解决方法 https://issues.apache.org/jira/browse/SPARK-1729 请是个人理解,有问题请大家留言. 其实本身flume是不支持像KAFKA一样的发 ...

  4. 关于C语言中for循环的执行顺序

    for(初始值赋值操作A:终止条件B:递增操作C) {      循环体D: } 其执行次序为:A->B->D->C->B->D->C->B--.. 直到B条 ...

  5. js:语言精髓笔记9--函数式语言特征

    形式化运算系统的研究: 图灵:提出图灵机形式系统,通过0,1运算系统来解决复杂问题: 冯诺依曼:提出了冯诺依曼体系:即通过修改内存反映运算结果: 阿隆左.丘奇:提出新的运算范型Lambda演算,计算机 ...

  6. http://www.111cn.net/jsp/Jsp-Servlet/45158.htm

    http://www.111cn.net/jsp/Jsp-Servlet/45158.htm

  7. POJ1204 Word Puzzles（AC自动机）

    给一个L*C字符矩阵和W个字符串,问那些字符串出现在矩阵的位置,横竖斜八个向. 就是个多模式匹配的问题,直接AC自动机搞了,枚举字符矩阵八个方向的所有字符串构成主串,然后在W个模式串构造的AC自动机上 ...

  8. Open the Lock[HDU1195]

    Open the Lock Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  9. emacs yasnippet

    首先安装emacs 然后下载yasnippet-bundle-0.6.1c.el.tgz解压 在~/.emacs.d/文件夹下新建一个文件plug,一般是新建一个plugins但是我到下面有这个文件夹 ...

  10. BZOJ4123 : [Baltic2015]Hacker

    黑掉的一定是一个长度为$\lfloor\frac{n+1}{2}\rfloor$的区间. 于是枚举初始点,然后查询包含它的区间的最小值. 通过维护前后缀最小值+单调队列$O(n)$解决. #inclu ...