百花

【飞起】手把手教你如何前端页面秒开!!

来源:首页 | 时间:2018-12-04

  没有最快,只有更快!世上武功,唯快不破!新能源汽车百公里加速4.x秒!...,可以说,人类对于速度的追求是永无止境的。在网页上也是一样,网页打开的速度快点,再快点,还能再快点吗?!

  所以在前端开发领域,速度是一个永恒的话题。经过无数前端开发人员多年的积累,比较典型的就有雅虎34条优化网站法则,还有Yslow22条等之类的优化规则。

  如果同学们仔细的读过,甚至是研究过网站优化方面的资料,你会发现,网站优化是一个很大的系统性的工程。如果把优化的重心只放在前端,那么只能做到页面优化,而无法做到网站的优化。

  首先,用户打开网页第一个接触到的并不是网页、img、js等,而是你的网站的带宽!假设,你给你的网站放的是1000M光纤,那么我访问你的网站,自然是速度飞快!

  如果你给你的网站的带宽是adsl小水管,那么我相信,无论前端再怎么优化,用户访问你的网站也是龟速。

  所以第一步就是CND加速,这个是硬件方面的,是要花钱的!当然了,许多老板一听花钱,脸就拉长了。

  减少网络请求数,比较常见的方法,就是把许多小图片都合并为一张背景透明的大图,这种作法被称为CssSpirite。

  然后在css当中使用背景定位来显示特定位置的背景图片。 就这样,引用同一张大图上的,不同位置的二个小图片,

  另外就是webpack等自动化前端构建工具对于资源文件的压缩、合并、打包了。

  有一点要注意的是,压缩与打包并不是无限制的,每个文件的体积在25k左右时速度最佳,然后同一时期内的压缩资源最好在5个以内。否则 的话,你把整个网站打成一个大包算了,只有一个dns请求了。

  缓存嘛,简单的讲,就是你访问某个网站,它会保存一些资源在你的电脑里,例如图片、js、css之类的,然后你下次再来的时候,他会判断如果你的访问是相同的地址,那么直接你访问的网页就直接调用你电脑里的文件了,这样速度就会很快。

  可以在你的网站里设置cache-control和expires属性,可以设计缓存的日期。另外有一点,如果你的网站要更新大量的图片,建议分步骤、分阶段的更新。

  这样会避免用户的电脑中大量的缓存失效。在大流量访问的情况下,甚至会造成资源服务器瞬时负载过大,造成网络阻塞,导致用户端网站白屏之类的严重情况。

  一、 无论你使用什么框架,在操作dom的时候要尽量的减少它的查找和重绘。因为这种操作是最消耗时间和资源的。当然你可以说,我使用的是react、vue,但我想告诉你说,前端开发不操作dom,是不可能的。

  在操作dom中,例如for循环,把.length之类的需要查询的值,都提前查出来,然后放在某个变量里保存好。

  这方面的内容很多,今天先写到这里,看看同学们的反应哈,返回搜狐,查看更多

百花相关

    无相关信息