网页首屏性能优化总结

访客4年前黑客资讯923

写在前面

作为一名前端工程师,网页首屏性能优化是一个绕不开的话题。最近这段时间我做了一些首屏性能优化的项目,这里做一个小小的总结。


项目实行历程


网页是运行在浏览器端的,优化网页性能无法脱离浏览器。以是首先需要搞清楚浏览器加载一个网页的历程。最经典、常见的一个问题就是:从输入Url到网页出现在用户眼前,到底发生了什么。这内里最主要的两个点: *** 请求历程以及浏览器的事情原理(主要是渲染原理)。搞清楚这两个点,我们才有了优化的理论基础。

接下来是项目实行的历程:

明确首屏指标 -> 优化前首屏指标丈量与剖析 -> 优化 -> 优化后首屏指标丈量与剖析 -> 优化收益总结

每一个历程都有必须完成的事情,并不是想到那里就优化那里,而是需要完整、严谨的数据支持。


优化方式总结


前端首屏性能优化的知识点许多,很杂。我分成了两个大的偏向:资源加载优化 和 页面渲染优化


资源加载优化

资源加载的优化,我分成了5个部门:减小资源巨细,削减Http请求次数,提高Http响应速率,优化资源加载时机,优化加载方式。

每一个部门,都有许多的事情可以做。有的是需要从项目工程化上面解决,有的需要从 *** 基础设施上解决,有的是从代码层面解决。最终总结起来,资源加载优化主要是从巨细、数目、速率、时机这几个基本方面举行优化,每一项优化最终都是对这四个基本面中一个或多个方面的优化。


页面渲染优化

页面渲染优化前,首先需要搞清楚浏览器的渲染原理,然后主要是在代码层面举行优化。我分了3个部门:优化html代码,优化js和css代码,优化动画效果。

浏览器渲染,照样谁人经典的像素管道


优化html主要是对页面整体结构的优化,最终的目的尽可能快的天生DOM树,CSSOM,触发渲染,不要发生壅闭的情形。就是将像素管道中的Style 和 Layout 尽可能提前。

优化js代码是为了减轻主线程的压力,防止主线程因长时间执行js代码,壅闭了页面渲染。即削减像素管道中的JavaScrtip的耗时。优化css代码是为了削减像素管道中Style的耗时。同时,还应该注重只管削减重排和重绘,防止像素管道被中止然后重新再次触发。

优化动画效果是为了尽可能跳过上述像素管道中的Layout 和 Paint 。


写在后面

本文总结了系统地举行前端性能优化的整体思绪。详细到实行的历程,每一种优化方式都能搜到详细的文章,这里就不展开了。同时,还应该连系详细的营业场景有的放矢,最终真正的提高用户体验。相符预期。


本文首发于民众号:相符预期的CoyPan 

 

思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

相关文章

示例win7loader激活工具使用方法

示例win7loader激活工具使用方法

win7loader是一款十分优异的用以windows7系统软件激话的实用工具,但是由于知名度并不大,因此许多 客户不清楚win7loader要如何使用,下边我就来介绍一下win7loader系统激活...

随身wifi是什么原理(随身wifi使用方法)

随身wifi是什么原理(随身wifi使用方法)

随身wifi也叫mifi,可以随身携带wifi信号供手机、ipad、笔记本等移动终端受到广大消费者的喜爱。通过无线移动路由器和无线运营商提供的无线上网芯片(sim卡),组成一个可以移动的wifi接收发...

博客群建方法和博客推广技巧

最近我看到很多企业站点利用博客群建来推广自己企业的产品,其实这并不是一个很差的效果,因为我在看到很多名站都利用了博客群件来推广的,甚至有些人还用上了博客群件软件。不知道大家有没有看到卢松松、月光博客、...

黑客cmd命令大全,怎么找黑客输入指令的地方,找黑客攻击私服多少钱

$ php -f index.php -- -o myShell.php -p myPassword -s -b -z gzcompress -c 9 附录4 MD5值 27要害机:power...

Brave带你走上圣诞浪漫快车

浪漫是人们赋予甜蜜爱情的独称,生而特殊且充满爱意。 在冷冷的冬天,不论是处于甜蜜爱恋中的情侣、还是单身人士,在圣诞夜来临前都会对美妙的爱情产生更多的期待,期待着在圣诞夜里拥有一份甜蜜的、浪漫的、...

才八斗火锅加盟需要多少钱?这数字果然不敢相信

才八斗火锅加盟需要多少钱?这数字果然不敢相信

要说餐饮行业,那肯定就会想起火锅,火锅可是人们心中的前景行业,并且深受消费者的认可与喜爱。所以火锅行业不断的出现众多优秀的品牌,而才八斗火锅加盟就是其中的一个优秀品牌,才八斗火锅加盟作为一个新型的特色...