网站大提速 之一 浏览器渲染速度优化

  前言:

  要实现网站的大提速,必须在各个环节进行精确的设置和安排。网站一旦打开速度变慢,往常,站长们第一时间肯定会认为“服务器慢”,其实看完本章后,你会发现或许结果并不完全是这样。影响网站速度的因素千差万别,服务器仅是其中一小部分因素而已。一种常见的情况,同样的服务器,网站与网站之间的打开速度也千差万别,这就和网站的制作工艺有相当大的关系;本节重点讲一下网站制作工艺优化。我们可以大致将影响网络速度的因素分为五个来进行分别优化:

  一、服务器硬件配置和设置;

  二、服务器的线路及带宽;

  三、用户电脑的配置和设置;

  四、用户的线路及带宽;

  五、网站制作工艺。

  我们看到,影响网速的因素大概是这五个部分,而往往很多时候,服务器、用户的电脑配置和线路属性是无法选择的,所以我们这篇文章不细谈带宽和服务器硬件方面的问题。重点谈一下通过网站制作工艺的优化来达到网站极限提速的方法和思路,这其中是很多站长平时完全忽略的。

  当然,程序设计不当也会造成网页速度变慢。但是程序设计的种类和运行环境千差万别,造成的原因也十分复杂,本章也无法一一叙述。我的网站 泸州网采用的DZ X2作为网站引擎,由于程序设计时设计者也没有充分考虑到浏览器的渲染,所以仍然不完全符合下面的优化项目。但如果你采用的是HTML静态生成的CMS,比如DEDECMS等,就可以完全参照下面的优化项目来实施。

  浏览器的渲染速度优化:

  首先要说的是,浏览器的渲染很多无法通过直观的试验来证明,只能推断和观察结果来纠正和解决,所以,我总结的方法,未必全部符合实际原理。我们学习CSS,一开始只讲究实现结果,从未注意过CSS的渲染过程,这就造成了很多不必要的渲染浪费。在没有任何程序影响下的页面,如果出现网站打开卡、打开后机器变慢、打开过程中显示了内容却又变白屏再读一遍、点击不顺畅、上下左右拖动花屏,重渲染的主要原因。

  1.CSS,一定要写在< head >< /head >之间,让浏览器先缓存到所有CSS,也便于浏览器读取HTML结构时可以顺利渲染,如果在< body >< /body >之间出现了CSS样式定义,浏览器会重新渲染一遍网页。影响到网页打开速度;

  至于是< body >内出现了重定义样式才重新渲染,还是一旦出现样式定义就重新渲染,目前我也没有办法证实。但应尽量避免这种情况。

  2.当页面文档中大量出现需要展开、收起的树形结构(树形目录)的时候,最容易出现CSS渲染问题。我们所说的展开、收起,其实是网页元素的显示和隐藏,由于某些浏览器设计缺陷,展开一个隐藏的元素,实际上消耗很大,原因可能是display:none并没有真正隐藏元素,很可能即使是隐藏层,但该元素属性仍然需要逐一渲染。

  这种情况,一般多见于树形目录过多过于复杂的时候出现,点击一次半天不展开,机器出现缓慢。

  3.和同上的情况一样,border:0这种属性,仍然会渲染边框样式。所以正确的写法应该是:border:none,避免无意义的渲染;

  4.JS也可能会造成重渲染,所以我们应尽量整合JS,并将所有JS放置到页末< /body >之前。如果我没记错,即使JS在页头,现代浏览器大多都会默认最后加载JS;

  5.所有图片必须指定高宽属性,否则浏览器也会重新渲染网页。试想,浏览器在不知道图片高宽的情况下,浏览器无法为图片在页面上预留具体位置,而此时HTML和CSS样式也在同时下载。浏览器显然无法有效组织显示结果,只有当图片完全下载后才能确定图片的高宽,势必造成浏览器的重新渲染;

  6.背景图过小也会造成渲染困难。我们设想一下,将一个1px高宽的背景图作为背景填充满整个屏幕,需要进行多少次计算处理。所以,我们以前学的“图片尽量小”,其实是有误区存在的;

  7.尽量少用帧数过多过快的FLASH,GIF动画来装饰网页。这对网页打开速度几乎是致命的;

  8.少用滤镜,滤镜会占用更多的机器资源,也可能存在很多兼容性问题。应谨慎使用;

  9.尽量少用TABLE结构来布局。因为用FW\PS可以很方便的直接导出一个网页文件,所以老式网站都是采用TABLE布局。TABLE有一个广受诟病的问题:< TABLE >之后要遇到< /TABLE >才会完整显示内容。如果表格中内容过多,网页会半天不显示。这也是TABLE布局被淘汰的原因之一;

  10.CSS子选择符。CSS子选择符会造成一次浏览器的筛选和定位计算,所以很多文章上都不推荐使用子选择符定位样式。能用.div 的,就尽量不要用.nav ul li a .div 这样的写法。

  关于浏览器的渲染优化,目前我所了解到的就这些。下一章将会为大家服务器减压的几种主要方法:包括图片格式介绍及应用和压缩方法;Css sprite的实际应用;服务器GZIP设置;减少服务器请求数的几种介绍。

  希望广告高手指正、补充!发表请保留:http://www.luzhou6.com 泸州网夜上原创。

时间: 2024-09-19 09:54:02

网站大提速 之一 浏览器渲染速度优化的相关文章

浏览器渲染过程与性能优化

大家都知道万维网的应用层使用了 HTTP 协议,并且用浏览器作为入口访问网络上的资源.用户在使用浏览器访问一个网站时需要先通过 HTTP 协议向服务器发送请求,之后服务器返回 HTML 文件与响应信息.这时,浏览器会根据 HTML 文件来进行解析与渲染(该阶段还包括向服务器请求非内联的 CSS 文件与 JavaScript 文件或者其他资源),最终再将页面呈现在用户面前. 现在知道了网页的渲染都是由浏览器完成的,那么如果一个网站的页面加载速度太慢会导致用户体验不够友好,本文通过详解浏览器渲染页面

HTML5大提速,Famo.us 消灭浏览器原罪

自从扎克伯格宣称"豪赌HTML5是Facebook犯下的最严重错误"后,HTML5被越来越多的移动开发者抛弃,Facebook和LinkedIn等公司也推迟了HTML5应用计划.但是最新的HTML5开发框架也许将掀起新一轮"APP还是WEB"的移动开发技术路线大讨论. 历时3年开发后,Famo.us近日正式发布了其Javascript框架的beta测试版,据称开发者可以在这个框架上开发出速度和流畅度可以媲美原生APP的HTML5移动web应用. 为了证明新框架的威力

浏览器渲染流水线解析与网页动画性能优化

若干年前,我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink),这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流水线整体进行分析,所以打算重新写一篇新的文章,从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解析,能让大部分页端同学都能够看的明白,并以此作为指引来分析和优化页面的渲染/动画性能. 有些基本概念如图层,分块,光栅化基本没有发生变化,如果读者不理解的话请参考 How Rendering Work

Wordpress网站速度优化的四大秘诀

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 WordPress 是一个功能非常强大的博客系统,插件众多,易于扩充功能.安装和使用都非常方便.目前 wordpress 已经成为主流的 Blog 搭建平台.不少wordpress爱好者喜欢折腾自己的博客,以致网站越来越臃肿,网页打开速度越来越慢.所谓成也wordpress败也wordpress. 其实wordpress是一款极其优秀的轻量级

关于提高浏览器渲染页面速度的建议

怎样尽可能的缩短浏览器上页面渲染的时间,文章从以下几方面着手: 写出高效的css代码 避免使用css表达式 把css文件放在页面顶部 指定页面图片的尺寸 页面头部标明文档编码 一,写出高效的css代码 首先弄清浏览器解析html代码的过程:构建一个dom树,页面要显示的各元素都会创建到这个dom树当中.每当一个新元素加入到这个dom树当 中,浏览器便会通过css引擎查遍css样式表,找到符合该元素的样式规则应用到这个元素上.css引擎查找样式表,对每条规则都按从右到左的顺序去匹 配. 了解过程后

css的效率和浏览器渲染的速度

浏览器如何读取你的CSS选择器有一个很重要的原则,那就是它们从右到左读取.这意味这像 ul > li a[title="home"] 这样的选择器,a[title="home"] 将是最先被读取的. 我承认我并不经常想这个问题......我们写的css的效率是怎么样的呢,浏览器渲染的速度又如何呢? 这是应该是浏览器开发者应该关心的(页面加载更快,用户就会更愉快).Mozilla有一篇文章: about best practices . Google 当然也很关

高效率的网站打开速度优化方法

网站打开速度的快与慢,直接关系到访客的用户体验度.网站被加载的速度与多个要素相关,如服务器优于劣,网络带宽大与小,页面代码繁与简等.如果受限于资金,那么通过优化网页代码来加速网站打开速度,就是很有效的方法.以下是网站打开速度优化的方法详解. 一:压缩或精简Javascript代码和css代码. 无论什么类型的网站,用户第一次点击网站的时候,都会加载网站的Javascript和css代码,假设这些代码冗多,势必会降低网站打开速度. 如果有这样的问题,就要对代码进行压缩或精简.压缩方面,有大量的第三

网站权重排名大提速秘籍:简单的事情重复做

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 为什么一些默默无闻的网站反倒容易成功?为什么你总是叹息流量和排名总是低别人一等?这其中原因很多,方法可能大家都知道,但是执行起来很难,并不是大家都不愿去做,可能有些时候,这些工作很枯燥,日复一日,重复的去做!如果这点做不到,又如何奢望网站流量大提速呢? 如果在网站上线之后能把冗杂的工作细分化,直到每天要做什么,然后高效的去执行,网站流量大提速

asp.net网站不兼容360浏览器问题,很诡异,求大神帮忙

问题描述 asp.net网站不兼容360浏览器问题,很诡异,求大神帮忙 如下图这个是在本地用VS调试的情况,用360浏览器运行这个很正常,但是部署到服务器以后再用360浏览器访问是这样,布局已经乱了.这是怎么回事呢?IE 火狐 猎豹等等十几个目前主流的浏览器里面都测试了,只有360有这个问题,其他都很正常,请问这是怎么回事呢?求大神帮忙!!! 解决方案 Firefox好的360急速应该没问题..chrome显示怎么样?360急速模式用的webkit核心,和chrome一样,有开发工具的,右键审核