在 Laravel 中延迟解析 Javascript答案

【问题标题】：Defer parsing of Javascript in Laravel在 Laravel 中延迟解析 Javascript
【发布时间】：2018-06-16 18:57:52
【问题描述】：

好吧，我知道有很多关于这个的话题，但我就是无法解决这个问题。

我的网站 (bricklist.nl) 在 Laravel 上运行，并且似乎在样式表之前加载内容，这有点问题（现在从用户那里得到了几次反馈）。

我的直觉说这是因为我的标题中的 Javascripts。 GTmetrix 给了我这个：

在初始页面加载期间解析 456.3KiB 的 JavaScript。延迟解析 JavaScript 以减少页面渲染的阻塞。

https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js (217.7KiB)
https://bricklist.nl/js/less.min.js (118.0KiB)
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js (87.0KiB)
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js (30.6KiB)
https://bricklist.nl/ (1.4KiB of inline JavaScript)
https://bricklist.nl/js/home.js (1.2KiB)
https://bricklist.nl/js/main.js (345B)

我已经尝试在每一个之前添加'defer'标签，但这只会搞砸我的布局。

目前，这是在我的主布局的头部标签中：

<link rel="canonical" href="@yield('canonical')"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
{{-- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> --}}

<script defer src="{{ URL::asset('/js/packs/solid.min.js') }}"></script>
<link rel="stylesheet/less" type="text/css" href="{{ URL::asset('css/main.less') }}">
<link rel="stylesheet/less" type="text/css" href="{{ URL::asset('css/custom.less') }}">

这是在正文标签中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{{-- <script type="text/javascript" src="{{ URL::asset('js/ui-bootstrap-2.5.0.min.js') }}"></script> --}}
<script type="text/javascript" src="{{ URL::asset('js/less.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/main.js') }}"></script>

我读到了关于这个主题的混杂的东西，我希望有人能给我关于 Laravel 最佳实践的建议。谁能指出我解决这个问题的正确方向？欢迎任何建议。

谢谢！

【问题讨论】：

这不是 Laravel 的问题。搜索“FOUC”以获取更多关于相当常见问题的信息。例如，页面在开始“resizeBricks”之前会花费整整一秒的时间来加载和执行 facebook 和 google 的东西。我没有仔细阅读代码，但我假设这对布局更重要。
谢谢，这正是我所需要的。会调查的！

标签： javascript php jquery ajax laravel

【解决方案1】：

您可以使用此示例解决您的问题。只需将该方法应用于您的网站：

页首：

<noscript>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto&amp;subset=latin-ext">
<link rel="stylesheet" type="text/css" href="//cdn.siberfx.com/css/bootstrap.min.css">
</noscript>

页面结束：

<script type="text/javascript" async>
/* WebFont CSS File */
var sbxSpeed_0 = document.createElement('link');
sbxSpeed_0.rel = 'stylesheet';
sbxSpeed_0.href = '//fonts.googleapis.com/css?family=Roboto&amp;subset=latin-ext';
sbxSpeed_0.type = 'text/css';
var ParseDefer_0 = document.getElementsByTagName('link')[0];
ParseDefer_0.parentNode.insertBefore(sbxSpeed_0, ParseDefer_0);

/* Bootstrap CSS File */
var sbxSpeed_1 = document.createElement('link');
sbxSpeed_1.rel = 'stylesheet';
sbxSpeed_1.href = '<?php echo cdn;?>css/bootstrap.min.css';
sbxSpeed_1.type = 'text/css';
var ParseDefer_1 = document.getElementsByTagName('link')[0];
ParseDefer_1.parentNode.insertBefore(sbxSpeed_1, ParseDefer_1);

【讨论】：