文档章节

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

CODETC
 CODETC
发布于 2014/12/10 23:21
字数 909
阅读 34
收藏 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方式。

文章来源:http://www.codetc.com/article-35-1.html


本文转载自:http://www.codetc.com/article-35-1.html

CODETC
粉丝 0
博文 4
码字总数 0
作品 0
深圳
私信 提问
分享网页加载速度优化的一些技巧?

日期:2013-2-17 来源:GBin1.com 不管你是不是相信,在最近的几年里,互联网网页的大小已经显著增大了。由HTTP Archive研究得出的结果表明,目前平均一个页面的大小是1.25M。对于拥有宽带的...

gbin1
2013/02/19
15
0
提高网页打开速度的小技巧【赞】

互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃。其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题。加快网页的打开速度,有三个路...

老先生二号
2017/05/28
0
0
前端优化:9 个技巧,提高 Web 性能

当今数字世界,存在着无数的网站,每天都需要处理各种不同的原因的访问。然而,这些网站中有很大一部分显得笨重,使用起来也很麻烦。没怎么优化的网站会被各种各样的问题困扰,包括加载时间、...

oschina
2016/12/13
7.7K
5
分享网页加载速度优化的一些技巧(转)

不管你是不是相信,在最近的几年里,互联网网页的大小已经显著增大了。由HTTP Archive研究得出的结果表明,目前平均一个页面的大小是1.25M。对于拥有宽带的用户来说,可能并不是一个问题。但...

leon_rock
2013/02/20
345
1
20 种提升网页速度的技巧

您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%。 < include java script once we verify teams wants to use ...

红薯
2009/04/12
2.2K
2

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Elasticsearch的MonitorService

序 本文主要研究一下Elasticsearch的MonitorService MonitorService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/MonitorService.java public class MonitorServic......

go4it
34分钟前
2
0
二、Docker

1、Docker - The TLDR(Too Long,Don't Read,Linxu 终端工具 ) Docker是在Linux和Windows上运行的软件。它创建、管理和编排容器。该软件以开源方式开发,在Github上作为Moby开源项目的一部分。...

倪伟伟
48分钟前
3
0
Python猫荐书系列之七:Python入门书籍有哪些?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/ArN-6mLPzPT8Zoq0Na_tsg 最近,猫哥的 Python 技术学习群里进来了几位比较特殊的同学:一...

豌豆花下猫
今天
5
0
Guava RateLimiter限流源码解析和实例应用

在开发高并发系统时有三把利器用来保护系统:缓存、降级和限流 缓存 缓存的目的是提升系统访问速度和增大系统处理容量 降级 降级是当服务出现问题或者影响到核心流程时,需要暂时屏蔽掉,待高...

算法之名
今天
13
0
国产达梦数据库与MySQL的区别

背景 由于项目上的需要,把项目实现国产化,把底层的MySQL数据库替换为国产的达梦数据库,花了一周的时间研究了国产的数据库-达梦数据库,它和MySQL有一定的区别,SQL的写法也有一些区别。 ...

TSMYK
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部