HTML / javascript：在代碼執行之前阻止繪制
[英]HTML/javascript: prevent paint before code executes
問題描述
我最后有一個帶有javascript文件的頁面。 文件放在最后，以便我可以訪問所有dom元素。 讓我們說標記看起來像這樣
<html>
<head></head>
<body>
//lot of markup here
<script src="my-js.js"></script>
<body>
示例標記只是為了顯示我的js文件的位置。
js文件中的第一個（my-js.js）就是
document.body.style.visibility = 'hidden';
代碼運行后，我將可見性設置為隱藏
根據我的理解（來自與此相關的許多文章，包括在stackoverflow中），瀏覽器到達js，然后執行它，然后繼續渲染然后繪制。 如果這是真的，我描述的代碼應該可以正常工作。
但是，現在發生的是，頁面顯示（少於500毫秒），因為它在代碼執行之前，然后快速隱藏，然后在代碼執行后再次顯示。
簡而言之，我想要的是：頁面隱藏>代碼執行>頁面顯示而不是我得到的是頁面顯示>頁面隱藏>代碼執行>頁面顯示
我的問題是為什么頁面顯示為那一瞬間？ 我在這做錯了什么？
PS：請注意我不能改變js的位置也不能添加另一個。 所以，不要發布任何暗示相同的解決方案。 更重要的是，我想知道為什么我的代碼是錯誤的。
2 個解決方案
解決方案1
1 2018-07-13 15:36:40
您可能對使用defer方法感興趣。
defer表示“等待解析器完成執行此操作”。 它大致相當於將腳本綁定到DOMContentLoaded事件，或者使用jQuery.ready。 當代碼運行時，DOM中的所有內容都可供您使用。 與異步不同，延遲代碼將按照它在頁面的HTML中出現的順序運行，它只是在完全解析HTML之后推遲。
例如： <script src="my-js.js" defer></script>
在這里查看更多
解決方案2
-1
將script標記放在body的開頭，這樣幾乎可以在渲染body進行評估。
<html> <head></head> <body> <script> document.body.style.visibility = 'hidden'; </script> <p>Sample text</p> </body> </html>
您還可以添加style標記以將主體的可見性設置為隱藏。
body{ visibility: hidden; }
<html> <head></head> <body> <p>Sample text</p> </body> </html>
如何防止在執行Javascript代碼之前出現html文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.