前端知识点整理

[jasonjin-ai]

1：安全相关

• 安全三大要素：机密性，完整性，可用性
• 同源策略：同源策略限制了不同源的document 或 脚本 对当前document读取或者设某些属性
  • 相同的域（host），相同的端口号（port），相同的协议（protocol）
• xss攻击（cross site script） 跨站脚本攻击
  • 非持久型xss（反射型） url中带有js脚本
    • 进行html encode
    • 过滤如<script > <iframe> 等标签字符串，以及onClick等字符串
  • 持久型xss攻击：提交表单携带脚本信息，没有转义直接入库
    • 后端对前端提交数据进行转义
    • 前端在渲染时，对后端返回的数据做转义
  • 基于字符集xss攻击
    • <script>alert("xss")</script>
    • 可以被解释为：
    • +ADw-script+AD4-alert(+ACI-xss+ACI-)+ADw-/script+AD4-
    • 前端应该设置 meta指定charset
  • React算是天然对xss攻击免疫，因为会对html进行字符串转义，但不是绝对安全
  • 防范：
    • 对于劫持cookie的xss，可以采用httponly
• CSRF（cross-site request forgery）跨站请求伪造攻击
  • 一般在后端进行防御
    2：部分算法&数据结构
    3：http网络相关
• http协议与tcp/ip协议：http是在应用层上的协议，短连接，无状态，简历在tcp之上。 tcp协议对应于传输层
• http1.1起虽然可以开启keep-alive来保持一定时间的连接，但最终也还是会关闭，还是短连接，可在服务端设置keep-alive时间
  4：基础知识点
• []盒子模型
• []闭包
  • 概念：闭包是什么呢？闭包用通俗的话来讲就是能够读取其他函数内部变量的一个函数，而这个函数只有作为一个函数的子函数才能够读取函数内的局部变量，（这地方也有一些绕） function f1() { function f2() return f2},
  • 作用：就是可以读取其他函数内的变量
  • 函数可以使用函数外的变量
  • 在函数中return 一个函数是一种闭包
  • 将函数作为参数传递给另外一个函数也是一种闭包
• []原型链
• [x]async await
  • async函数返回的是一个promise对象
  • await关键字只能在async函数内使用
• []promise
  • then方法返回的可以是一个promise对象，这样才能链式调用
  • []自己去实现一个promise，有时间在去看吧
• []继承
  • []多种继承的实现方式，在回顾一次阮一峰的文章
• []Symbol类型
• []图片懒加载
• []节流与防抖
  5：React技术栈相关
• []redux
  • []原理
  • []中间件
  • []解决的问题
• []react-router
  • []路由实现原理（https://github.com/fi3ework/blog/issues/21）
  • []hash路由，通过修改window.location字符串来改变，监听hashchange回调
    • []看下hash路由相关概念
  • []history路由，通过history.pushState来改变，监听popstate回调
    • []看下history相关概念
• []react
  • []virtual dom
    • [x]其实就是使用React Element创建的对象树，并不是真实dom
  • []diff算法
  • [x]setState在生命周期函数中，和合成事件（react中的onClick等）中执行的话是异步，其实不是异步代码，只是在state更新之前去执行，不会立刻拿到这个state的值而已，而在原生事件（通过addEventListener添加的click）和setTimeout中则是同步，可以立刻拿到更新后的数据，当然如果拿不准，可以在setState({),callback)的callback函数中拿到刷新后的数据的
  • []context
    • []https://juejin.im/post/5c74026ce51d4520f0178e06?utm_source=gold_browser_extension
    • []跨层级传数据，createContext创建， 提供Provider和Consume，上层使用Provider 携带value属性，下层使用Consume直接接入
  • []react16的变化之处
    • []生命周期：
      • []15：https://www.cnblogs.com/qiaojie/p/6135180.html
      • []16： https://juejin.im/post/5c779d156fb9a049c15fe732
  • []事件
    • []react事件与原生事件的区别
    • []react时间和原生事件的执行顺序，是否可以混用
    • []兼容性