|
打开任何一个网站，网站构成你看到的网站构成只是浏览器渲染出来的画面。背后其实是网站构成一堆文件在互相拉扯。我拆过不少站，网站构成结构都差不多——HTML管骨架，网站构成CSS管皮肉，网站构成JavaScript管神经。网站构成这三样东西凑在一起，网站构成才让一个页面能看、网站构成能点、网站构成能滚动。网站构成 先说HTML。网站构成它长得像一堆尖括号包起来的网站构成标签，` `、网站构成` `、网站构成` ` 套 ` ` 套了七层，后来重写了一遍，清爽多了。HTML负责的是“这里有个标题”“那里有张图”“这块是个按钮”，它不关心按钮什么颜色、多大尺寸。 颜色和尺寸归CSS管。CSS可以写在HTML里，也可以单独放一个 `.css` 文件。大站基本都抽出来，因为缓存方便。你改一个颜色，全站跟着变。我见过一个电商站，促销期间把主色调从蓝改成红，只动了一行CSS变量。这玩意儿厉害在层叠和继承——同一个元素被多条规则命中时，权重高的赢。很多人栽在权重上，写了个 `!important` 硬压，后面接手的人骂娘。我的习惯是尽量用类选择器，少用ID，别把样式写得太死。 JavaScript是让页面动起来的那层。点按钮弹窗、下拉加载更多、表单验证，都靠它。以前JS只是点缀，现在整个前端框架——React、Vue这些——把大量逻辑搬到了浏览器里。我做过一个实验，禁用JS后打开某在线文档工具，页面直接白屏。它的HTML里几乎没内容，全靠JS运行时生成。这种站对搜索引擎不太友好，但交互体验确实流畅。JS还能操作DOM，也就是动态改HTML结构。你点“加载评论”，新评论插进来，就是DOM在变。 这三样之外，还有几样东西常被忽略。图片、字体、视频这些静态资源，体积往往比代码大得多。一个没压缩的PNG能到几MB，页面加载卡半天。我习惯用WebP，同样画质能小一半。还有后端——用户看不到，但登录、发帖、支付都绕不开它。前端发请求，后端查数据库，返回JSON，前端再渲染。前后端分离之后，两边可以各干各的，接口对好就行。 域名和服务器是网站的物理基础。域名好记，服务器存文件。你买台云主机，装个Nginx，把HTML文件扔进去，绑上域名，一个最简单的静态站就活了。动态站还得配数据库、跑后端进程。我第一台服务器是1核1G的，跑个WordPress都喘，后来换了2核4G才稳。CDN也重要，把静态文件分发到各地节点，用户就近拿，速度快不少。大站基本都上CDN，不然跨省访问延迟能到几百毫秒。 安全这块得单独提一句。SQL注入、XSS、CSRF，这些词听着吓人，原理都不复杂。用户输入别直接拼SQL，输出到页面前转义一下，基本能挡掉大半。HTTPS现在几乎是标配，Let's Encrypt免费证书三行命令就能签。我见过一些小站还在用HTTP，浏览器直接标“不安全”，用户看了就关。 网站构成说复杂也复杂，说简单也简单。核心就是文件、协议、服务器三件事。你打开一个页面，背后是几十个请求在跑，几百KB数据在传。理解这些，下次调试的时候心里就有底了。 |