我要投稿
当前位置:首页 > 经验分享 > 你必读的HTML+CSS前端优化技巧
你必读的HTML+CSS前端优化技巧
2017/6/17 10:42:00   作者:人总是要为自己活   人气:0次  评论(0)
所属标签: 设计经验 

  对于刚学完HTML+CSS的初学者们,刚开始写代码的你们还没有前端优化的概念,其实我们不只是会做出一些网页出来,前端优化也必须被注入到代码里。有时候我们会发现一些细少的差别,为什么有的网站打开的速度特别快,有的网站打开的时候前面还有一会大白板时。这时你们有没有想过什么导致有这种差别呢?单从用户体验的角度上来讲,您愿意为打开一个网站等待多长时间?那么问题来了,前端优化,我们应该做些什么呢?如何加快网站响应的速度呢?


  blob.png

  网页内容

  

  减少http请求次数

  

  大部分网站响应时间都花费在了下载网页资源上,这里的资源指的是:图片、CSS、JS、和Flash等。我们这里讲的减少请求次数是缩短响应时间的关键点。

  

  一般情况下,可以分为两种:

  

  一是通过简化页面设计来减少请求次数。

  

  二是网页比较复杂的脚本或CSS文件可以采用多个脚本或打包放在一个文件里面,图片采用CSS Sprites(图象拼合技术),把多个图拼成一副图片,然后通过CSS来控制在什么地方显示这张图的什么位置,从而来减少请求次数,这一块的内容,大家可以参照京东下面这一块的CSS定位来实现。

  

  WEB开发者必读的HTML+CSS前端优化技巧

  

  避免页面跳转

  

  避免页面跳转是什么呢?就是当客户端收到服务器的跳转回复时,客户端再次根据服务器回复中的location指定的地址再次发送请求,也是就说,SEO上常用的301重定向

  

  比如说:

  

  我现在要让访问源码时代的同学,进到源码论坛,这就就是服务器端301重定向的实现方法

  

  RewriteEngine On

  

  RewriteCond %{HTTP_HOST} !^www.itsource.cn$ [NC]//这是客户端请求的地址

  

  RewriteRule ^(.*)$ http://bbs.itsource.cn/$1 [R=301,L]//这是客户端实际看到的网页

  

  延迟加载

  

  我们这里讲的延迟加载需要我们先知道网页最初加载最小的内容是什么,剩下的内容就可以使用延迟加载的实现。

  

  最典型的是Javascript可以延迟加载内容,这个做法是开发网页的时候先确保网页在没有javascript的时候也可以很好的显示正常的页面效果,然后通过延迟加载脚本来完成一些高级的功能效果的做法。

  

  提前加载

  

  这种方法,恰好与上面的方法相反,也就是说先提前加载一些网页中的资源,它又分三类:

  

  1.无条件提前加载

  

  该方法就是当网页加载完成后,马上去加载一些其他内容,如淘宝会在加载完成功后会去加载一些图片拼合后的图片

  

  2.有条件加载

  

  根据用户输入的信息来推断需要加载的内容,比如说百度搜索。

  

  WEB开发者必读的HTML+CSS前端优化技巧

  

  有预期的加载

  

  这个就比较高大上一些了,这个情况一般是在网页重新设计的时候,由于用户的访问行为,本地有旧网页的缓存,而新设计的网站没有,设计者可以通过在旧网页中预先加入一些新网站中可能会用到内容,这样的话,新网页就会先下载一些资源到本地。

  

  减少DOM元素数量

  

  如果网页中的元素过多也对网页的性能有影响,同时也会加重网页加载和脚本的执行,大家可以想一下,平时在使用JS的时候,我们要实现一些效果,是不是得先找到相关DOM元素,然后再执行相关操作。 如果我们网页中的元素过多,是不是就会有一个非常明显的时差呢!所以减少DOM元素数量,仍然影响网页性能。

  

  根据域名划分内容

  

  很多时候,我们在查看其它大型的网站的时候,图片的地址和网站的主域名还不一样,会采用多个域名来存放相关资源的,那为什么要这样使用呢?其实,浏览器一般对同一个域名的下载连接数有所限制,根据域名划分下载内容,可以间接的增大浏览器并行下载连接。大大提高了网站整体的下载资源能力。从而达到优化性能的作用。

  

  减少iframe数量

  

  之前,我们讲过怎么使用iframe,但是在实际的项目中,我们在使用的时候请先注意它的优缺点。

  

  优点:

  

  可以用来加载速度较慢的内容,脚本可以并行下载

  

  缺点:

  

  使用iframe内容为空时也会消耗加载时间并会阻止页面加载

  

  避免404

  

  404就是常见的没有找到服务器资源,一是:影响用户体验,打开一个返回无用信息的页面。二是网页中需要加载一个外部脚本,结果返回一个404,不仅阻塞了其他脚本下载,下载回来的内容(404)客户端还会将其当成Javascript去解析。

  

  CSS

  

  将样式表置顶

  

  由于网页内容从上往下的加载方式,我们尽可能的将CSS样式放在网页的head中会让网页显得加载速度更快,对于内容比较多的网页非常重要,至少不会让用户一直等待一个白屏上,这样的用户体验也是相当好的。

  

  假如我们把样式表放在底部的话,就是出现一种情况,浏览器会拒绝渲染已经下载的网页,因为多数浏览器在实现时都努力避免重新绘制。所以这一样也是一个重点。

  

  避免CSS表达式

  

  有一些基础CSS3的小伙伴们一直很仰慕它强大的二开能力,喜欢用一些CSS表达式来动态的设置CSS属性,在IE5~IE8中支持,其他浏览器中表达式会被忽略。

  

  其它CSS表达式的问题在于它被重新计算的次数远比我们想象的要多,所以我们还是尽量避免使用它来防止使用不当造成的性能开消过多。

  

  用link标签代替@import

  

  在网页的设计中,请尽量使用link标签来引用CSS,避免使用@import来引用,原因很简单,您可以理解为就是将CSS样式放在网页中的内容底部就可以了。


推荐阅读