新闻观点

如何买彩票才能中奖:网站建设中js和CSS的渲染优化方法

2018-06-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
  • 从新的历史起点出发奋力实现中国梦 2018-09-27
  • 李芳老师:为救学生  她用身体挡住车辆——被撞后当场昏迷  抢救无效离世 2018-09-27
  • 世界杯开幕 率先入场的竟是群贵州少年 2018-09-20
  • 国家税务总局:国地税改革进入具体实施操作阶段 2018-09-20
  • 机关党建工作巡礼——江西“实干兴赣当先锋、为民服务作表率”主题实践活动 2018-09-15
  • 第44届G7峰会在加拿大魁北克不欢而散,付出九牛二虎之力终于达成一份共同性少得可怜的联合声明,本以为最起码保住西方自由世界的一些脸面。不料,文件墨迹未干,特朗普 2018-08-26
  • 大文豪们如何花式说出“我爱你”? 2018-08-26
  • 将“最多跑一次”改革进行到底 2018-08-22
  • 第五届中国—亚欧博览会 2018-08-15
  • 【理上网来·喜迎十九大】这五年,精准扶贫改善了乡村社会治理结构 2018-08-15
  • 浙江:三批次壁纸抽检不合格 选购注意“看摸擦闻” 2018-08-06
  • 湖北治理违规提取公积金 防止用公积金炒房 2018-07-28
  • 和静县首届东归节将于6月23日开幕 2018-07-20
  • 创业女青年哈丽娟:世界是自己的 与他人没关系 2018-07-18
  • 人民日报人民论坛:表达当守正,修辞立其诚 2018-07-18
  • 211| 599| 892| 124| 368| 668| 293| 473| 120| 36|