使用JQueryMobile时，2-3秒延迟加载页面

作者: 纾潆锦袖迷子
发布时间: 2024-03-15 06:14:33 (1月前)
转自：

6 条回复

0#
回复此人
Jacob | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> JavaScript会阻止页面的呈现，因为脚本可能会执行document.write或执行其他修改以使呈现的页面无效，因此最佳做法是将脚本标记放在页面底部。这样做的缺点是你不能在页面中间使用jquery，甚至不能使用$（document）.ready（）。相反，你必须在加载jquery之后放置所有脚本，或者你必须使用本机window.onload或编写一个轻量级处理程序来在加载jquery之后注册你的回调。 </p> </DIV>

编辑
1#
回复此人
文艺青年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以尝试将脚本标记放在页面底部 </p> <pre> <code> <!DOCTYPE> <html> <head> <title>Hello</title> <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> </head> <body> <h1>Hello</h1> </body> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.mobile-1.1.1.min.js"></script> </html> </code> </pre> <P> 并且一切都应该加速，但脚本需要2-3秒 </p> </DIV>

编辑
2#
回复此人
Autistic | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果脚本花费的时间太长，您可以将它们移到页面底部： </p> <pre> <code> <!DOCTYPE html> <html> <head> <title>Hello</title> <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> </head> <body> <h1>Hello</h1> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.mobile-1.1.1.min.js"></script> </body> </html> </code> </pre> <P> 然后，这样做将使得更难以准确预测发生了什么以及何时发生。但是DOM应该在阻塞脚本标记加载之前加载和呈现。 </p> <P> 现在你只需要弄清楚如何处理它。 </p> </DIV>

编辑
3#
回复此人
biu~ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 尝试将JS放在底部 </p> <pre> <code> <!DOCTYPE> <html> <head> <title>Hello</title> <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> </head> <body> <h1>Hello</h1> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.mobile-1.1.1.min.js"></script> </body> </html> </code> </pre> </DIV>

编辑
4#
回复此人
谦成 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> jQueryMobile是 <a href="http://operationproject.com/2011/adventures-in-html5-part-one/#.UD-euVZ279U" rel="nofollow noreferrer"> 不是那个 </A> 以它闻名 <a href="http://blog.roveb.com/post/17259708005/our-experience-with-jquery-mobile-and-sencha-touch" rel="nofollow noreferrer"> 响应 </A> 。即使你已经尝试过每一次优化。 </p> <P> 您可以尝试通过加载脚本 <code> document.createElement() </code> 虽然。（理想情况下，即使这应该在底部） </p> <pre> <code> function createScript(src){ var script = document.createElement('script'); script.src = src; document.getElementsByTagName('head')[0].appendChild(script); } </code> </pre> <P> 这样做的有效方法是仅在页面呈现后开始加载和执行脚本。即亲切的 <a href="https://stackoverflow.com/questions/3248384/document-createelementscript-synchronously"> 异步 </A> 。 </p> <P> 如果你有很多这样的人。 </p> <pre> <code> var files = ['1.js', '2.js', '3.js']; files.map(createScript); </code> </pre> <P> <子> 另外，我会保证SenchaTouch（如果这是你愿意考虑的选项） </子> </p> </DIV>

编辑

登录后才能参与评论