【interview】2020.07.08
1. 解释 http 无状态的含义、cookie 是怎么设置的、cookie 有什么作用、cookie 的优点缺点
- http 无状态的含义:
使同一个客户端连续两次发送请求给服务器,服务器也识别不出这是同一个客户端发送的请求,
这导致的问题就比如你加了一个商品到购物车中,但因为识别不出是同一个客户端,你刷新下页面就没有了……
- cookie 设置:
- 客户端发送 HTTP 请求到服务器
- 当服务器收到 HTTP 请求时,在响应头里面添加一个 Set-Cookie 字段
- 浏览器收到响应后保存下 Cookie
- 之后对该服务器每一次请求中都通过 Cookie 字段将 Cookie 信息发送给服务器
- cookie 作用:
- 会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息)
- 个性化设置(如用户自定义设置、主题等)
- 浏览器行为跟踪(如跟踪分析用户行为等)
- cookie 缺点:大小、安全、增加请求大小
2. 你知道Cookie、sessionStorage、localStorage的区别吗?
- cookie
cookie 一般由服务器生成,无兼容性问题 ,可设置存储时间,存放大小4kb,所以cookie只适合保存很小的数据
cookie 数据 始终在同源的 http 请求中携带(即使不需要)
cookie 的内容主要包括:名字、值、过期时间、路径和域。
路径与域一起构成cookie的作用范围。
- 会话 cookie
若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。
会话cookie一般不存储在硬盘而是保存在内存里,当然这个行为并不是规范规定的。
- 持久性 cookie
若设置了过期时间,浏览器就会把 cookie 保存到硬盘上,关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。
- cookie 和 session 的区别
1)cookie 数据存放在客户的浏览器上,是服务端向客户端写入的小的片段信息,session 数据放在服务器上
2)cookie 不是很安全,别人可以分析存放在本地的 cookie 并进行 cookie 欺骗,考虑到安全应当使用session
3)session 会在一定时间内保存在服务器上,当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用 cookie
4)单个 cookie 保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie
5)建议将登录信息等重要信息存放为 session,其他信息如果需要保留,可以放在 cookie 中
6)session 保存在服务器,客户端不知道其中的信息;cookie保存在客户端,服务器能够知道其中的信息
7)session中保存的是对象,cookie中保存的是字符串
8)session 需要借助 cookie 才能正常工作。如果客户端完全禁止 cookie,session 将失效。
- sessionStorage , localStorage 为本地存储
localStorage 不做手动清除的话一直都会有。 存储长度 5M
sessionStorage 关闭浏览器就会清空,存放大小5Mb一般,仅在本地(客户端中)存储
- webStorage
虽然也有存储大小的限制,但是比cookie大得多,可以达到5M或更大数据的有效期不同
2. 点击:浏览器内核、进程、线程、事件模型、事件传播、事件委派/事件代理、event对象属性及方法
3. vue 的 SEO 方案。参考:https://www.jb51.net/article/164285.htm
使用 Phantomjs 针对爬虫做处理
hantomjs 是一个基于 webkit 内核的无头浏览器,即没有UI界面,即它就是一个浏览器
只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然 “PhantomJS 宣布终止开发”,但是已经满足对 Vue 的 SEO 处理。
如果对已用 SPA 开发完成的项目进行 SEO 优化,而且支持 node 服务器,请使用 Phantomjs
这种解决方案其实是一种旁路机制,原理就是通过 Nginx 配置, 判断访问的来源 UA 是否是爬虫访问,
如果是则将搜索引擎的爬虫请求转发到一个 node server,再通过 PhantomJS 来解析完整的HTML,返回给爬虫。
具体代码戳这里: vue-seo-phantomjs 。
- 要安装全局 phantomjs ,局部 express ,测试:
-
phantomjs spider.js 'https://www.baidu.com'
如果见到在命令行里出现了一堆 html,那恭喜你,你已经征服 PhantomJS 啦。
- 启动之后 或者用 postman 在请求头增加 User-Agent 值为 Baiduspider ,效果一样的。
部署上线
- 线上要安装
node
、pm2
、phantomjs
- nginx 相关配置
-
upstream spider_server { server localhost:3000; } server { listen 80; server_name example.com; location / { proxy_set_header Host $host:$proxy_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") { proxy_pass http://spider_server; } } }
优势:
- 完全不用改动项目代码,按原本的SPA开发即可,对比开发SSR成本小不要太多;
- 对已用SPA开发完成的项目,这是不二之选。
不足:
- 部署需要node服务器支持;
- 爬虫访问比网页访问要慢一些,因为定时要定时资源加载完成才返回给爬虫;
- 如果被恶意模拟百度爬虫大量循环爬取,会造成服务器负载方面问题,解决方法是判断访问的IP,是否是百度官方爬虫的IP。