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

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

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

【 tulaoshi.com - Web开发】

将样式放在页面头部

概述

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

详细信息

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

建议

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

把style区块放在head部分里。

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

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

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

关于CSS样式表

标签： Web开发

一.在学习css之前你应该掌握哪些基础知识 1.什么是网页，什么是超文本语言（html）。 2.会使用Dreamweaver等常用的网页编辑器。 Dreamweaver是现今最好的网站编辑工具之一，而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS，用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver8在页面中加...

ie浏览器多页面浏览设置

标签：浏览器

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

如何将谷歌浏览器设为默认浏览器

标签：浏览器谷歌浏览器

控制面板首先，打开控制面板默认程序在所有控制面板项——》默认程序点击设置进入默认程序界面，点击第一个“设置默认程序”，这时候会加载电脑上的软件，如果软件安装的比较多，则需要等待一小会儿。运行更改点击谷歌浏览器，设置为默认选项，同时可以设置一下关联文件默认打开(设置默认的时候，一...

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...

CSS样式表最佳习惯

标签： Web开发

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

查看更多精彩>>