页面中CSS加载方式的优化_网站应用

1、应该将 CSS 放置于结构的上方(一般放置于 head 元素内)。CSS 是解释型语言,Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置,才可在浏览器解析结构时,对页面进行渲染。

This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.

导致的问题就是,页面会有一段时间“朴素”,突然之间又“华丽”,用户体验很不好。

2、尽量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的样式导入方式,而减少 @import 的使用,更勿使用多层嵌套的 @import 。因为在 IE 里, @import 相当于将 <link> 放在页面尾部。

This is a valid syntax, but, even though it's in the document's HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.

时间: 2024-10-25 17:31:20

页面中CSS加载方式的优化_网站应用的相关文章

jquery的deferred对象实现判断页面中所有图片加载完成

判断页面中所有图片是否加载完成 对于图片是否加载完成,我们平时可以用监听图片load 方法来进行.今天主要介绍用jquery的deferred对象来进行判断. 关于jquery的deferred对象,是jquery的重点和难点.对于执行较长时间的函数,我们通常用deferred对象.关于jquery的deferred对象的API请看http://api.jquery.com/category/deferred-object/ 对于deferred对象,大家可以看下阮一峰写的一篇文章jQuery的

几个优化WordPress中JavaScript加载体验的插件介绍_php技巧

WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能.为了最大限度地保证兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件.但是根据 Yahoo 开发者论坛的建议,加载 JavaScript 应该尽量在页尾以提高页面的显示(响应.渲染)速度.本文根据作者的使用经验介绍几个相关插件,并说明如何在某些特殊页面仍然在页头加载 JavaScript. 下面先简单介绍几个相关的优化 JavaScript 的 Wo

bootstrap-如何把jsp页面头部中那些加载css、js的命令提取出来放在一个jsp页面里

问题描述 如何把jsp页面头部中那些加载css.js的命令提取出来放在一个jsp页面里 是这样的我要做好几个jsp页面,都使用bootstrap作为前端框架 于是在每个jsp页面的 head>中都有这么一大段加载命令: <link href="css/charisma-app.css" rel="stylesheet"> <link href='bower_components/fullcalendar/dist/fullcalendar.c

CSS 加载新方式

Chrome 浏览器有意改变<link rel="stylesheet">的加载方式,当其出现在<body>中时,这一变化将更加明显.笔者决定在本文中进行详细说明这种改变可能带来影响与好处. 一.目前CSS文件的加载方式 <head> <link rel="stylesheet" href="/all-of-my-styles.css"> </head> <body> -co

ControlJS优化阿里妈妈广告提高页面脚本的加载速度

文章简介:用ControlJS优化阿里妈妈广告. 长时间以来阿里妈妈的广告载入策略一直存在些问题,很多页面也因为阻塞式的广告载入而被拉低性能,影响用户体验.毕竟阿里妈妈广告的渲染依赖于诸多嵌套的document.write.ControlJS的目标就是解决js的阻塞式渲染,因此灵玉急不可耐想与同仁们共同去揭秘ControlJS-- Steve Souders在2010年12月份发布了ControlJS项目,该项目是让开发者更好的去控制javascript文件的下载和执行,从而提高了页面脚本的加载

在css加载完毕后自动判断页面是否加入css或js文件_jquery

最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: //如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js

微信页面css加载-微信页面个别手机css加载不出来问题

问题描述 微信页面个别手机css加载不出来问题 用手机打开微信推广页面.有的手机加载页面出现css没有加载进来.页面里的图片文字还有js都 加载完整.有的手机可以正常显示. 有大神知道什么原因的吗?怎么解决 解决方案 http://zhidao.baidu.com/link?url=CGgVKSdy-T1DKU5QLxABTQ9JVtFGVKz_PstQEY5QnEFCsEI-ozXVHmYT4JJ6rqCvtKLzeekb-jKRz8rzsmoS_JJmHFmf5FkwxQM8629aP9i

javascript-【js问题】打开jsp页面时在加载过程中可以显示正在加载提示,完成后隐藏

问题描述 [js问题]打开jsp页面时在加载过程中可以显示正在加载提示,完成后隐藏 我在jsp页面中写了一个<%解析json字符串%>,在页面打开的时候会加载很慢,我想实现在页面加载时出现正在加载提示的效果,用了window.onload()和$(function(){}),都不能打开页面就显示,等<%解析json字符串%>执行完后才可以,我想问有什么办法一开始就显示. 解决方案 把window.onload()或者$(document).ready(function()){} 放

jQuery移动web开发中的页面初始化与加载事件_jquery

页面初始化事件(pagebeforecreate.pagecreate)Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件.例如:给一个input输入框约定了type=range属性会自动生成一个自定义滑动条.这些自动初始化的行为是受"page"插件控制的,它在执行前后部署部署事件,允许你在初始化前后操作页面,或者甚至自己提供初始化行为,禁止自动初始化.注以下的页面初始化事件在每个"page"只被触发一次,与每次页面在显示或者隐