首页 > 代码库 > 前端性能概述

前端性能概述

2024-07-09 05:41:10   222人阅读

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技术，这是一种轻量级完整的客户端存储技术。

 

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（内容分发网络）技术

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文件的下载和执行时间完全不会被用户感知到。

 

 


联系
我们