优化浏览器渲染:将样式表放在页面顶部

将样式放在页面头部

概述

将内联样式块和<link>元素从页面<body>移动到页面<head>中,这样能提高渲染性能。

详细信息

在HTML文件<body>中指定外部样式表和内联样式块可能对浏览器的渲染性能产生不利影响。浏览器阻塞渲染网页直到所有外部的样式表都已被下载。(用<style>标记指定的)内联样式块可能会导致reflows和页面跳动。因此,把外部样式表和内联样式块放在页面的<head>中是很重要的。通过确保样式表首先被下载和解析,可以让浏览器逐步渲染页面

建议

HTML 4.01规范(第12.3节)规定,始终把使用<link>标签的外部样式表放在<head>部分里。不要使用@import。还要确保您指定的样式有正确的顺序。

把<style>区块放在<head>部分里。

时间: 2024-09-15 19:26:25

优化浏览器渲染:将样式表放在页面顶部的相关文章

将样式表放在顶部——高性能网站建设指南规则5(读书笔记)

PS:以下内容仅仅为个人读书笔记,如有错漏,随时欢迎指正.同时希望能有更多的前端爱好者们共同分享你们的心得! 背景 阅读<高性能网站建设指南>第五章,文章中, 作者建议最好将CSS文件(样式表)放在文档顶部,即<head>标签之间.当然这是在一定的应用前提之下的--该样式表在页面呈现时可能并 不需要,而是作用于由于用户与页面的交互行为而产生的动态标签.比方说你点击某个显示有"猛击我吧!!"的连接,然后页面弹出个DIV,用绿色字体和 24px的字号大小显示的标准国

学习CSS:优化我们的CSS样式表代码

css|样式表|优化 最近看过许多网友制作的SKIN的CSS文件,发现其中有着许多冗余的代码.下面我来跟大家介绍一下,如何清除这些冗余的代码,让你的CSS文件更加简洁. 一.margin.padding属性 参照相关资料我们可以知道,margin和padding代表的意思分别是外部边距和内部填充距离,在许多网友的CSS中,关于这两个属性的冗余代码是出现得最多的.比如:margin:0px,大家可以查看一下自己的CSS文件中,是否许多的margin:0px,其中有的是不需要的,你可以尝试删除它,当

优化浏览器渲染:指定图片尺寸

概述 为页面中所有图片指定宽度和高度可以消除不必要的reflows和重新绘制页面[repaints],使页面渲染速度更快. 详细信息 当浏览器勾画页面时,它需要能够流动的,如图片这样的可替换的元素.提供了图片尺寸,浏览器知道去环绕附近的不可替换元素,甚至可以在图片下载之前开始渲染页面.如果没有指定的图片尺寸,或者如果指定的尺寸不符合图片的实际尺寸,一旦图片下载,浏览器将需要reflows和重新绘制页面.为了防止reflows,在HTML的<img>标签中或在CSS中为所有图片指定宽度和高度.

优化浏览器渲染:避免CSS expressions

概述 CSS表达式会降低浏览器的渲染性能:用其他方案替换它们将会改善IE浏览器的渲染性能. 注意:本节最佳实践只适用于Internet Explorer 5到7,它们支持CSS表达式.Internet Explorer 8放弃使用CSS表达式,而其他浏览器是不支持的. 详细信息 作为一种动态改变文档属性来响应各种事件的的手段,Internet Explorer 5引入了CSS表达式或 "动态属性".它们由在CSS声明中的CSS属性值里嵌入JavaScript表达式构成.在大多数情况下,

Firefox与IE浏览器在CSS样式表中的差异

1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用"*+html",现在用IE7浏览一下,应该没有问题了. 现在写一个CSS可以这样: #1 { color: #333; } /* Moz */* html #1 { color: #666; } /* IE6 */*+html #

关于提高浏览器渲染页面速度的建议

怎样尽可能的缩短浏览器上页面渲染的时间,文章从以下几方面着手: 写出高效的css代码 避免使用css表达式 把css文件放在页面顶部 指定页面图片的尺寸 页面头部标明文档编码 一,写出高效的css代码 首先弄清浏览器解析html代码的过程:构建一个dom树,页面要显示的各元素都会创建到这个dom树当中.每当一个新元素加入到这个dom树当 中,浏览器便会通过css引擎查遍css样式表,找到符合该元素的样式规则应用到这个元素上.css引擎查找样式表,对每条规则都按从右到左的顺序去匹 配. 了解过程后

使用样式表控制IE5.5浏览器中滚动条

控制|浏览器|样式表 自从dhtml出现以来,微软对dhtml功能的加强就没有停止过,在微软最新的游览器internet explorer 5.5的的ie5.5增加了许多新的样式表内容,对滚动条的样式进行修改也是其中之一,下面我们简单地介绍一下涉及浏览器滚动条的样式表内容: 1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.s

串接样式表(CSS)来显示XML文件

css|xml|显示|样式表     在本章中,你将学习显示XML 文件于Microsoft Internet Explorer 5 中的第一种方法:串接样式表(CSS).串接样式表是一个包含安排XML 文件中元素相关指令的档案.因为你已经利用XML创造了自己的元素,浏览器并不知道如何适当地显示这些元素.建立串接样式表并将它链接到XML 文件中便是一种告诉浏览器如何显示文件中每个元素的方法.附加串接样式表的XML 文件可以直接在Internet Explorer 5 中被开启.你不需要使用HTM

样式表(CSS:Cascading Style Sheets)学习[上]

css|样式表 一.样式表基础 1. 样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类(class).标识符(id).伪类(pseudo class,它们标示了超链接的不同状态)等. 2. 将样式表(规则)添加到HTML文档中有3种方式: ① 外部样式表. ② 应用于整个文档的样式,位于<head>区,包括嵌入样式表和输入样式表. ③ 行内样式,通过绝大多数元素的style属性实现. 3. 样式表内的注释用/* -*/.通过将样式规则包围