大家好，我是“Java分布式架构实战”的作者Jamesfu。
问题起源
最近在按工信部要求对网站做适老化无障碍浏览改造。在改造过程中发现一个Bug如下图所示：
经过多轮排查，最终定位到网站变灰相关的一段freemarker代码，发现它的ELSE分支输出了一个空的
<span></span>标签：
[#assign nowTime = .now?string["hhmmSSsss"]/]
[#if checkGrayScale]
[#if grayScaleType?? && 1==grayScaleType]
<script>
var isHomeGrayByTemplate = true
</script>
<link rel="stylesheet" href="/static/assets/css/homeGrayscale.css?t=${nowTime?number}"/>
[#elseif grayScaleType?? && 2==grayScaleType]
<script>
var isHomeGrayByTemplate = false
</script>
<link rel="stylesheet" href="/static/assets/css/grayscale.css?t=${nowTime?number}"/>
[/#if]
<script type="text/javascript" src="/static/assets/third/jquery.gray.min.js?t=${nowTime?number}"></script>
<script type="text/javascript" defer="defer" src="/static/assets/js/grayScale.js?t=${nowTime?number}"></script>
[#else]
<span></span>
[/#if]
我推断就是这里的问题，因为span标签是需要渲染的，所以出现在了body标签中，不能出现在head标签中。经过多轮测试发现确实是这里的问题。
结论
- 在HTML
<head></head>标签中不要出现具体的需要渲染的HTML标签，比如<span></span>等，否则会出现渲染标签以后的内容都会输出到<body></body>标签中。 在freemarker模板中，如果ELSE分析不输出任何内容，发现freemarker不会输出空文件，即不更新静态化文件，因此在ELSE分支中还必须输出点什么，所以我决定输出一个空script标签，最终问题得到解决。
最终提交的代码如下：
[#assign nowTime = .now?string["hhmmSSsss"]/]
[#if checkGrayScale]
[#if grayScaleType?? && 1==grayScaleType]
<script>
var isHomeGrayByTemplate = true
</script>
<link rel="stylesheet" href="/static/assets/css/homeGrayscale.css?t=${nowTime?number}"/>
[#elseif grayScaleType?? && 2==grayScaleType]
<script>
var isHomeGrayByTemplate = false
</script>
<link rel="stylesheet" href="/static/assets/css/grayscale.css?t=${nowTime?number}"/>
[/#if]
<script type="text/javascript" src="/static/assets/third/jquery.gray.min.js?t=${nowTime?number}"></script>
<script type="text/javascript" defer="defer" src="/static/assets/js/grayScale.js?t=${nowTime?number}"></script>
[#else]
<script></script>
[/#if]
