前端性能优化的关键时间点
思维导图
前端性能优化的关键时间点有哪些？
1. 开始渲染时间：浏览器开始绘制页面，在此之前页面都是白屏，所以也称白屏时间。
2. DOM Ready：dom 解析已经完成，资源还没有加载完成（js, img等）
3. 首屏时间：用户看到第一屏页面的时间。
4. onload：原始文档和所有引用的内容已经加载完成。用户最明显的感觉就是浏览器上Loading状态结束。
开始渲染时间如何获取？如何优化？
获取方式：
1. Chrome可通过chrome.loadTimes().firstPaintTime获取
2. IE9+ 可以通过performance.timing.msFirstPaint获取
3. 在不支持的浏览器中可以通过获取头部资源加载完的时刻模拟获取近视值
优化建议：
1. 优化服务器响应时间，服务器端尽早输出
2. 减少html文件大小
3. 减少头部资源，脚本尽量放在body中
DOM Ready 时间如何获取？如何优化？
获取方式：
1. 高级浏览器通过DOMContentLoaded事件获取
2. 低版本webkit内核浏览器可以通过轮询document.readyState来实现
3. ie可通过setTimeout不断调用document.Element的 doScroll 方法，直到其可以用来实现
优化建议：
1. 减少dom结构复杂度。节点尽可能减少，嵌套不要太深
2. 优化关键呈现路径
首屏时间如何获取？如何优化？
获取方式：
这个时间节点很重要但很难获取，一般只能通过模拟获取一个近视时间
1. 不断获取屏幕截图，当截图不在变化时，可视为首屏使时间
2. 一般影响首屏的主要因素是图片的加载，通过页面加载完后判断图片是否在首屏内，找出加载最慢的一张即可视为首屏时间。
优化建议：
1. 页面首屏的显示尽量不要依赖于js代码，js 尽量放到domReady后执行或加载
2. 首屏外的图片延迟加载
3. 首屏结构尽量简单，首屏外的css可延迟加载
OnLoad 时间如何获取？如何优化？
获取方式：
该时间节点是window.onload事件触发的时间
优化建议：
1. 减少资源的请求数和文件大小
2. 将非初始化脚本放到onLoad之后执行
3. 无需同步的脚本异步加载
前端性能优化的关键时间点相关推荐
- 前端白屏问题_前端性能优化之白屏时间
前言 该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念.重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践. 一.概念 白屏时间:即用户点击一个链接或打开浏览 ...
- 服务器显示屏出现白屏,前端性能优化之白屏时间
定场诗 曲木为直终必弯,养狼当犬看家难: 墨染鸬鹚黑不久,粉刷乌鸦白不天. 蜜饯黄莲终需苦,强摘瓜果不能甜: 好事总得善人做,哪有凡人做神仙. 前言 该篇文章会为您分享在前端性能优化中非常重要的一环- ...
- 前端性能优化-服务端和网络优化-极客时间
前端性能优化 目录 前端性能优化 第六章:服务端和网络优化 6.1 CDN--如何合理配置CDN缓存 6.2 DNS--主流的DNS优化方法有哪些? 6.3 HTTP:如何减少 HTTP 请求 6.4 ...
- 前端性能优化：当页面渲染遇上边缘计算
简介: 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点.本文在 ESI (Edge Side Include) 的基础上,提出了一种新的优化思路:边缘流式渲染方案(ESR),即借助 CDN ...
- 【HTML】前端性能优化之CDN和WPO的比较
CDN通过将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决性能问题.WPO解决方案,如Radware的FastView,则在前端进行性能提升处理,使页面更有效地呈现在浏览器 ...
- 前端性能优化之性能测试
前端性能优化是一个很宽泛的概念,有很多教程都有前端性能优化的方法,这也是我们一直在关注的一件重要事情.配合各种方式.手段.辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,我们常常竭尽全力进 ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- （译）2019年前端性能优化清单 — 上篇
(译)2019年前端性能优化清单 - 上篇 (译)2019年前端性能优化清单 - 中篇 (译)2019年前端性能优化清单 - 下篇 写在译前:首先介绍一下我自己,一个跨行业的.完全非科班生的文科单身狗 ...
- WEB前端性能优化基本套路
前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识. 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响 ...
- 前端性能优化--测试工具
前端性能优化–测试工具 文章目录 前端性能优化--测试工具 前言 前端性能测试工具 1. `LightHouse` `LightHouse测试结果` Performance中各类别的含义: 2. Fr ...
最新文章
- python 颤音_自成一派，这个作曲大师确实名副其实！
- Cpp 对象模型探索 / 静态局部对象只构造一次的原因和执行析构的方法
- PayPal Agility with Stability On OpenStack
- java暂停5s_java如何实现继续/暂停按钮
- 树结构-------前缀树
- python中的tuple_Python中的tuple元组详细介绍
- bazel 链接第三方动态库_如何自己制作静态库？
- Django中的form模块的高级处理
- DirectX编译环境配置
- No module named ‘gym‘
- Zepto Api参考
- 这三款曾红极一时的软件,现已风光不再,而遭嫌弃的它成了香饽饽
- 漫画｜前端江湖恩仇录始末
- JMS消息服务 API解析
- vscode怎么运行代码HTML 怎么在vscode编写HTML代码
- django踩坑关于django.core.exceptions.ImproperlyConfigured: The SECRET_KEY setting must not be empty.
- PaddleSeg快速开始之 人像分割
- 2020搞一个副业项目需要什么技能？
- Windows开源Web服务器性能和压力测试工具
- 手把手教你写CS231N作业一 KNN分类器 详细解析 作业源文件 数据集