百战百胜：js真题面经

465 05-17

JS面试题

戳：立刻上手前端js部分面试真题

存储cookie

题目

描述cookie localStorage sessionStorage区别

知识点

cookie
- 本身用于浏览器和server通讯
- 被‘借用’到本地存储来
- 可用document.cookie=' '来修改
- 存储大小，最大存储4kb
- http请求时要发送到服务端，增加请求数量
- 只能用document.cookie = ' ' 来修改，太过简陋
localStorage和sessionStorage
- HTML5专门为存储设计，最大可存5M
- API简单易用setItem,getItem
- 不会随着http请求被发送出去
- localStorage数据会永久存储，除非代码或手动删除
- sessionStorage数据值存在于当前会话，浏览器关闭则清空
- 一般用localStorage会更多

http

前端工程师开发界面
需要调用后端的接口，提交/获取数据---http协议
要求事先掌握好ajax

题目

http常见的状态码有哪些
- 状态码分类
  - 1xx服务器收到请求
  - 2xx请求成功，如200
  - 3xx重定向，如302
  - 4xx客户端错误，如404（请求的地址服务端找不到）
  - 5xx服务端错误，如500
- 常见状态码
  - 200成功
  - 301永久重定向(配合location(新的地址),浏览器自动处理)：浏览器自己记住新地址，下次直接访问，使用情况：网站域名到期了或者想换域名了，老的域名就可以返回301状态码然后返回一个location 等于新的域名。以后浏览器不会再访问老的域名
  - 302临时重定向(配合location,浏览器自动处理)：浏览器每次都会访问老地址，例如百度搜索引擎中访问其他网站，都是第一时间访问百度地址，然后再跳转到目标地址
  - 304 资源未被修改：服务端告诉你，之前请求的资源在本地还有效，不需要重新请求了
  - 404 资源未找到：请求的地址服务端找不到
  - 403 没有权限
  - 500 服务器错误
  - 504 网关超时：能访问到服务器，但是服务器内部在做处理，比如做跳转或者连接其他服务器（比如数据库）的访问时造成超时
- 关于协议和规范
  - 就是一个约定
  - 要求大家都跟着执行
  - 不要违反规范，例如IE浏览器
http常见的header有哪些
什么是RestfulAPI
- REST全称是Representational State Transfer，中文意思是表述（编者注：通常译为表征）性状态转移
- API 设计规范，用于 Web 数据接口的设计
描述下http的缓存机制（重要）

http methods

传统的methods
- get获取服务器的数据
- post向服务器提交数据
- 简单的网页功能，就是这两个操作
现在的methods
- get获取数据
- post新建数据
- patch/put更新数据
- delete删除数据
Restful API
- 一种新的API(前端后端交互的api)设计方法（早已推广使用）
- 传统API设计理念:把每个url当做一个功能 (*)
- Restful API设计理念：把每个url当做一个唯一的资源(*)。如何设计成一个资源?
  - 尽量不用url参数
    - 传统的API设计：/api/list?pageIndex=2(很像一个函数+一个参数的样子)
    - Restful API 设计: /api/list/2（没有参数，就是一个资源标识，list的第二页）
  - 用method表示操作类型(传统的API设计，当做功能设计)做一个博客列表
    - post请求 /api/create-blog
    - post请求： /api/update-blog?id=100
    - get请求 : /api/get-blog?id=100
  - 用method表示操作类型(Restful API设计)
    - post 请求: /api/blog
    - patch 请求: /api/blog/100
    - get 请求: /api/blog/100

http headers

常见的Request Headers
- Accept 浏览器可以接受的数据格式
- Accept-Encoding 浏览器可接受的压缩算法，如gzip
- Accept-Language浏览器可以接受的语言，如zh-CN
- Connections:keep-alive 一次TCP连接重复使用（客户端和服务端建立连接之后就会重复的使用这个链接，不会断开，把资源一次性请求完成）
- cookie：每次同域请求资源是浏览器自己携带cookie
- Host 请求的域名是什么
- User-Agent:浏览器信息（简称UA），例如：分析一个网站多少人用了Chrome浏览器，多少人用了Safari,IE浏览器，和不同的操作系统信息，都是通过服务端收到的UA来分析
- Content-type 发送数据的格式(post请求中)，如applications/json
常见的Response Headers
- Content-type 服务端返回数据的格式，如applications/json
- Content-length 返回数据的大小，多少字节
- Content-Encoding 返回数据的压缩算法，如gzip
- Set-Cookie 服务端修改cookie

自定义header

* 用于简单的前端验证

缓存相关的headers

Cache-Control Expires
Last-Modified If-Modified-Since
Etag If-None-Math

http 缓存

什么是缓存
- 把没必要重新从服务端获取的资源暂存一份，节省请求服务器浪费的时间
为什么需要缓存
- 通过缓存可以减少网络请求的数量和体积，让整个页面加载和渲染的速度更快一些
哪些资源可以被缓存？ ---- 静态资源（js css img）

强制缓存

Cache-Control
- max-age:设置最大缓存过期时间
- no-cache：不用本地缓存，正常的向服务端请求，服务端进行处理（服务端可能有缓存措施），比如html资源，不想做缓存
- no-store：不用本地缓存，也不用服务端的一些缓存措施（服务端“协商缓存”），更彻底
- private：只能允许最终用户作为缓存
- public:允许中间用户或者代理作为缓存
- 在Response Headers 中( 由服务端决定哪个资源可以缓存，服务端添加)
- 控制强制缓存的逻辑
Expires
- 也是在Response Headers中
- 也是控制缓存过期
- 已经被Cache-Control代替

协商缓存（对比缓存）

服务端缓存策略（判断一个请求资源是否可以使用本地缓存）
服务器判断客户端资源，是否和服务端资源一样，一样就使用本地缓存
如果一致则返回304，否则返回200和最新的资源
资源标识
- 在Response Headers中，有两种
- Last-Modified资源的最后修改时间
- 优先使用Etag
- Last-Modified只能精确到秒级
- 如果资源被重复生成，而内容不变，则Etag更精

三种刷新操作

正常操作：地址栏输入url,跳转链接，前进后退等
- 强制缓存失效，协商缓存有效
手动刷新：F5，点击刷新按钮，右击菜单刷新
- 强制缓存失效，协商缓存有效
强制刷新：ctrl+F5
- 强制缓存失效，协商缓存失效

http面试题 - 总结

开发环境

git
调试工具
抓包
webpack babel
Linux 常用命令

git

常用的代码版本管理工具
大型项目需要多人协作开发，必须熟用git
如果不知道或者之前不用git，不会通过面试
git服务端常见的有github,coding.net等
大公司会搭建自己的内网git服务
常用命令
- git add
- Git checkout xxx
- git commit -m 'xxx'
- git push origin master
- git pull origin master
- git branch
- git checkout -b xxx /git checkout xxx
- git merge xxx

抓包

移动端h5页，查看网络请求，需要用工具抓包
Windows一般用fiddler
Mac OS 一般用charles
手机和电脑连同一个局域网
将手机代理到电脑上
手机浏览网页，即可抓包
查看网络请求
网址代理
https

webpack和babel

ES6模块化，浏览器暂不支持
ES6语法，浏览器并不完全支持
压缩代码，整合代码，以让网页加载更快