把所有JS全放head标签里，页面打开前全白屏，挪到页面尾直接快一倍

刚写网页那会，我图省事，把所有JS引用全放在head标签里，觉得这样代码整齐，结果每次打开页面，浏览器得等把所有JS下载、解析、执行完，才开始渲染页面内容，一个页面白屏两三秒，用户进来啥也看不到。我一开始以为是JS文件太大，压了半天还是慢，后来朋友看了我的代码，说你把JS全放head里，浏览器卡在那等JS加载，能不白屏吗。 他让我把所有JS引用挪到body标签最后面，就是所有HTML内容渲染完之后，再加载JS，我改完之后打开页面，内容秒出来，JS在后台悄悄加载，用户根本感觉不到，白屏时间直接从3秒降到0.5秒，我当时都傻了，就挪个位置，效果差这么多。 原理其实很简单：浏览器从上到下解析HTML，碰到head里的JS，就会停下来等JS下载、执行完，才继续往下渲染页面，等于用户要等所有JS加载完才能看到内容。把JS放页面最后面，浏览器先把所有文字、图片渲染给用户看，再加载JS处理交互，用户第一眼看到的是内容，不是白屏。 从那之后我写页面，除非是那种必须提前加载的JS，别的全放body最后面，给JS标签加上defer属性，让浏览器异步加载，不阻塞页面渲染。之前我为了页面不白屏，想过换服务器、加CDN，花了不少钱，结果就是JS放错位置这么个小问题，改完之后，网站速度直接快一倍。 新手做前端最容易忽略这些小细节：JS放head里、CSS放页面末尾，导致页面加载慢、白屏，其实这些都是零成本就能优化的点，比你换硬件、加带宽效果还好。现在我写任何页面，先把JS位置摆对，再考虑别的优化，白屏问题从根上解决。