新闻观点

四川省养老金调整方案:网站建设中js和CSS的渲染优化方法

2018/6/28 17:17:00   |   阅读次数:次

四川金7乐走势图手机版 www.9cyr.cn

JavaScript和CSS资源请求是并行的,但仍然需要等到CSSOM构建完成之后,JavaScript才可以执行,然后在进行后面的渲染工作。于是,当 DOM、CSSOM 和 JavaScript 执行之间有大量的依赖关系时,就很可能导致浏览器在处理及渲染网页时出现延迟。

优化策略
我们花了大量的篇幅来理解浏览器的渲染过程,理解DOM,CSSOM,渲染树,浏览器绘制,分析HTML,CSS和JS在渲染过程中的关系,我相信你已然受益匪浅,现在,我们来运用这些知识加速你的网站。

第一步,分析你的网站渲染状况
我们以Google为例,通过Chrome的Performance工具查看页面渲染情况,如下图,你应该可以清晰的看到图中有四条竖线,他们分别是什么含义呢?

绿色竖线,代表First Paint,即浏览器开始进行像素的绘制
黄色竖线,代表First Meaningful Paint(首次有效绘制)用户可以开始看到部分内容,但绘制仍在继续
蓝色竖线,代表大家比较熟悉的DOMContentLoaded
红色竖线,代表load,页面加载完成
优秀的网站都能够把“首次有效渲染”做到1秒之内完成,这样能够让用户更快的看到所请求的页面得到响应。如果你的网站“首次有效渲染”超过1秒,那么就非常有必要重新分析一下网站的关键渲染路径是否合理。

第二步,分析关键渲染路径
在关键渲染路径中,我们通常要关注三个点:

页面首次渲染需要的关键资源数量
关键资源的大小
关键渲染路径的往返次数(Roundtrip)
我们的策略也非常简单,就是减少关键资源数量,降低资源大小,减少关键路径的往返次数。

关键渲染的资源一般是阻止屏幕首次渲染HTML,CSS和JavaScript,所以最重要也是最难的部分的是你需要根据自己网站的实际情况分析,哪些是页面绘制的所必须的,哪些是无关的。

第三步,根据分析采取优化手段
1、减少关键资源的大小

我们首先从最简单也是最直接的减少关键资源的大小开始:

对于所有的资源(HTML,JavaScript,CSS,Image等),你都应该用上三大绝招:Minify,Compression和Cache,这里不过多的赘述里面的细节。

这一点对于HTML来说,非常关键,HTML作为渲染的关键资源,消除或者延迟加载肯定不太可能(这里指的是非局部渲染的关键HTML),能够做到是消除无用代码(比如:注释)和最小化代码(Minify)以及动态局部渲染等。

相关新闻
四川金7乐走势图手机版 | 关于我们 | 网站建设 | 网站优化 | 服务范围 | 案例作品 | 四川金7乐走势图手机版 | sitemap
  • 鲍鹏山:失败而不幸的李白为何总是“兴高采烈” 2019-04-12
  • 中国国际智能产业博览会LOGO征集选用公告 2019-04-12
  • 建军90周年阅兵引网友热议:只要祖国一声令下,我愿意去做英雄 2019-04-10
  • 机器人也能拥有“情商”?这个可以有 2019-04-09
  • 人民网评:当好马克思主义的忠诚信奉者、坚定实践者 2019-04-09
  • 《老马价值观》书友会在京举行 2019-04-04
  • 紫光阁中共中央国家机关工作委员会 2019-04-04
  • 京城斫琴师梵戈:中国人做东西就是和时间商量着来 2019-03-31
  • 美钢铝关税政策引发各界忧虑 2019-03-31
  • 专访蔡速平:北汽集团已经开启了新一轮改革 2019-03-24
  • 印度亮出底牌武器威慑中国,解放军应对手段相当硬气:中国不怕 2019-03-24
  • 中国中小企业协会“一带一路”工委会宣传片 2019-03-23
  • 风水神话更危险的事,就是眼瞎,根本分不清谁对谁, 2019-03-14
  • 十九大代表卢丽安利用周末与在沪台胞分享她参会心得  2019-03-13
  • 荆楚网网络视听节目许可证 2019-03-13
  • 895| 233| 913| 787| 962| 655| 533| 724| 694| 124|