新闻观点

盈丰国际新澳博:网站建设中js和CSS的渲染优化方法

2018-06-28 17:17:00   |   阅读次数:次

烟台盈丰国际 www.qcbj7.com.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)以及动态局部渲染等。

相关新闻
烟台盈丰国际 | 关于我们 | 网站建设 | 网站优化 | 服务范围 | 案例作品 | 烟台盈丰国际 | sitemap
  • 蔡英文,赖清德,李登辉,陈水扁..... 2019-02-19
  • 万物互联开启智慧新图景 下一代互联网未来已来 2019-02-18
  • 这边爆冷、那边内讧……世界杯能不能让球迷省点心 2019-02-18
  • 杨超马可谦《你才是美猴王》刷爆朋友圈 2019-02-17
  • 国务院减负办部署开展企业负担调查评价工作 2019-02-16
  • "央企暖男"与108名抗战老兵:向他们致以年轻一代的敬意 2019-02-16
  • 人民网驻乌克兰记者报道集 2019-02-15
  • 日本民族将会为最终拥核而战!现在日本保有47吨钚足己制造6000枚核弹,并且日本具有资金和技术优势一星期之內就可拥核!冷眼细观世界笑骂指点江山 ... 2019-02-14
  • 消除“毒跑道”,关键在标准 2019-02-14
  • 电商促销不得强迫商家“二选一” 2019-02-13
  • 四川郎酒股份有限公司获第十二届人民企业社会责任奖年度环保奖 2019-02-12
  • 运城市在长三角招商引资149.9亿元 2019-02-11
  • 巢湖市“文艺轻骑兵”走进市直机关幼儿园 2019-02-10
  • 广东--广东频道--人民网 2019-02-09
  • 带着任务登台的人,他们提供的数据是成问题的。例如那位林毅夫。对这类人,要睁大眼睛,保持高度警惕。 2019-02-08
  • 240| 218| 700| 592| 888| 228| 940| 395| 240| 707|