|
* j( E1 J1 h0 Y
如果我们在打开一个网站时速度很慢，势必会影响体验，甚至会造成用户流失、浏览量下降的情况想要解决这个问题自然就需要Web前端开发人员对前端页面进行优化，众所周知，前端的页面主要包括HTML、CSS、JS等，想要解决这个问题。
* z& a1 ]! D- X" ? 我建议可以从以下几个方面入手  , G& U. y9 T8 Q( b" t# Q
1、减少HTTP请求达到性能优化 改善响应时间最简单的途径就是减少HTTP请求的数量次数 2、使用字体图标 在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少http请求，字体图标还可以通过CSS来设置颜色、大小等样式，何乐而不为。 9 L- t2 F6 W, m- t6 e# s0 l' w
3、合并脚本和样式表 将多个样式表或者脚本文件合并到一个文件中，可以减少HTTP请求的数量从而缩短效应时间不过合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本，对于只访问该网站一个（或几个）页面的人来说可能导致反而增加了下载量。
8 f0 ]8 O/ K( }6 ^+ E8 [5 d+ g 4、CSS Sprites技术 CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，然后通过CSS background背景定位技术技巧布局网页背景。 + }6 O' I9 V/ ^7 H. A" x
这样一来，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升5、页面渲染优化在编写前端页面的时候，把CSS资源引用代码放到HTML文件的头部，这样浏览器可以优先下载CSS并尽早完成页面渲染！JavaScript的引用代码放到HTML文件底部，防止JS的加载和解析执行对页面渲染造成阻塞！
! D5 j5 n" i5 K* h 6、手机端优化在移动端访问时，不一定有WiFi，偶尔网络速度会比较慢，因此为了加快完成页面的加载，需要保证首屏加载资源最小化不是首页面的数据，我们可以采用异步加载或者滚动加载7、页面缓存优化合理利用浏览器缓存可以大大提高页面中静态资源的加载速度 。 0 V; E- n: @2 z' B# g$ ?- X
8、图片优化 在手机端上比较重要，尽量不要以原图的形式直接使用，因为那样很消耗流量，而且加载时间更长！使用较小的图片或者压缩后的图片，不仅能尽快完成加载还能节省流量以上就是我分享的Web前端页面优化的几个技巧。
* D2 b* T5 s/ {: o6 [( [ 对前端页面进行优化是前端工程师在工作中经常处理的问题之一，前端工程师能做的还有更多 - Q/ g/ P5 }( Y4 x9 [' Z
! o I$ Y6 G9 u+ A% S. e6 G8 W! \4 C2 \+ X; k, w
$ G1 ?$ h* B# B6 f3 _3 x9 m) d/ l6 T4 @) a" o
| 
