前端页面优化指南

1.TTFB


  • 全称:首字节时间 (Time To First Byte)

是指从客户端开始和服务端交互到服务端开始向客户端浏览器传输数据的时间(包括DNS、socket连接和请求响应时间),是能够反映服务端响应速度的重要指标,获取在接收到响应的首字节前花费的毫秒数

  • 如图 结合chrome DevTools


    image.png
  • 优化

1.减少DNS查询(减少重定向)
2.使用CDN
3.提早Flush
4.添加周期头(缓存策略,包括浏览器和服务器缓存)

2.TTSR


  • 全称:开始渲染时间 (Time To Start Render)

指某些非空元素开始在浏览器显示时的时间,这也是一项重要指标

  • 优化(大话题,这里不过多展开)

1.优化TTFB
2.阻塞加载的脚本放页面末尾加载
3.静态资源的size优化

3.TTDC


  • 全称:文档完成时间 (Time to Document Complete)

指页面结束加载,可供用户进行操作的时间,等价于浏览器的onload事件触发点。过多的dom操作会增加渲染时间

  • 优化(大话题,这里不过多展开)

1.SSR(首屏速度提升)
2.按需加载
3.静态资源的size优化
4.减少过多的dom操作
5.不重要的静态资源放在末尾加载(如js,css)
6.异步加载,提升整体页面响应速度,部分费资源的内容采用异步加载
7.做好页面友好度处理 >3s 添加loading提示 >8s 加进度条

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,776评论 25 709
  • Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列...
    拉风的老衲阅读 5,837评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • Hope it was a dream,but it's not Hope I am so strong,but ...
    谁是谁的谁101阅读 1,417评论 0 0
  • 一直以来,都认为写文章是一件很神圣很神奇的事情,我虽然平常也喜欢写东西,但从来不敢说自己写的能被称为“文章”。 直...
    换换_205c阅读 3,030评论 5 4