首先要说的是，浏览器的渲染很多无法通过直观的试验来证明，只能推断和观察结果来纠正和解决，所以，我总结的方法，未必全部符合实际原理。
我们学习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 这样的写法。
分享到：
相关推荐
其中，渲染性能是浏览器性能优化的关键部分，本文将详细介绍浏览器渲染性能优化的相关知识点。 Render Tree 和 DOM 树 浏览器在渲染网页时，首先会构建一个 DOM 树，即 Document Object Model，DOM 树是一种树形...
本文将详细解析浏览器渲染的过程，并探讨如何进行性能优化。 首先，当用户在浏览器中输入URL并按下回车键时，浏览器会通过HTTP协议向服务器发送请求。服务器响应后，浏览器接收到的是HTML文档，这是网页的基础结构...
5. 浏览器渲染性能：浏览器渲染性能是指浏览器将服务器端请求到的数据渲染成为应用页面的速度和效率，影响着应用程序的响应速度和用户体验。 6. 应用程序性能优化：应用程序性能优化是指通过软件编码层面入手，提高...
该软件能够集成到各种主流浏览器（如Firefox、Chrome、Internet Explorer）中，实时监测网页加载过程中的各项指标，如HTTP请求时间、响应大小、DNS解析时间、TCP连接建立时间、页面渲染时间等。通过这些详细的数据，...
这款浏览器在发布时可能主打的是其快速的浏览体验，这通常与浏览器的渲染引擎、优化技术和资源管理有关。搜狗浏览器2.0声称与谷歌浏览器有相同的内核，这涉及到浏览器的核心技术——渲染引擎。 描述中提到用户对...
同时，使用`defer`和`async`属性可以异步加载JS文件，避免阻塞主线程，加快页面渲染速度。 #### 四、预加载与预渲染：前瞻性的资源管理 预加载（Preload）和预渲染（Prerender）是两种前瞻性的资源管理技术，旨在...
为了更好地优化页面加载速度，需要了解浏览器的渲染原理。 浏览器的渲染过程可以分为以下几个阶段： 1. 下载 HTML 文件：浏览器首先需要下载 HTML 文件，并对其进行解析。 2. 解析 HTML 文件：浏览器对 HTML 文件...
同时，该架构还涉及如何对浏览器的渲染引擎进行优化，以加快网页加载和渲染速度，减少内存消耗，提升用户交互体验。 在浏览器多进程架构中，通常至少包括以下几个进程：UI进程（UIProcess）、网络进程（WebProcess...
以下是一些针对Firefox启动速度优化的技巧，这些技巧主要涉及到浏览器内部的配置设置。 1. **关于配置界面**：在地址栏输入`about:config`，这会进入Firefox的高级配置界面，这里可以调整许多默认的浏览器设置。 2...
优化版Chrome 92.0.4515.131是该浏览器的一个特定版本，其主要目标在于提升用户的上网速度和浏览体验。 在技术层面上，Chrome 92.0.4515.131优化了多项关键性能指标，如加载速度和网站检测速度。这主要得益于以下几...
本文主要探讨了浏览器渲染页面的原理，特别是关键渲染路径以及CSS和JavaScript如何影响这个过程。 关键渲染路径是浏览器呈现网页时必须执行的一系列步骤，其目标是尽快显示与用户当前操作直接相关的页面内容。这个...
标题中的"在浏览器渲染并绘制框架后调用函数的简单方法"指的是AfterFrame的核心功能。它利用了浏览器的requestAnimationFrame API，这个API允许开发者在下一次重绘或合成之前安排回调函数。这样，我们可以在不影响...
总之，在Web开发过程中，合理地为图片指定宽度和高度属性，不仅能够减少浏览器的重排和重绘操作，还能够提升页面的渲染速度和用户体验。同时，正确的设置图片尺寸，保持与原始尺寸一致，并注意正确的CSS语法和元素...
QQ浏览器的高速渲染组件正是在这样的技术支撑下，旨在通过新的渲染模式提升网页加载速度，优化网页滚动平滑度，并在实际应用中显示出对于现代网页技术的卓越适应能力，其在HTML5测试中所获得的483分高分，即是一个...
优化可能涉及浏览器的启动速度、页面渲染效率和资源占用情况，以确保在繁忙的网吧环境中能提供稳定的服务。 【标签】"IE优化工具"暗示这款软件可能也包含对Internet Explorer的优化功能。尽管主要介绍的是网吧专用...
"udacity-pizza-site:Udacity 浏览器渲染优化课程" 指的是一项在线教育项目，由 Udacity 提供，专注于优化浏览器渲染性能，以提高网页加载和交互的流畅性。这个课程可能通过一个实际的比萨店网站示例来教授相关技术...
- **数据交换优化**：ProtoBuf能将结构化的数据转换为二进制格式，减少网络传输的数据量，提高加载速度。 - **性能提升**：由于ProtoBuf的解析效率高，可能会被用于优化页面渲染或JavaScript引擎中的数据操作。 - **...
5. **JavaScript引擎**：执行JavaScript代码，如V8引擎在Chrome浏览器中，它采用即时编译技术，以提高脚本运行速度。JavaScript引擎负责DOM操作、事件处理、异步编程等。 6. **存储系统**：包括Cookie、Local ...
移动APP的H5前端性能优化是提升用户体验的关键环节，它涉及到加载速度、图片显示、CSS渲染等多个方面。本文将深入探讨这些关键领域的优化策略。 首先，我们关注的是**加载优化**。加载速度直接影响用户对应用的第一...
根据提供的信息，“图片加快显示 图片 显示速度加快 方法 网络 浏览器”这一主题聚焦于如何通过各种技术和策略来提高图片在网络浏览器中的加载速度。 #### 一、理解图片加载过程 图片加载速度受到多个因素的影响，...