Cách tải tệp Javascript không đồng bộ?
Vâng để tải tập tin javascript bạn chỉ cần bao gồm "async" thuộc tính trong <script> thẻ ví dụ:
<script src="your path" async></script>
Bây giờ kịch bản này sẽ được tải về ở chế độ nền trong khi nó sẽ không gây ra vấn đề JS rendering.
Lưu ý: Nếu bạn đang sử dụng một số plugin jquery tức là phóng to ảnh hoặc bất kỳ thứ gì khác, sẽ mất thêm thời gian để tải nhưng sau đó nó sẽ hoạt động bình thường.
Tại sao nên sử dụng từ khóa "DEFER" với "ASYNC"?
Bạn cũng có thể sử dụng thuộc tính trì hoãn cùng với thuộc tính không đồng bộ. <script> thẻ với thuộc tính async buộc tệp phải được tải xuống dưới nền và thực thi ngay sau khi được tải xuống. nhưng không đồng bộ với các thuộc tính trì hoãn <script> thẻ để thực hiện khi toàn bộ trang web được tải.
<script src="" async defer></script>
Cách tải tệp CSS không đồng bộ? Nếu bạn muốn tải tệp CSS của mình một cách không đồng bộ trước tiên, bạn phải đặt <script> vào tệp đầu và sau đó bạn có thể sử dụng hàm loadCSS() để tải tệp CSS không đồng bộ.
<script>
// https://github.com/filamentgroup/loadCSS
!function(e){"use strict"
var n=function(n,t,o){function i(e){return f.body?e():void setTimeout(function(){i(e)})}var d,r,a,l,f=e.document,s=f.createElement("link"),u=o||"all"
return t?d=t:(r=(f.body||f.getElementsByTagName("head")[0]).childNodes,d=r[r.length-1]),a=f.styleSheets,s.rel="stylesheet",s.href=n,s.media="only x",i(function(){d.parentNode.insertBefore(s,t?d:d.nextSibling)}),l=function(e){for(var n=s.href,t=a.length;t--;)if(a[t].href===n)return e()
setTimeout(function(){l(e)})},s.addEventListener&&s.addEventListener("load",function(){this.media=u}),s.onloadcssdefined=l,l(function(){s.media!==u&&(s.media=u)}),s}
"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this)
</script>
Bây giờ bạn chỉ cần sử dụng hàm loadCSS.
<script>
loadCSS("https://www.yourCSSLinkHere.com");
</script>
Bằng cách này bạn có thể tải CSS của bạn và tập tin JS không đồng bộ.
Bạn có thể sử dụng HTTP/2.0 để khắc phục vấn đề tốc độ vì HTTP/2.0 cho phép tập tin của bạn sẽ được tải xuống song song nhưng HTTP/1.0 sẽ không cho phép tập tin của bạn sẽ được tải về song song, theo cách khác HTTP/1.0 tuân theo quy tắc FIFO (First In First Out).
Báo cáo cho biết tải không đồng bộ các tệp JS của bạn có nghĩa là đặt các tập lệnh JS của bạn trên các máy chủ khác nhau để chúng tải nhanh hơn. Trong điều khoản laments điều này sẽ ngừng làm cho nhiều yêu cầu đến một máy chủ để tải các tập tin. Nếu bạn đang tải Plugin sau đó kiểm tra xem có lưu trữ CDN cho các tập lệnh JS đó không --- http://www.rackspace.com/knowledge_center/article/what-is-a-cdn – Tasos
Ok, đó là cách tôi biết, nhưng chỉ một phần của nó tải các tệp JS từ các miền khác nhau. Tuy nhiên đây là giải pháp về cách tải các tệp JS không đồng bộ --- http://screwlewse.com/2010/05/loading-your-javascript-files-asynchronously/ – Tasos