Question

我的网页需要提高网页速度。我阅读了很多关于使用async和defer attribute来提高初始网页速度的信息。所有js脚本都已定义在</body>标记的正上方。请在我的页面中建议如何有效地使用这些属性？

<html>
<head>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/css/style/mystyle.css"> 


</head>
<body>
<!--HTML content-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>

google analytics script

</body>
</html>

Answer 1

使用延迟：

<script src="path" defer="defer"></script>

使用async：

<script src="path" async="async"></script>

何时使用延迟/异步？

如果您需要异步加载脚本，即。在加载html和css时，带有asyc属性的脚本会让浏览器在后台加载它们，即。当其他事情发挥作用时，它们将被加载。

如果你需要在完全加载html和css之后加载你的脚本，那么你可以使用defer属性。

所以，你需要小心使用这种技术，因为这些属性的某些javascript代码可能无法正常工作。

如何有效地使用它们？

我不建议您使用异步，因为它可能因任何顺序加载任何脚本，因为文件大小和/或脚本（因为它异步加载），因此您的功能将受到阻碍。

因此，只需按照谷歌页面速度使用延迟来满足要求，这将按照您希望的顺序加载脚本。

虽然使用延迟，但您可能会对您的网站产生影响，因为您可能已经调用了一些应该在文档准备好之前运行的脚本。在这种情况下，您不应该按照谷歌页面速度的说明进行操作，这样就可以了解它。

最后，这取决于你和你的脚本。

Answer 2

您不应该更改任何内容或使用using namespace System; using namespace System::Collections::Generic; using namespace System::Threading; delegate void DelegateVI (int); delegate void DelegateVB (bool); delegate void DelegateVAUC (array<unsigned char>^); ref class CWorker { public: void DoWork (int i_iValue) { Console::WriteLine ("int"); Thread::Sleep (500); } void DoWork (bool i_bValue) { Console::WriteLine ("bool"); Thread::Sleep (1000); } void DoWork (array<unsigned char>^ i_aucValue) { Console::WriteLine ("array<uc>"); Thread::Sleep (2000); } }; generic <class T> ref class CData { public: CData (int i_iSize, CWorker^ i_oWorker) { m_aData = gcnew array<T>(i_iSize); if (T::typeid == int::typeid) { Reflection::MethodInfo^ oMethod = CWorker::typeid->GetMethod("DoWork", gcnew array<Type^>{int::typeid}); m_delDoWork = Delegate::CreateDelegate (DelegateVI::typeid, i_oWorker, oMethod); } else if (T::typeid == bool::typeid) { Reflection::MethodInfo^ oMethod = CWorker::typeid->GetMethod("DoWork", gcnew array<Type^>{bool::typeid}); m_delDoWork = Delegate::CreateDelegate (DelegateVB::typeid, i_oWorker, oMethod); } if (T::typeid == array<unsigned char>::typeid) { Reflection::MethodInfo^ oMethod = CWorker::typeid->GetMethod("DoWork", gcnew array<Type^>{array<unsigned char>::typeid}); m_delDoWork = Delegate::CreateDelegate (DelegateVAUC::typeid, i_oWorker, oMethod); } } void DoWork (CWorker^ i_oWorker) { m_delDoWork->DynamicInvoke (gcnew array<Object^>{m_aData[0]}); // i_oWorker->DoWork (m_aData[0]); //--> fails with compiler error C2664: cannot convert argument... } array<T>^ m_aData; Delegate^ m_delDoWork; }; int main() { CWorker^ oWorker = gcnew CWorker; CData<bool>^ oData = gcnew CData<bool>(3, oWorker); oData->DoWork (oWorker); }。

defer需要加载Bootstrap（虽然你不是真的在这里加载Bootstrap，而是一些Angular-Bootstrap模板）。因此，您无法使用jQuery加载任何这些资源。此外，您正在加载大量依赖于主async资源的Angular资源，因此您也无法在此使用angular.min.js。

您可以使用async，但页面渲染速度不快。唯一的区别是脚本将在它们全部加载后执行，而不是逐个执行（一旦下载就执行），但这并不会改变页面加载时间。

通过异步和延迟属性提高页面速度

2 个答案: