首先要说的是，浏览器的渲染很多无法通过直观的试验来证明，只能推断和观察结果来纠正和解决，所以，我总结的方法，未必全部符合实际原理。
我们学习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 这样的写法。
分享到：
相关推荐
为页面中所有图片指定宽度和高度可以消除不必要的reflows和重新绘制页面【repaints】，使页面渲染速度更快。
easyui的项目方案，在火狐、chrome以及最新版ie下可以正常渲染 但在臭名昭著的ie8以下浏览器确实非常慢，简直到了无法忍受的地步 ...优化后虽不能达到火狐、chrome渲染的效率(此乃ie的硬伤)，但速度已能提高好多倍
1. 优化了浏览器双核选择逻辑，使浏览器双核切换更加智能。 2. 修复了因flash导致的静音问题。 3. 修复了部分站点无法下载文件的问题。 4. 修复了统一浏览器UA后招商银行登录界面控件无法显示的问题。 5. 修复了使用...
猎豹浏览器对Chrome的Webkit内核进行了超过100项的技术优化，使访问网页的速度更快。其具有首创的智能切换引擎，动态选择内核匹配不同网页，并且完美支持HTML5新国际网页标准。极速浏览的同时也充分保证兼容性。
猎豹浏览器对Chrome的Webkit内核进行了超过100项的技术优化，访问网页速度更快。其具有首创的智能切换引擎，动态选择内核匹配不同网页，并且支持HTML5新国际网页标准，极速浏览的同时也保证兼容性。2012年10月16日，...
##谁不喜欢美味的披萨？ 本网站支持来自 Udacity 的 这个比萨店网站是一场表演噩梦。 记录时间线轨迹并观察弹出的强制同步布局警告。 你能让这个网站以 60fps 的速度运行吗？
对于同时开启数十个页面，CPU占用率高的情况，几米浏览器提供了性能优化模式，开启此模式后，CPU占用率可瞬间降低并维持到打开一个单页面的水准，此模式对于网络浏览用户不存在兼容性问题。 屏幕截图 可以以图片...
从构建、浏览器渲染、缓存、PWA、服务端优化等多方面，梳理前端性能优化的技术点、综合分析技术的原理，根据不同的业务场景选择合适的性能优化点进行应用，最终为你的网站带来显著的速度提升和整体性能提升。
猎豹浏览器对Chrome的Webkit内核进行了超过100项的技术优化，使访问网页的速度更快。其具有首创的智能切换引擎，动态选择内核匹配不同网页，并且完美支持HTML5新国际网页标准。极速浏览的同时也充分保证兼容性。
大家谨记，我们任何一个用户端的产品，都需要把这 5 个过程滴水不漏地考虑到自己的性能优化方案内、反复权衡，从而打磨出用户满意的速度。 ## 从原理到实践：各个击破 我们接下来要做的事情，就是针对这五个过程...
傲游3.x采用开源Webkit核心，具有贴合互联网标准、渲染速度快、稳定性强等优点，并对最新的HTML5标准有相当高支持度，可以实现更加丰富的网络应用。专为国人习惯优化，更高效，更安全，更私密。另还有傲游手机浏览器...
5：优化网页渲染速度，打开网页更快 6：后台打开标签 7：双击或者中键关闭标签 8：超级拖动 9：调整核心设置等等…… 7：加入脚本功能。可以实现丰富功能 8：加入平滑滑动功能，享受丝一般顺滑的感觉 9：可以识别...
4、大幅优化了视觉效果，浏览器默认皮肤全新改版，界面更清爽、更现代；5、优化了“工具箱”平台的基础架构，使其能支持更多类型的应用；6、完善网页缩放提示和查找逻辑；7、程序模块化，程序更加灵活，以适应各种...
大家谨记，我们任何一个用户端的产品，都需要把这 5 个过程滴水不漏地考虑到自己的性能优化方案内、反复权衡，从而打磨出用户满意的速度。 ## 从原理到实践：各个击破 我们接下来要做的事情，就是针对这五个过程...
2 : 对IE模式下面的预渲染机制做了优化。 3 : 修复IE内核下面没有关闭DEP的问题（很多网银崩溃就是由于这个问题造成的）。 4 : 修复不能获取淘宝证书的问题。 5 : 修复WIN8下面不能从快捷方式点来云游的问题。 6...
猎豹浏览器对Chrome的Webkit内核进行了超过100项的技术优化，使访问网页的速度更快。其具有首创的智能切换引擎，动态选择内核匹配不同网页，并且完美支持HTML5新国际网页标准。极速浏览的同时也充分保证兼容性。