煎炸熊の記事本

HTML

<div class="expand_content" style="overflow-y: hidden; height: 250px;">
    A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph.
</div>
<div class="expand_more" style="cursor: pointer; text-align: right; color: #2D81FF; font-weight: bold;">read more...</div>

Javascript

document.querySelectorAll(".expand_more").forEach(function(element) {
    element.addEventListener('click', function() {
        var expand_content = this.previousElementSibling;
        if (expand_content.style.height != "auto") {
            sessionStorage.setItem("expand_height_orig", expand_content.style.height);
            expand_content.style.height = "auto";
            this.textContent = "collapse this...";
        }
        else {
            var expand_height_orig = sessionStorage.getItem("expand_height_orig");
            if (expand_height_orig) {
                expand_content.style.height = expand_height_orig;
            }
            else {
                expand_content.style.height = "25vh";
            }
            this.textContent = "read more...";
        }
    });
});

Source: Document.write 塞入 script 會如何？

今天看到一則噗浪討論串，感覺很有趣，便花點時間研究一下這個課題，問題如果使用document.write塞入script會有什麼優缺點？

在實做上大部分都是使用非同步載入，主要都是為了讓頁面載入時間能夠重疊，感覺上讀取時間就會縮短，幾乎使用document.createElement('script')，塞入head當中，這樣子執行上就不會有阻塞的問題。