javascript - 在 Laravel 中延迟解析 Javascript
问题描述
好的,所以我知道有很多关于这个的话题,但我就是无法解决这个问题。
我的网站(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)
我已经尝试在每个标签之前添加“延迟”标签,但这只会破坏我的布局。
目前,这是在我的主布局的头部标签中:
<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 最佳实践的建议。谁能指出我解决这个问题的正确方向?欢迎任何建议。
谢谢!
解决方案
您可以使用此示例解决您的问题。只需将该方法应用于您的网站:
页面头部:
<noscript>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto&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&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);
推荐阅读
- c++ - 为什么我有这个错误重载运算符?
- c++ - 我可以使用 linux gdb 调试我的 cpp 代码吗?如果是,我如何在通过对象调用的函数上保留断点
- image-processing - 无法为 scilab 安装 IPCV
- database - 如何使用多台笔记本电脑或虚拟机创建本地分布式数据库?
- java - 如何使用 JDBC 高效地导出/导入数据库数据
- javascript - 如何从反应列表中删除单个项目
- java - 如何使 jar 文件在任何装有 JVM 的计算机上都可以原谅?
- java - Source.fromIterator(...) 提供了迭代器线程安全
- vue.js - 具有动态百分比的 scss 中的线性梯度
- java - 使用 html 和 servlet 时出错