浏览器渲染速度优化

时间 2019-11-12

标签浏览器渲染速度优化栏目浏览器繁體版

原文原文链接

前言：浏览器

要实现网站的大提速，必须在各个环节进行精确的设置和安排。网站一旦打开速度变慢，往常，站长们第一时间确定会认为“服务器慢”，其实看完本章后，你会发现或许结果并不彻底是这样。影响网站速度的因素千差万别，服务器仅是其中一小部分因素而已。缓存

有一种常见的状况，一样的服务器，网站与网站之间的打开速度也千差万别，这就和网站的制做工艺有至关大的关系；本节重点讲一下网站制做工艺优化。服务器

咱们能够大体将影响网络速度的因素分为五个来进行分别优化：网络

1、服务器硬件配置和设置；布局

2、服务器的线路及带宽；学习

3、用户电脑的配置和设置；优化

4、用户的线路及带宽；动画

5、网站制做工艺。网站

咱们看到，影响网速的因素大概是这五个部分，而每每不少时候，服务器、用户的电脑配置和线路属性是没法选择的，因此咱们这篇文章不细谈带宽和服务器硬件方面的问题。重点谈一下经过网站制做工艺的优化来达到网站极限提速的方法和思路，这其中是不少站长平时彻底忽略的。设计

固然，程序设计不当也会形成网页速度变慢。可是程序设计的种类和运行环境千差万别，形成的缘由也十分复杂，本章也没法一一叙述。个人网站泸州网采用的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设置；减小服务器请求数的几种介绍。