新闻观点

盈丰国际新澳博:网站建设中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
  • 甘肃天水:全面加强部队作风建设 2018-12-11
  • 河北明确“多规合一”路线图和时间表 2018-12-10
  • 为人民谋幸福 奋力走好新时代长征路 2018-12-09
  • 微软进军新零售 开发自动结账系统或与沃尔玛合作 ——凤凰网房产北京 2018-12-08
  • 中华人民共和国建筑法 2018-12-08
  • 第535期:草莓被评“最脏水果”?!真OR假 2018-12-07
  • “五大观念”的时代价值(望海楼) 2018-12-07
  • 首批甲骨文释读优秀成果 获奖名单公布 2018-12-06
  • 妳这四两是想说:只有懒惰,才能激励荷尔蒙[微笑] 2018-12-05
  • 北京东城区“大部制”改革初见效 2018-12-04
  • 十三届全国人大一次会议闭幕会 2018-12-04
  • 【读懂马克思·院长名家谈⑨】马恩视野中的“亚洲新纪元的曙光” 2018-12-03
  • 国家安全与每一位公民息息相关-光明时评 2018-12-02
  • (两会受权发布)中国人民政治协商会议全国委员会常务委员会工作报告 2018-12-01
  • 创造历史!权健恐成亚冠唯一中超队 索萨帅位转危为安 2018-12-01
  • 708| 543| 315| 930| 464| 980| 289| 359| 589| 624|