关于前端性能

浏览器的页面的加载流程

  1. 浏览器输入url,浏览器发送请求到服务器,服务器将请求的HTML返回给浏览器。
  2. 浏览器下载完成HTML(Finish Loading HTML)之后,便开始从上到下解析。
  3. 解析的过程中碰到css和js外链(其实HTML的下载也是这个流程)都会执行以下过程:
    1. Send Request : 表示给这个外链对应的服务器发送请求
    2. Receive Response: 表示接收响应,这里是表示告诉浏览器可以开始从网络接收数据了
    3. Receive Data: 表示开始接收数据
    4. Finish Loading: 表示已经完成下载数据
    5. Parse Stylesheet/Evaluate: 默认情况下js下载完成之后执行Evaluate,css下载完成后会进行Parse Stylesheet
  4. 所有的css下载完成后Parse Stylesheet然后开始构建CSSOM
  5. DOM(文档对象模型)和 CSSOM(CSS对象模型)会合并生成一个渲染树(Render Tree)
  6. 根据渲染树的内容计算处各个节点在网页中的大小和位置(Layout,可以理解为“刻章”)
  7. 根据Layout绘制内容在浏览器上(Paint,可以理解为“盖章”)。

    可以用下面这张图来表示上面的过程
Composite是什么?

我觉得这里会记录很多,所以重新开一篇文章
Composite

绘制

是指将渲染树转换为页面上像素的过程

问题:

  1. 什么样的性能指标最能度量人的感觉?
  2. 怎样才能从我们的真实用户中获取这些指标?
  3. 如何用我们所获取的指标来确定一个页面表现得是否「快」?
  4. 当我们得知用户所感知的真实性能表现后,我们应该如何做才能避免重蹈覆辙,并在未来提高性能表现?

1. 性能指标

首次绘制(First Paint)和首次内容绘制(First Contentful Paint)

First paint之前是白屏,在这个时间点之后用户就能看到(部分)页面内容

首次有效绘制(First Meaningful Pain)和主要元素时间点(Hero Element Timing)
慢会话

我们的浏览器通过将任务添加到主线程的队列中逐个执行来响应用户的输入。某些情况下,一些任务将可能会花费很长的时间来执行,如果这种情况发生了,主线程阻塞,剩下的任务只能在队列中等待。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...
    bennnnn阅读 1,625评论 2 4
  • 1.减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比...
    rain_li阅读 354评论 1 2
  • 关于网页性能,蔡老师有一篇文章已经讲得很清楚了, 什么是网站性能优化技术?怎样提升移动端的用户体验? ,只是正好...
    孙文研阅读 772评论 0 7
  • 前端性能优化: 前端性能优化是个经久不息的话题,也是面试常客,今天简单总结下,让大家有初步的了解 1.代码级的优化...
    夜半暖人心阅读 285评论 0 1
  • 性能优化 1、减少HTTP请求 2、使用内容发布网络 3、添加Expires头 4、压缩组件(gZip) 5、将样...
    NIHUOSHEN阅读 316评论 0 0