背景

初中时和班里男生整理了一张表格，对班内女生从各个方面进行打分。当时看到一个人分数调整，其他人连带着也需要调整，非常麻烦，难以协调，我就想应该有种更好的数据更新方式，当时我还不知道关系型数据库。高中在好像是人人的网站上，看到给女生打分，1~10颗星，当时觉得这个打分方式不太科学，每个人所打分数稳定性和区分度都不能得到保证，我就想通过两张图片对比的方式评判，当时我还不知道扎克伯格的FaceMash。我曾经想到分数应该是赢者增加，输者减少，分数交换应该能使新图片迅速涨分，高分图片又相对稳定，当时我还不知道elo rating system和K-factor。后来我发现所有这些都有人发现并做过了，不禁索然无味，不过终还是自己写了一个。

架构

前端：jQuery, Bootstrap

后端：Node.js Express

设计：这个网站虽有数据，但没用数据库，只保留了最简单基础的关系，就是一张图片对应一个分数的dictionary，存放在内存中。主流审美测距部分，直接由双方分数计算胜负概率。图片top10也只是系统启动时会排序所有分数。分数数据会定时存入文件系统进行备份。

优化

ImageKit：其中缩放裁切部分用了focus=top，因为这里面图片基本都是人像，这个设定比auto效果更好，更少出现没有人脸的情况。

lazysizes：通过修改data-src的url链接，之后对img标签removeClass, addClass来使得图片重新加载。

附注

• html中在head标签设置link来指向网站favicon非常便捷
• html中lazysizes.js的引用顺序决定了函数能不能正常运行
• css中vw, vh能很好的跨平台，跨屏幕尺寸得到支持
• 想自定义scrollbar样式还是直接修改::-webkit-scrollbar好用，不像一些github上的库，可能会和某部分冲突
• 使用lazyload可以有效减少响应，加载时间，并且减少用户流量消耗
• Express application中全局变量用app.locals非常好用，包括设置全局函数
• 网站上线，在Express项目文件夹使用pm2 start npm -- start来持续运行项目，并提供方便的restart
• 安装 node js package 到 server 目录内（包含 node_modules 的那个）
• 由于主域名属于我哥们，修改nginx.conf文件并且设置proxy_pass来将属于我subdomain的请求反向代理到Node.js的服务器
• 这次项目之前不知道国内被墙的这么厉害，有很多人连这么一个普通的国外服务器也不能访问

鸣谢

感谢哥们提供的服务器和域名，虽然微信内部被封了[dodge]

网址

媲美

更新为： secnone.com

相关视频