codetc - 网站开发技术 首页 前端 查看内容

优化网页加载速度的一些技巧

2014-11-6 16:13| 发布者: CODETC| 查看: 1826| 评论: 0

在网络慢的时候,浏览网页时经常出现裸奔的现象,对于这种情况如何尽量避免这一问题,在我们无法更换服务器或提高服务器速度的情况下,要想让我们的页面不”裸”在用户面前,现在整理一些思路写出来,以供大家参考:

优化CSS:
  • 不要使用*{}经常有前端开发人员使用*{margin:0;padding:0}来进行CSS重置,这种方法虽然写起来简单,但是渲染起来浏览器引擎要遍历所有的标签,会影响效率。建议的的解决办法:把你常用到的这些标签进行处理;例如:body,li,p,h1{margin:0;padding:0},可以参考一下大网站的CSS重置代码。
  • 页面上少用绝对定位(position:absolute)是网页布局中很常用到的,特别是作一些浮动效果时,也会让页面看起来非常的酷。但因为浏览器的渲染机制,网页中如果使用过多的绝对定位,会让你的网页变得非常的慢。建议的解决办法:尽可能少用,能用变通实现同样的效果,就用变通的办法。
  • 让属性尽可能多的去继承父级元素,而不是覆盖父级元素。
  • CSS的层次不能太多#zishu.info.tool.sidebarh2{font-size:12px;},这是非常不推荐的,推荐写法:.zishu-s-h2{font-size:12px;}。
  • 不要放空的class或没有的class在HTML代码中,这样无意义。
  • 合理的布局,可以改变CSS的写法以及渲染过程。

缩小页面:
利用(X)HTML CSS方式搭建网站结构,并使用程序自动压缩CSS和JS文件;

减少HTTP请求:
  • 由于客户端每显示一张图片都会向服务器发送请求,所以在使用图片时能少则少,能合则合,譬如文本编辑器中的小图标或鼠标事件出发的切换图片都可以用一张图解决,不过你可能会有这样的疑问:图片的合并不是又导致图片过大影响下载了吗?其实这样的顾虑在网络不是非凡慢的情况下是多余的,因为在200K以内的图片,并不会明显感觉下载变慢了;
  • 这点是我想着重强调的,即适当地仅将关于版快的CSS设为外部链接,例如可以把CSS划分成四类:基本设置CSS、版快划分CSS、公用版快CSS、特色版快CSS,而其中的基本设置和版快划分所用到的CSS就可以在内部直接引用,这样既可以减少了HTTP请求,又避免了页面彻底裸奔;
  • 分离逻辑层和结构层,即把后台代码从XHTML中独立出来,这样就优先载入页面结构以及结构图片,后一步载入当前页面数据;

提高客户端速度:
关于这点的解决方法主要就是针对JS的编写了,只说两个需要注重的小点:尽可能的少用索引访问,尽量不要使用appendChild方式。
文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-35-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部