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

2016-02-20 00:30 2 1 收藏

在这个颜值当道，屌丝闪边的时代，拼不过颜值拼内涵，只有知识丰富才能提升一个人的内在气质和修养，所谓人丑就要多学习，今天图老师给大家分享优化浏览器渲染：将样式表放在页面顶部，希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发】

将样式放在页面头部

概述

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

详细信息

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

建议

HTML 4.01规范（）规定，始终把使用link标签的外部样式表放在head部分里。不要使用@import。还要确保您指定的样式有。

把style区块放在head部分里。

来源:http://www.tulaoshi.com/n/20160220/1631987.html

上一篇： css教程：关于CSS不透明的详细介绍
下一篇：重新认识一下网页标准

看过《优化浏览器渲染：将样式表放在页面顶部》的人还看了以下文章更多>>

QQ浏览器高速渲染组件

标签：浏览器

QQ浏览器高速渲染组件 1、什么是高速渲染组件? 高速渲染组件是QQ浏览器通过轻快的方式来进一步提升核心能力而推出的一款扩展组件，它： 1)坚持轻快、简洁的理念。采用轻量的扩展组件方式(而非传统的双核方式)来实现全新的高速渲染模式; 2)高速渲染组件目前支持Chromium v31，进一步增强了网页渲染能力，更好的支持网页平滑...

ie浏览器多页面浏览设置

标签：浏览器

ie浏览器多页面浏览设置步骤一、首先打开ie浏览器，打开之后，然后点击ie菜单栏上面的工具-internet选项如图所示：步骤二、点击之后就会打开internet选项设置窗口了。我们在常规选项卡上找到更改网页在选项卡中显示的方式后面的设置按钮，如图所示：步骤三、之后打开选项卡浏览器设置窗口了，现在在窗口上的打开新选项...

CSS样式表最佳习惯

标签： Web开发

大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说，开发人员应尽可能将内容与结构分离开来。这样做的好处在于： 1：增加站点的寿命不规范的样式表可能在当时觉得很方便，但新版本的浏览器出来以后，很可能就会出现兼容性问题。到时...

CSS样式表常用技巧

标签： Web开发

CSS样式表常用小技巧 · ul 标签在 Mozilla 中默认是有 padding 值的，而在 IE 中只有 margin 有值。 · 同一个的 class 选择符可以在一个文档中重复出现，而 id 选择符却只能出现一次；对一个标签同时使用 class和 id 进行 CSS 定义，如果定义有重复，id 选择符做的定义有效。 · 初学可能会碰到这样一个情况，同样一个标签的属性在 IE ...

CSS样式表书写顺序

标签： Web开发

整理了一下自己写CSS时的顺序，跟大家分享下。下表顺序为从上到下，从左到右： ======================== display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float width max-width || min-width height max-height || min-height...

查看更多精彩>>