今天就来聊聊我前阵子干的一件“出格事”，给自个儿起了个名叫《盗摄视奸官网》。听着挺吓人是？也就是那么回事儿，没真干啥坏事，纯粹是手痒，加上脑子有点短路，想扒拉扒拉那些做得特牛的官网，看看人家是咋玩的。
起因
事情是这么开始的。我自个儿琢磨着搞个小网站，结果捣鼓了半天，总觉得土里土气的，跟人家那些高大上的官网一比，简直没法看。心里那个急，就跟猫爪挠似的。想着不行，我得学学！怎么学？光看表面文章肯定不行，得往深了瞅瞅。
动手“盗摄”
说干就干。我挑了几个平时觉得特顺眼、交互也特流畅的官网，准备挨个“下手”。
第一步，我管它叫“全面扫荡式截图”。甭管是首页、产品页、关于我们，还是犄角旮旯的帮助中心，凡是眼睛能看到的，咔咔咔，一顿截。动态效果？那我就录屏。鼠标滑过变个色？录下来！弹窗长啥样？录下来！务必把人家网站的每一帧都给“请”到我硬盘里。这感觉，真有点像狗仔队，不过我这“胶卷”可不费钱。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
光有图还不行，那不成看画片了嘛我得知道这些玩意儿是咋堆起来的。于是浏览器自带的那个“审查元素”大法就派上用场了。右键一点，好家伙，跟X光似的，网页的骨架、皮肉都看得一清二楚。哪个地方是啥标签，用了啥样式，我挨个瞅，挨个琢磨。有时候看到一段写得特别巧妙的CSS，或者一个特灵光的JavaScript效果，我都会多看几眼，心里琢磨着这思路我能不能学过来。
我还特意留意了他们图片是咋处理的，是直接用大图还是压缩过的，用的啥格式。加载速度也是我重点关注的，毕竟谁也不想等一个网页等到花儿都谢了。
深入“视奸”
“盗摄”完了表面功夫，就该往“里子”瞅瞅了，我称之为“技术参数大起底”。这部分就更刺激了。
我打开了浏览器的“网络”面板，刷新一下页面，哗一大串请求就出来了。图片、脚本、样式表，还有那些神神秘秘的XHR请求，一个个都逃不过我的眼睛。我就看它们加载的顺序，哪个文件大，哪个文件小，有没有啥请求特别慢，拖了后腿。有时候还能从这些请求里，猜到他们后端用的是啥技术栈，虽然咱也不懂后端，但看着就觉得高深。
我还专门去找了找网站的文件，看看人家都允许搜索引擎爬不让爬有时候还能从里发现一些藏得比较深的页面，跟探险似的，挺有意思。
对了，还有那些JS代码。虽然大部分都压缩过了，看得头昏眼花，跟天书似的。但我还是耐着性子，大概看看都引入了哪些库，比如是不是用了jQuery，还是Vue、React这些时髦玩意儿。看到眼熟的库，就感觉跟老朋友见面一样亲切。
- 细致观察：人家网站的导航栏是怎么设计的？为啥这么设计用户体验就
- 反复体验：注册流程、购买流程（当然我没真买），我都跑一遍，感受一下顺不顺畅。
- 胡乱尝试：故意输错点东西，看看人家的错误提示是怎么做的，够不够友
这一通折腾下来，收获还真不少。虽然没直接“偷”人家代码，毕竟那玩意儿犯法，而且直接抄也没啥意思，主要是学习人家的思路和实现方式。比如某个动画效果，以前觉得特神奇，拆开一看，，原来是这么几行CSS或者JS搞定的，顿时就没那么神秘了。
搞完之后
这么一通“盗摄视奸”下来，感觉自己跟做了贼似的，就是把人家公开的东西翻来覆去地看。最大的感受就是，做一个牛X的官网真心不容易，背后全是细节和思考。从设计到前端再到后端，环环相扣。
我也就是学学皮毛，取取经。通过这种方式，确实让我对自己那个小破网站有了不少新的想法。知道自己哪里做得不也知道可以从哪些方面去改进了。比如图片优化，代码结构，用户体验的小细节，这些以前没太注意的东西，现在都有了更深的理解。
不过话说回来，这种“学习”方式，大家看看就可别真去干啥坏事。学习人家的优点是好的，但直接原封不动地搬过来，那就不地道了，也容易出事儿。咱得有自己的思考和创造，对？我这也就是记录一下自己瞎折腾的过程，图一乐呵，顺便给自己找点灵感。
