360前端星——0409笔记

soooda
260 阅读10分钟

JavaScript 从入门到放弃

各司其职 & 职责分离

  • Javascript——行为
  • css——表现
  • html——结构

复杂UI组件的设计

轮播图

  1. 结构设计
    • 图片是列表结构
    • 绝对定位将图片重叠在同一个位置
    • 轮播图切换的状态使用修饰符
    • 切换时的过渡效果使用transition
  2. API设计——类 Slider
    • getSelectedItem()
    • getSelectedItemIndex()
    • slideTo()
    • slideNext()
    • slidePrevious()
    • controller
  3. 优化
    • 解耦合：写成插件的形式
    • 改进插件/模板化
      • 把HTML和组件封装到一起
    • 组件模型抽象
      • 得到UI组件框架，便于符用

局部细节控制

  • 过程抽象

    • “只执行一次”

      function once (fn) {
    return function (...args) {
        let ret = fn.apply(this, args)
        fn = null
        return ret
    }
}

    • 节流：连续触发事件，在指定时间内只执行一次，会稀释函数的执行频率。

      function throttle (fn, time) {
  var timer = null;
  return function() {
    if(timer === null){
      timer = setTimeout(()=> {
        fn();
        timer = null;
      }, time);
    }
  }
}

    • 防抖：触发事件后，在指定时间内只执行一次，未到时间时再次触发则重新计算时间。

      function debounce (fn, time) {
  var timeout = null;
  return function() {
    if(timeout !== null) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(fn, time)
  }
}

    • 声明式 & 指令式

      • 声明式：关心做什么
      • 指令式：关心怎么做

    • reduce()的封装

      function iterative (fn) {
    return function (...args) {
        return args.reduce(fn.bind(this))
    }
}

const add = iterative((x, y) => x + y)
const sub = iterative((x, y) => x - y)

  • 高阶函数

    • 上述这些函数，自身输入函数或返回函数，称为高阶函数

    • eg: toggle(declarative)

      function toggle (...actions) {
    return function (...args) {
        let action = actions.shift()
        actions.push(action)
        return action.apply(this, args)
    }
}

switcher.onclick = toggle (
	evt => evt.target.className = 'off',
    evt => evt.target.className = 'on',
    evt => evt.target.className = 'warn'
)

Web 标准：前端的原力

Web标准概述

  • Web标准是构成Web基础、运行和发展的一系列标准的总称
  • 并不是由一家标准组织制定

Web标准介绍

HTTP协议

  • HTTP/0.9

    • 仅支持请求方式GET，并且仅能请求访问HTML格式的资源。

  • HTTP/1.0

    • 请求行必须在尾部添加协议版本字段（http/1.0）；必须包含头消息

    • 增加了请求方式POST和HEAD

    • 开始支持cache，就是当客户端在规定时间内访问统一网站，直接访问cache即可。

    • HTTP请求和回应的格式也变了。除了数据部分，每次通信都必须包括头信息（HTTP header），用来描述一些元数据。

    • 状态码（status code）、多字符集支持、多部分发送（multi-part type）、权限（authorization）、缓存（cache）、内容编码（content encoding）等。

    • 工作方式是每次TCP连接只能发送一个请求，当服务器响应后就会关闭这次连接，下一个请求需要再次建立TCP连接，就是不支持keepalive。

  • HTTP/1.1

    • 引入了持久连接（persistent connection），即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive。
    • 加入了管道机制，在同一个TCP连接里，允许多个请求同时发送，增加了并发性，进一步改善了HTTP协议的效率
    • 新增了请求方式PUT、PATCH、OPTIONS、DELETE等。
    • 客户端请求的头信息新增了Host字段，用来指定服务器的域名。
    • 加入了一个新的状态码100（Continue）。
    • 加入了一些cache的新特性，当缓存对象的Age超过Expire时变为stale对象，cache不需要直接抛弃stale对象，而是与源服务器进行重新激活（revalidation）。
    • 支持只发送header信息
    • 身份认证机制

  • HTTP/2.0

    • 增加双工模式，即不仅客户端能够同时发送多个请求，服务端也能同时处理多个请求，解决了队头堵塞的问题（HTTP2.0使用了多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级）
    • 增加服务器推送的功能，即不经请求服务端主动向客户端发送数据。
    • HTTP/1.1 版的头信息肯定是文本（ASCII编码），数据体可以是文本，也可以是二进制。HTTP/2 则是一个彻底的二进制协议，头信息和数据体都是二进制，并且统称为"帧"（frame）：头信息帧和数据帧。
    • HTTP/2 将每个请求或回应的所有数据包，称为一个数据流（stream）。
    • 引入了头信息压缩机制（header compression）。一方面，头信息使用gzip或compress压缩后再发送；另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段了，只发送索引号，这样就提高速度了。

ECMA

  • ECMAScript
    • 篇幅在增加，语言的复杂程度也在增加

W3C

https://www.w3.org/TR/

  • CSS
  • DOM：文档对象模型
    • 表示由多层节点构成的文档，开发者可以添加、修改、删除页面的各个部分
  • BOM：浏览器对象模型
    • window：Global对象，网页中所有的全局对象、变量和函数都暴露在这个对象上
    • location：可以以编程方式操纵浏览器的导航系统
    • navigator ：提供关于浏览器的信息
    • screen：保存着客户端显示器的信息
    • history：操纵浏览器历史记录
  • Graphics
  • HTML
  • HTTP
  • ...

前端常用的HTTP知识

HTTP 在浏览器网络中的位置

  • 应用层协议
  • 联网细节交给通用的传输协议：TCP/UDP

请求报文

  • 格式：请求行+请求头+空行+请求数据
    • 请求行：请求方法、URI、HTTP版本
    • 请求头：键值对

请求方法：

  • GET：获取一个资源内容
    • 请求数据空
    • 请求的数据会直接展现在地址栏，以?分割URL和传输数据，参数之间以&相连
    • 提交数据大小有限制
  • POST：新增一个资源内容，提交表单
    • 会把数据放到请求数据字段中以&分隔各个字段
    • 更安全
  • PUT：更新资源内容
  • DELETE：删除资源
  • OPTIONS：根据返回判断是否有对其请求的权限
  • HEAD：只返回head，不返回实体内容
  • PATCH：更新部分内容

状态码

  • 1XX 表示消息

  • 2XX 表示成功

  • 3XX 表示重定向

  • 4XX 表示客户端错误

  • 5XX 表示服务端错误

  • 常见状态码

    • 101 切换协议
    • 200 请求成功
      • 200 from memory cache 不访问服务器，直接读缓存，从内存中读取缓存。此时的数据时缓存到内存中的，当kill进程后，数据将不存在
      • 200 from disk cache 不访问服务器，直接读缓存，从磁盘中读取缓存，当kill进程时，数据还是存在。
    • 206 返回部分内容，如大文件下载
    • 301 永久重定向，如资源更换路径或改名
    • 302 临时重定向，如当前请求需要登录，临时跳转到登录页
    • 304 not-modified 不返回实体内容，客户端可直接读取本地缓存内容
    • 400 错误的请求
    • 403 请求被拒绝
    • 404 请求文件不存在
    • 500 服务端内部错误
    • 502 作为网关或代理服务器时，上游服务器异常
    • 504 作为网关或代理服务器时，上游服务器处理超时

Header 分类

通用标头：

  • Cache-Control

    • 管理如何对 HTTP 的请求或者响应使用缓存
    • 用于响应：
      • private：响应只能以特定用户作为对象，不应该放入共享缓存中【共享缓存与私有缓存】
      • public：响应可以被任何缓存所缓存
      • s-maxage：不能用于私有缓存，只能用于多用户使用的公共服务器
    • 用于请求或响应
      • no-cache：目的是为了防止从缓存中返回过期的资源。此时所有请求都会通过缓存服务器到服务器。
      • no-store：不缓存，每次服务器接受到客户端的请求后，都会返回最新的资源给客户端。
      • max-age：当客户端发送带有 max-age 的指令时，缓存服务器会判断自己缓存时间的数值和 max-age 的大小，如果比 max-age 小，那么缓存有效，可以继续给客户端返回缓存的数据，如果比 max-age 大，那么缓存服务器将不能返回给客户端缓存的数据。

  • Connection

    • 持久性连接

      • Connection: Keep-Alive
Keep-Alive: timeout=5, max=1000

      • 一次会话完成后，TCP 连接并未关闭，第二次再次发送请求后，就不再需要建立 TCP 连接，而是可以直接进行请求和响应。

      • HTTP 1.1 开始，默认使用持久性连接。

    • 非持久性连接Connection: close

      • 一次会话请求/响应后关闭连接的方式

请求标头

  • User-Agent
  • Accept

响应标头

  • Server: Nginx
  • Last-Modified

实体标头

  • Content-Type: text/html; charset=utf-8
  • Content-Length

Cookie

  • 第一次访问网站的时候，浏览器发出请求，服务器响应请求后，会将cookie放入到响应请求中，在浏览器第二次发请求的时候，会把cookie带过去，服务端会辨别用户身份，当然服务器也可以修改cookie内容

  • 最大只有4KB

  • 属性

    • name、value、size
    • domain: 可以访问此cookie的域名
    • path：可以访问此cookie的页面路径
    • http：为true，为http-only，只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。

  • 通过expires/max-age设置失效时间

  • Cookie过大会影响响应速度

  • 安全策略

    • XSS漏洞盗取Cookie，设置httponly
    • CSRF漏洞，设置token/samesite

Session

  • 服务端侧对应为Session，基于Cookie存放用户信息
  • Cookie有效期为Session，随浏览器进程结束而失效

减少传输大小

  • content-encoding: gzip
  • accept-ecoding
  • 主要是文本资源，文件过小不宜压缩

缓存

  • 某些情况下，客户端可以直接从缓存中读

  • 协商缓存

    • Last-Modified
      • 如果我们启用了协商缓存，它会在首次请求时随着 Response Headers 返回
      • 随后我们每次请求时，会带上一个叫 If-Modified-Since 的时间戳字段，它的值正是上一次 response 返回给它的 last-modified 值
      • 服务器接收到这个时间戳后，会比对该时间戳和资源在服务器上的最后修改时间是否一致，从而判断资源是否发生了变化。如果发生了变化，就会返回一个完整的响应内容，并在 Response Headers 中添加新的 Last-Modified 值；否则，返回304 响应，Response Headers 不会再添加 Last-Modified 字段。
      • 问题出现在服务器并没有正确感知文件的变化时
    • **Etag **
      • 由服务器为每个资源生成的唯一的标识字符串，这个标识字符串是基于文件内容编码的，只要文件内容不同，它们对应的 Etag 就是不同的，反之亦然。因此 Etag 能够精准地感知文件的变化。
      • 缺点是会影响服务端的性能
      • 优先级更高，但不能替代Last-Modified

  • 强缓存

    • **Expires **

      • 时间戳，写着过期时间
      • 最大的问题在于对“本地时间”的依赖

    • Cache-Control

      • HTTP1.1 新增的

      • 优先级更高

      • expires 的完全替代方案

      • 通过 max-age 来控制资源的有效期。max-age 不是一个时间戳，而是一个时间长度。

      • s-maxage 就是用于表示 cache 服务器上（比如 cache CDN）的缓存的有效时间的，并只对 public 缓存有效。

        • s-maxage 优先级高于 max-age，两者同时出现时，优先考虑 s-maxage。如果 s-maxage 未过期，则向代理服务器请求其缓存内容。

      • public 与 private 是针对资源是否能够被代理服务缓存而存在的一组对立概念。

        如果我们为资源设置了 public，那么它既可以被浏览器缓存，也可以被代理服务器缓存；如果我们设置了 private，则该资源只能被浏览器缓存。private 为默认值。

Cache-control字段有no-store，就不允许使用任何缓存策略，如果是no-cache就选择协商缓存，不再问浏览器缓存

  • LocalStorage
  • ServiceWorker：可以拦截请求，自己设置规则，控制缓存的情况

抓包工具

  • WireShark
  • Fiddler
  • Firebug for firefox
  • Chrome 开发者工具
  • IE8+ 开发者工具
avatar
文章
阅读
粉丝