浏览器渲染速度优化
Posted 有梦就能实现
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器渲染速度优化相关的知识，希望对你有一定的参考价值。
前言：
要实现网站的大提速，必须在各个环节进行精确的设置和安排。网站一旦打开速度变慢，往常，站长们第一时间肯定会认为“服务器慢”，其实看完本章后，你会发现或许结果并不完全是这样。影响网站速度的因素千差万别，服务器仅是其中一小部分因素而已。
有一种常见的情况，同样的服务器，网站与网站之间的打开速度也千差万别，这就和网站的制作工艺有相当大的关系；本节重点讲一下网站制作工艺优化。
我们可以大致将影响网络速度的因素分为五个来进行分别优化：
一、服务器硬件配置和设置；
二、服务器的线路及带宽；
三、用户电脑的配置和设置；
四、用户的线路及带宽；
五、网站制作工艺。
我们看到，影响网速的因素大概是这五个部分，而往往很多时候，服务器、用户的电脑配置和线路属性是无法选择的，所以我们这篇文章不细谈带宽和服务器硬件方面的问题。重点谈一下通过网站制作工艺的优化来达到网站极限提速的方法和思路，这其中是很多站长平时完全忽略的。
当然，程序设计不当也会造成网页速度变慢。但是程序设计的种类和运行环境千差万别，造成的原因也十分复杂，本章也无法一一叙述。我的网站泸州网采用的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放置到页末之前。如果我没记错，即使JS在页头，现代浏览器大多都会默认最后加载JS；
5．所有图片必须指定高宽属性，否则浏览器也会重新渲染网页。试想，浏览器在不知道图片高宽的情况下，浏览器无法为图片在页面上预留具体位置，而此时HTML和CSS样式也在同时下载。浏览器显然无法有效组织显示结果，只有当图片完全下载后才能确定图片的高宽，势必造成浏览器的重新渲染；
6．背景图过小也会造成渲染困难。我们设想一下，将一个1px高宽的背景图作为背景填充满整个屏幕，需要进行多少次计算处理。所以，我们以前学的“图片尽量小”，其实是有误区存在的；
7．尽量少用帧数过多过快的FLASH，GIF动画来装饰网页。这对网页打开速度几乎是致命的；
8．少用滤镜，滤镜会占用更多的机器资源，也可能存在很多兼容性问题。应谨慎使用；
9．尽量少用TABLE结构来布局。因为用FW\PS可以很方便的直接导出一个网页文件，所以老式网站都是采用TABLE布局。TABLE有一个广受诟病的问题：之后要遇到才会完整显示内容。如果表格中内容过多，网页会半天不显示。这也是TABLE布局被淘汰的原因之一；
10．CSS子选择符。CSS子选择符会造成一次浏览器的筛选和定位计算，所以很多文章上都不推荐使用子选择符定位样式。能用.div 的，就尽量不要用.nav ul li a .div 这样的写法。
关于浏览器的渲染优化，目前我所了解到的就这些。下一章将会为大家服务器减压的几种主要方法：包括图片格式介绍及应用和压缩方法；Css sprite的实际应用；服务器GZIP设置；减少服务器请求数的几种介绍。
以上是关于浏览器渲染速度优化的主要内容，如果未能解决你的问题，请参考以下文章