utf-8 bom文件编码导致页面异常

展开文章目录

背景

一个被文件编码坑了5个小时的排查记录。
突然发现这个问题：弹窗页面都不会适应高度了，没有出现滚动条，导致页面内容看不到。

以前是正确的，正常的效果是这样：

排查过程

1、发现页面顶部多出了一个空白的区域
F12看源文件发现多了一行这样的字符 ：

一开始没留意，怀疑是代码什么地方多输出了这个，导致页面变形。找了代码也没有输出的地方。

2、对比前后代码内容发现没有变动
使用Beyond Compare这个工具来对比，没有差异的

3、拷贝旧文件过去覆盖，发现功能居然正常了

4、怀疑是文件的编码有问题
F12看源文件发现多了一行这样的字符 ，查了一下这个字符的什么来头：

 是一个Unicode字符实体引用，表示的是一个称为"零宽度非换行空格"（Zero Width No-Break Space）的特殊字符。它通常用于表示Unicode文件的字节顺序标记（Byte Order Mark，BOM）
。字节顺序标记是一个特殊的字节序列，用于指示文本文件的字节顺序。在UTF-8编码中，字节顺序标记由三个字节组成：0xEF、0xBB、0xBF，对应于十六进制的FEFF。这个字节顺序标记在UTF-8编码中没有实际意义，但可以用来识别文本使用的编码和字节顺序

怀疑可能是文件编码有问题，将文件另存时，发现是utf-8 bom格式的

这个让我很奇怪，一般都是utf-8格式的。查了一下UTF-8 BOM:

UTF-8 BOM（Byte Order Mark，字节顺序标记）是用于指明文件字符编码格式和字节顺序的特殊字符。在UTF-8编码中，BOM的概念与UTF-16和UTF-32不同，因为UTF-8是以字节为编码单元的，不存在字节序的问题。UTF-8 BOM，也称为UTF-8 签名，是由三个字节（EF BB BF）组成的标记，用于表明一个文本文件是使用UTF-8编码的。这个标记在文件的最开始处放置，以告知阅读文件的软件该文件采用的是UTF-8编码

5、将这个文件另存为utf-8就正常了

6、担心还有其他的文件有这个问题，全面排查
编写了python 脚本来检查这个目录下的所有的文件。果然发现还有几个文件都是这个编码。

7、出现这个utf-8 bom格式的原因分析
可能是在服务器上使用记事本直接打开来编辑过这些文件，保存时就变了编码。

附检测utf-8 bom文件的python程序

import os
def is_utf8_bom(file_path):
    with open(file_path, 'rb') as f:
        raw_data = f.read(3)  # 读取前3个字节来判断是否有BOM
    return raw_data == b'\xef\xbb\xbf'  # 检查是否为UTF-8 BOM

def find_utf8_bom_files(directory):
    # 遍历指定目录及其子目录下的所有文件
    for root, dirs, files in os.walk(directory):
        for file in files:
            file_path = os.path.join(root, file)
            # 检查文件是否为UTF-8 BOM编码
            if is_utf8_bom(file_path):
                print(f'UTF-8 BOM file found: {file_path}')

# 指定要检查的目录
directory_to_check = 'D:\\test\\zentao20241202YH'
find_utf8_bom_files(directory_to_check)

假设上面python的文件名为checkutf8bom.py
那命令行上执行就可以打印utf8bom编码的文件：python checkutf8bom.py