前端性能优化之白屏时间

更新日期: 2019-08-18阅读: 1.8k标签: 空白

前言

该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念、重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践。


一、概念

白屏时间:即用户点击一个链接或打开浏览器输入URL地址后,从屏幕空白到显示第一个画面的时间。

白屏时间的长短将直接影响用户对该网站的第一印象。  


二、白屏时间的重要性

当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时,就开始等待页面的展示。页面渲染的时间越短,用户等待的时间就越短,用户感知到页面的速度就越快。这样可以极大的提升用户的体验,减少用户的跳出,提升页面的留存率。

打开一个页面就像你的女票召唤你一样,你出现的越迅速,女票肯定会愈加欣喜!反之,你千呼万唤始出来,那么你的女票很可能又要抛弃你了(为什么要对你说又呢? ...)  


三、白屏是一个怎样的过程呢?

让我们一起来揭秘:从打开一个页面,到页面的画面展示经历了怎样的过程!  

1. DNS Lookup

DNS Lookup 即浏览器从DNS服务器中进行域名查询。  

浏览器会先对页面进行域名解析,获取到服务器的IP地址后,进而和服务器进行通信。

Tips: 通常在整个加载页面的过程中,浏览器会多次进行DNS Lookup,包括页面本身的域名查询以及在解析html页面时加载的JS、css、Image、Video等资源产生的域名查询。

2. 建立TCP请求连接

浏览器和服务端TCP请求建立的过程,是基于TCP/IP,该协议由网络层的IP和传输层的TCP组成。IP是每一台互联网设备在互联网中的唯一地址。

TCP通过三次握手建立连接,并提供可靠的数据传输服务。

3. 服务端请求处理响应

在TCP连接建立后,Web服务器接受请求,开始进行处理,同时浏览器端开始等待服务器的处理响应。

Web服务器根据请求类型的不同,进行相应的处理。静态资源如图片、CSS文件、静态HTML直接进行响应;如其他注册的请求转发给相应的应用服务器,进行如数据处理、缓存中取数据,将数据按照约定好的格式响应给浏览器。

在大型应用中,通常为分布式服务架构,应用服务器的处理有可能经过很多个系统的中间件,最终获取到需要的数据  

4. 客户端下载、解析、渲染显示页面

在服务器返回数据后,客户端浏览器接收数据,进行HTML下载、解析、渲染显示。

  • a. 如果是Gzip包,则先解压为HTML
  • b. 解析HTML的头部代码,下载头部代码中的样式资源文件或脚本资源文件
  • c. 解析HTML代码和样式文件代码,构建HTML的dom树以及与CSS相关的CSSOM树
  • d. 通过遍历DOM树和CSSOM树,浏览器依次计算每个节点的大小、坐标、颜色等样式,构造渲染树
  • e. 根据渲染树完成绘制过程

浏览器下载HTML后,首先解析头部代码,进行样式表下载,然后继续向下解析HTML代码,构建DOM树,同时进行样式下载。当DOM树构建完成后,立即开始构造CSSOM树。理想情况下,样式表下载速度够快,DOM树和CSSOM树进入一个并行的过程,当两棵树构建完毕,构建渲染树,然后进行绘制。

**Tips:**浏览器安全解析策略对解析HTML造成的影响:

  • 当解析HTML时遇到内联JS代码,会阻塞DOM树的构建

  • 特别悲惨的情况: 当CSS样式文件没有下载完成时,浏览器解析HTML遇到了内联JS代码,此时!!!根据浏览器的安全解析策略,浏览器暂停JS脚本执行,暂停HTML解析。直到CSS文件下载完成,完成CSSOM树构建,重新恢复原来的解析。

  • 一定要合理放置JS代码!!! 


四、白屏-性能优化

至此,我们已经了解了从浏览器在打开一个链接开始,到屏幕展示的过程-白屏时间的历程,那这对每个环节中发生的事情,我们可以有针对性的进行相关的优化。

1. DNS解析优化

针对DNS Lookup环节,我们可以针对性的进行DNS解析优化。

  • DNS缓存优化
  • DNS预加载策略
  • 稳定可靠的DNS服务器

2. TCP网络链路优化

针对网络链路的优化,好像除了花钱没有什么更好的方式!

3. 服务端处理优化

服务端的处理优化,是一个非常庞大的话题,会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等...

4. 浏览器下载、解析、渲染页面优化

根据浏览器对页面的下载、解析、渲染过程,可以考虑一下的优化处理:

  • 尽可能的精简HTML的代码和结构
  • 尽可能的优化CSS文件和结构
  • 一定要合理的放置JS代码,尽量不要使用内联的JS代码

声明

本文为胡哥拜读周涛明、张荣华、张新兵几位大佬所著《大型网站性能优化实战》一书并结合自身经验所得,愿对诸位小伙伴有所帮助。


链接: https://www.fly63.com/article/detial/5359

vue框架开发出现页面空白、白屏的解决方法总汇

使用Vue-cli脚手架开发单页应用时出现页面空白的情况:1.npm run build打包页面空白,2. iOS的Safari下无法打开网页,3.升级vue2+部分手机访问出现页面空白,4.升级vue2+IP访问页面空白,5.Vue在IE下显示空白问题,6.Vue只在iOS 10出现白屏问题

如何微信小程序禁止下拉_解决小程序下拉出现空白的情况

在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?

html页面body与div之间产生空白解决方法

在做一个页面输出时发现body与div之间出现20px左右高度的空白,尝试多种方法无解,尤其是方法1也解决不了,后来发现原来是html文件编码格式问题造成的!css初始化,解决不了,就将html文件格式保存为utf-8编码格式,即问题完美解决

彻底搞懂CSS文本、空白换行问题

本文前提:文本的父容器是块级元素。首先,我们来整理一下与换行有关的3个CSS属性:word-break该属性决定文本内容超出容器时,浏览器是否自动插入换行符。word-wrap(overflow-wrap)该属性决定浏览器是否应该在一个无法正常断开的单词内部插入换行符。

Android WebView 加载H5页面空白问题

在Android开发过程中,经常需要使用WebView加载一些H5页面,但有时会出现页面加载失败的情况,今天就探讨下如何解决页面加载空白的问题:

CSS使用font-size: 0去除内联元素空白间隙

我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性。同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block。这样一来,有时在页面中会出现意外的空白间隙导致页面视图与本意不符

HTML中6种空白空格

HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(       ‌‍)在不同浏览器中宽度各异。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!