最新消息:专业日照SEO日照网站优化,日照网站建设等网络服务。联系点击 QQ:187348839 电话:189-6336-0585

前端网页加载渲染链路优化

日照网站优化 日照SEO 200浏览 0评论

页面性能和?#27809;?#20307;验的各个指标怎么来优化呢?open signal官方提供了2018年2?#36335;?#32479;计的全世界4G网络覆盖率和通信速率的统计分布图如下,在目前移动互联网的浪潮下,我们要利用好?#27809;?#32456;端设备的每个字节的流量。

前端网页加载渲染链路优化

当然页面性能和体验优化并不是一蹴而就的,需要不断的研究、跟踪,发现问题,解决问题。但是我们可以在一开始编写业务代码的时候就做的更好,做到极致。所以,关于优化实战我们主要分为两部分:加载渲染链路优化 和 编程代码优化。

加载渲染链路优化

从访问url到页面呈现,整个链路可以做优化的思路。

前端网页加载渲染链路优化

?#20197;?#30340;是,W3C推荐的Navigation Timing标准中所定义的核心的页面性能数据,它包含了从上个页面销毁到跳转到当前页面加载完成每个阶段所消耗的时间。在canIuse上查到的兼容性也很好:

前端网页加载渲染链路优化

利用这个接口可以很方便的帮助我们排查链路问题。在Navigation Timing标准中介绍到这个API主要包含两个接口:PerformanceTiming和PerformanceNavigation,这两个接口由浏览器进行实现和维护,当浏览器创建页面的时候就?#23706;?#25509;口定义的相关数据挂载到window.performance.timing和window.performance.navigation这两个属性上。我们可以打开一个网页看一下:

前端网页加载渲染链路优化
前端网页加载渲染链路优化

我?#21069;?#36825;两个图对比一下,就可以很容易的排查出页面的加载链路问题。

静态资源链路

打开页面的第一步是请求页面的html,这里面涉及TTFB这个综合指标。同时如果有必要我们也可以统计DNS时间和TCP时间。

DNS时间:主要是根据请求域名查询到对应主机IP的时间。这个和DNS服务器有关系,也可能和本地缓存有关,如果这个很慢,可以找服务商排查下问题。

TCP时间:tcp是承接http协议的下层协议。主要是路由到主机ip,并建立tcp链接的时间。这个时间?#20174;?#20102;服务器到?#27809;?#23458;户端之间链路是否通畅,网络是否通畅。

请求完HTML之后,就开始解析html代码,按照从?#29616;?#19979;、自然?#25215;?#35299;析,解析内联CSS代码或者加载外链CSS脚本,解析内联Javascript脚本,或者加载外链Javascript脚本。由于浏览器是单线程的,这些CSS和Javascript脚本很可能就会造成页面卡顿。参考 浏览器线程理解与microtask与macrotask。

加载

CDN是内容分发网络,主要用于缓存静态资源。CDN服务商一般会在全国各地部署服务,而且带宽很大,这样访问CDN的资源时就可以有较短的路由路径,而且带宽也比较大,访问比较快。

  1. 建议最好把html, CSS、JS、font、img这些资源放在CDN上,没有CDN也可以放在OSS存储服务上,总之比自己的服务器硬盘快多了,至少服务商会在不同区域做分布式部署
  2. 如果没有钱买CDN服务,那么就尽可能少的加载外联CSS和JS代码,注意html头部可以增加dns-prefetch,减少DNS解析时间
  3. 不是在首屏展示的资源,不要立即加载,可以在页面onload之后加载,或者首屏渲染完成再加载
  4. 压缩CSS、JS、font、img,尽量减少体积,服务端开启gzip
  5. 考虑资源combo请求,减少http请求量,浏览器一般?#21152;?#24182;发限制, 比如chrome一次6个并发http请求,不同浏览器内核可能不一样。

转载请注明:日照天空网络公司 » 前端网页加载渲染链路优化

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
浦和红宝石vs全北现代直播
云南11选5开奖结果 百人牛牛稳赢公式 包邮是什么意思 亿乐棋牌游戏 AG日本武士开奖官网 澳客彩票网 七乐彩胆拖金额对照表 叶小姐乌鲁木齐按摩c 在线日本女优观看 猛龙传奇打法 股票涨跌说明什么 永汇在线注册 西安小姐行情 325游戏平台官网 球探冰球即时比分 一只股票分析全面分析举例