前端架构描述
想要学会python爬虫以及高阶爬虫(JS逆向方法)
首先要理清楚网站的架构:
主要的架构分为页面如何跳转和页面在哪里渲染
1.页面如何跳转:
MPA(多页应用):点一次链接就重新加载一整个页面,可以直接覆盖原有页面,把旧 的页面丢掉。
SPA(单页应用):整个站点只有一个页面,切换页面时不刷新,只是把局部换掉。
2.页面在哪里渲染:
SSR(服务端渲染):服务器把完整 HTML 拼好再发给你,所以你右键"查看网页源代 码 "能看到真实文字内容。
CSR(客户端渲染):服务器只发一个空壳子和一堆 JS,内容靠浏览器跑 JS 现场拼。 所以你"查看源代码"只能看到一个空的
这四种可以自由组合。同一个网站的不同模块也可以选不同架构(比如前台用 SSR,后台用纯 SPA),但同一个页面只能是其中一种。
还要强调一点:React / Vue 是UI 库,不是架构。它们只负责一件事:把数据变成页面上的 DOM。
既然有整页改变和局部数据的改变,那请求自然会有区别
一个请求的区分要分为两点:谁发起的+返回的是什么
1.浏览器自己发起的(地址栏回车、点普通链接):一定要一整页 HTML,抓包里类型显示 document。
2.JS 发起的(就是常说的 ajax,底层用 XHR 或 fetch):大多数时候返回 JSON 数据做局部更新;但也可能返回一段 HTML 把页面某块整个换掉;还可以让浏览器重新加载整页(代码写 location.href = '新地址',这时候抓包类型照样是 document)。
所以浏览器发起的导航只能要一整页 HTML(document);但浏览器还会自动拉取图片、CSS、JS、iframe 等子资源,这些不是 document。JS 发起的可以是一整页(document)、可以是一段 HTML 片段,大多数时候只是 JSON 局部数据。
JS发起的可以一整页(document),可以一段,大多数只是json局部数据变化
一个页面加载的总流程是这样的:你在浏览器输入 URL 回车 → 服务器返回 HTML → 浏览器边收 HTML 边建 DOM 树 → 中途遇到