浏览器渲染速度优化

前言:

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

有一种常见的情况,同样的服务器,网站与网站之间的打开速度也千差万别,这就和网站的制作工艺有相当大的关系;本节重点讲一下网站制作工艺优化。

我们可以大致将影响网络速度的因素分为五个来进行分别优化:

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

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

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

四、用户的线路及带宽;

五、网站制作工艺。

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

当然,程序设计不当也会造成网页速度变慢。但是程序设计的种类和运行环境千差万别,造成的原因也十分复杂,本章也无法一一叙述。我的网站泸州网采用的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设置;减少服务器请求数的几种介绍。

时间: 2024-10-12 20:22:52

浏览器渲染速度优化的相关文章

浏览器渲染性能优化

染性能 页面不仅要快速加载,而且要顺畅地运行:滚动应与手指的滑动一样快,并且动画和交互应如丝绸般顺滑. 60fps 与设备刷新率 目前大多数设备的屏幕刷新率为 60 次/秒.因此,如果在页面中有一个动画或渐变效果,或者用户正在滚动页面,那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致. 其中每个帧的预算时间仅比 16 毫秒多一点 (1 秒/ 60 = 16.66 毫秒).但实际上,浏览器有整理工作要做,因此所有工作需要在 10 毫秒内完成.如果无法符合此预算,帧率将下降,并

浏览器渲染阻塞与优化-详解推迟加载、异步加载。

我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力.所以性能优化对前端真的很重要!!! 本文介绍了什么是阻塞.为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项. 浏览器渲染阻塞与优化      什么是阻塞?在页面中我们通常会引用外部文件,而浏览器在解析HTML页面是从上到下依次解析.渲染,如果<head>中引用了一个a.js文件,而这个文件很大或者有问题,需要2秒加载,那么浏览器会停止渲染页面(此时是白屏显示,就是页面啥都没有),2秒后加载完成才会继续渲染,这个就是阻塞

COCOS2DX 3.0 优化提升渲染速度 Auto-batching

最近在看COCOS2DX 3.0的Auto-batching合批与Auto Culling动态缩减功能下面就来仔细看看吧:整合好的渲染提速干货: 简介 在游戏的绘制渲染中,往往消耗很多资源和内存,当绘制精灵数量越多,游戏的卡顿会很明显,为了优化和提升渲染效率.Cocos2d-x为我们提供了Auto-batching和SpriteBatchNode. Auto-batching 意思是Renderer将多次draw的调用打包成一次big Draw 调用.(又名批处理). SpriteBatchNo

浏览器渲染优化

在学习react-script时有推荐学习渐进式web apps里有一个关于讲解浏览器渲染优化的视频,内容如下 每个视频都很短小,但是每个知识点都讲的极好,还有一些小测试辅助,跟着老师做,对浏览器渲染会有进一步的认识.

网页性能优化:防止JavaScript、CSS阻塞浏览器渲染页面

网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染页面的过程就会被阻塞2秒,直到该JS文件下载并执行完后才继续. 前端性能调优时必须排除任何潜在的渲染阻塞点,让浏览器在最短时间内渲染出整体页面. 1.JavaScript为何会阻塞? <!doctype html> <html> <head> <script type

优化浏览器渲染

优化浏览器渲染,要从关键渲染路径出发,基本上是优化HTML.CSS.JS的依赖关系. 其中HTML构建的DOM消耗是必须的. 1. 从阻塞渲染的CSS出发 CSS默认是阻塞渲染的资源. 根据浏览器渲染的过程可知,浏览器渲染的基础是DOM和CSSOM.在生成CSSOM之前,不会渲染任何内容. 生成CSSOM的过程是先从服务器下载CSS文件(不管阻塞与否都要先下载),然后过滤出阻塞渲染的CSS文件生成CSSOM. 为了缩短生成CSSOM的时间: 1. 应该尽量精简CSS 2. 利用媒体类型和媒体查询

[转]浏览器渲染机制——一定要放在body底部的js引用

转自:http://blog.csdn.net/u012251421/article/details/50536265 说明: 本文提到的浏览器均是指Chrome. “script标签“指的都是普通的不带其他属性的外联javascript. web性能优化的手段并不是非黑即白的,有些手段过头了反而降低性能,所以在讨论条件和结论的时候,虽然很多条件本身会带来其他细微的负面或正面影响,为了不使论述失去重点,不会扩展太开. 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如:为什

浏览器渲染页面原理(看到一个网站写的不错 收录的,一起学习)

当了解web访问原理后,与前端工程师或页面重构师工作更为关系密切的应该是浏览器,WEB 页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验, 特别是浏览器渲染页面的原理,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则. 主要过程:(主要参考文章:http://www.webskys.com/artilc/228.html) 1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓

浏览器渲染页面原理

当了解web访问原理后,与前端工程师或页面重构师工作更为关系密切的应该是浏览器,WEB 页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验, 特别是浏览器渲染页面的原理,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则. 主要过程:(主要参考文章:http://www.webskys.com/artilc/228.html) 1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓