我正在尝试针对开发人员的Google文档优化CSS交付https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
正如您在内联一个小CSS文件的示例中所看到的那样,内联中的内核中的关键CSS和原始的small.css在页面加载后加载.
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
关于这个例子的问题:
如何在页面加载后加载大型css文件？
在使用Google PageSpeed分析JSF 2.1 + PrimeFaces 4.0 webapp的性能时,它建议推迟解析JavaScript文件.在一个测试页面<p:layout>,并用表格<p:watermark>和<p:fileUpload>它看起来像如下...
<p:layout>
<p:layoutUnit position="west" size="100">Test</p:layoutUnit>
<p:layoutUnit position="center">
<h:form enctype="multipart/form-data">
<p:inputText id="input" />
<p:watermark for="input" value="watermark" />
<p:focus for="input" />
<p:fileUpload/>
<p:commandButton value="submit" />
</h:form>
</p:layoutUnit>
</p:layout>
...它列出了可以推迟的以下JavaScript文件:
primefaces.js (219.5KiB)jquery-plugins.js (191.8KiB)jquery.js (95.3KiB)layout.js (76.4KiB)fileupload.js (23.8KiB)watermark.js (4.7KiB)它链接到此Google开发人员文章,其中解释了延迟加载以及如何实现它.你基本上需要<script>在onload事件期间动态创建所需的window.在最简单的形式下,旧的和错误的浏览器被完全忽略,它看起来像这样:
<script>
window.addEventListener("load", function() {
var script = document.createElement("script");
script.src = "filename.js";
document.head.appendChild(script);
}, false);
</script>
好吧,如果您可以控制这些脚本,这是可行的,但所列出的脚本都被JSF强制自动包含.此外,PrimeFaces呈现一堆内嵌的脚本到HTML被直接调用输出$(xxx)从 …
我知道脚本文件可以在资源包含上使用DEFER和ASYNC关键字.这些关键字是否也适用于样式表(即CSS)包括？
语法可能是:
<link rel="stylesheet" type="text/css" href="./path/to/style.css" defer />
我只是不知道是否允许.
我正在创建一个包含大量大图像的页面,所以我自然希望确保页面加载没有太多麻烦.我在这里阅读这篇文章http://24ways.org/2010/speed-up-your-site-with-delayed-content
推迟的方法如下(从页面中提取,不介意URL)
<div>
<h4>
<a href="http://allinthehead.com/" data-gravatar-hash="13734b0cb20708f79e730809c29c3c48">
Drew McLellan
</a>
</h4>
</div>
然后一段js负责图像加载
$(window).load(function() {
$('a[data-gravatar-hash]').prepend(function(index){
var hash = $(this).attr('data-gravatar-hash')
return '<img width="100" height="100" alt="" src="http://www.gravatar.com/avatar.php?size=100&gravatar_id=' + hash + '">'
});
});
我不打算为每个图像执行此操作,但对于某些我不需要在页面加载时显示的图像.
这是最好的方式还是有更好的方法通过延迟图像来实现更快的页面加载？
谢谢
我正在尝试为以下场景实现jQuery Deferred.pipe()方法:
这是我尝试过的东西:
var addUserSuccess = function( data ) {
if ( data.returnCode !== "success" ) {
return $.Deferred().reject('Error saving user');
}
getUsers();
}
var addUser = function() {
return $.ajax(url, {
type: "POST",
data: { username: 'test' },
contentType: "application/json",
dataType: "json"
});
}
var displayUsers = function( data ) {
$('#myTmpl').tmpl(data.d).appendTo('#myDiv');
}
var getUsers = function () {
return $.ajax(url, {
type: "GET",
data: {},
contentType: "application/json",
dataType: "json"
});
}
$.when(addUser()).pipe(addUserSuccess).then(displayUsers) …曾几何时,有很多激烈的争论<script>在<head>或<body>.
许多SO帖子已经指出了最佳实践/经验法则是<script>在<body>不阻止html解析器之前放置前端,从而更快地获得第一次屏幕绘制和更快的客户端DOM访问,从而获得更好的用户体验.
这必须是重复的("□")╯
等等...... 现在<script>可以deferred,实际上已经有一段时间了!
老帖说
延迟脚本可能会导致JS依赖问题
不,它不会.它在解析DOM时立即保留执行顺序.
它不适用于跨供应商
是的,它曾经是,但今天它几乎得到了所有主要浏览器供应商的支持:http://caniuse.com/#search=defer,除了评论指出IE <10之外可能还有一些问题.
然而,它提供的好处似乎是显而易见的,至少在我看来,因为它在早期(在开始解析DOM之前)并行下载脚本,因此不需要稍后请求脚本并缩短整个脚本所需的时间.页面互动.
简而言之,这个问题类似于:任何不使用的好理由
<head>
...
<script src='cdn/to/jquery' defer>
<script src='cdn/to/bootstrap' defer>
<script src='script/depends/on/jqueryandbootstrap' defer>
</head>
而是使用这个:
<body>
...
<script src='cdn/to/jquery'>
<script src='cdn/to/bootstrap'>
<script src='script/depends/on/jqueryandbootstrap'>
</body>
注意:这可能是一个有很多讨论的"古老"话题.但是,随着Web技术的快速发展,浏览器供应商更好地与新的Web规范保持一致,许多旧的stackoverflow答案可能无法保持最新.
为了避免javascript阻止网页呈现,我们不能只是简单地在结束</body>标记之前加载/执行所有的JS文件/代码吗？
只有在呈现所有页面之后才会下载和执行所有JS文件和代码,因此需要像本文中建议的那样加载JS文件的非阻塞技术.他基本上建议使用如下代码:
document.getElementsByTagName("head")[0].appendChild(script);
为了在渲染网页的同时推迟脚本,从而导致网页的快速渲染速度.
但是,如果不使用这种类型的非阻塞技术(或其他类似技术),我们不会通过简单地将所有JS文件(要加载/执行)放在结束</body>标记之前来实现相同的非阻塞结果吗？
我更惊讶,因为作者(在同一篇文章中)建议将他的代码放在结束</body>标记之前(参见文章的"脚本放置"部分),所以他基本上是在结束</body>标记之前加载脚本.他的代码需要什么呢？
我很困惑,任何帮助表示感谢,谢谢!
UPDATE
仅供参考,Google Analytics正在使用类似的非阻止技术来加载其跟踪代码:
<script type="text/javascript">
...
(function()
{
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'your-script-name-here.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s); //why do they insert it before the 1st script instead of appending to body/head could be the hint for another question.
})();
</script>
</head>
这是一个测试框架,用于显示我在做什么:
(使用控件的默认名称)
public partial class Form1 : Form
{
private List<bool> boolList = new List<bool>();
BindingSource bs = new BindingSource();
public Form1()
{
InitializeComponent();
boolList.Add(false);
bs.DataSource = boolList;
checkBox1.DataBindings.Add("Checked", bs, "");
this.button1.Click += new System.EventHandler(this.button1_Click);
this.checkBox1.CheckedChanged += new System.EventHandler(this.checkBox1_CheckedChanged);
}
bool updating = false;
private void button1_Click(object sender, EventArgs e)
{
updating = true;
boolList[0] = true;
bs.ResetBindings(false);
Application.DoEvents();
updating = false;
}
private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
if (!updating)
MessageBox.Show("CheckChanged fired outside …我有一个小部件取决于一些外部JS文件,我想懒惰加载所有这些外部资源.我已经使用代码拆分来延迟加载与小部件有关的GWT代码,但是script无论如何都加载了使用标签在gwt.xml中定义的JS文件,这是不可取的.
是否有按需加载这些外部资源的标准GWT方式？我可以使用原始JS自己做,但我宁愿不花时间在这上面.
document.addEventListener('DOMContentLoaded', () => {
});
我读到这个事件侦听器确保对于常规脚本，JS 不会引用尚未加载的节点。内容在DOMContentLoaded 被触发后执行）。
我还读过一个模块在 DOMContentLoaded被触发之前被执行（由于defer它内置的属性）。
我使用的模块似乎不需要DOMContentLoaded监听器。我可以确认DOMContentLoaded他们不需要监听器来正确访问节点吗？
另外，我想不出如何测试这个，所以我在这里问。如果你知道我怎么做，请分享！
deferred-loading ×10
javascript ×6
css ×2
html ×2
jquery ×2
asynchronous ×1
c# ×1
controls ×1
gwt ×1
html5 ×1
jsf ×1
jsf-2 ×1
nonblocking ×1
primefaces ×1
script-tag ×1
winforms ×1