• 前端 知识笔记


    知识架构:

    SPA:

    单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA 不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换 HTML(采用的是 div 切换显示和隐藏),从而实现UI与用户的交互。在 SPA 应用中,应用加载之后就不会再有整页刷新。相反,展示逻辑预先加载,并有赖于内容Region(区域)中的视图切换来展示内容。

    MVC和MVVM:

    用户对View的操作交给了Controller处理,在Controller中响应View的事件调用Model的接口对数据进行操作,一旦Model发生变化便通知相关视图进行更新。

    MVVM 实现了View和Model的自动同步,也就是当Model的属性改变时,我们不用再自己手动操作Dom元素,来改变View的显示,而是改变属性后该属性对应View层显示会自动改变。

    MVVM比MVC精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作DOM元素。因为在MVVM中,View不知道Model的存在,Model和ViewModel也观察不到View,这种低耦合模式提高代码的可重用性

    Localstorage、sessionstorage、cookie:

    cookie和session都是用来跟踪浏览器用户身份的会话方式,cookie保存在浏览器端,session保存在服务器端。

    存储内容:cookie只能保存字符串类型,以文本的方式;session通过类似与Hashtable的数据结构来保存,能支持任何类型的对象(session中可含有多个对象)

    存储的大小:cookie:单个cookie保存的数据不能超过4kb;session大小没有限制

    安全性:cookie:针对cookie所存在的攻击:Cookie欺骗,Cookie截获;session的安全性大于cookie

    WebStorage两个主要目标:(1)提供一种在cookie之外存储会话数据的路径。(2)提供一种存储大量可以跨会话存在的数据的机制

    localStorage的生命周期是永久的;sessionStorage是在同源的窗口中始终存在的数据。

    https://www.cnblogs.com/pengc/p/8714475.html

    一个完整的http请求过程:

    1、域名解析:浏览器或客户端发起请求后,根据地址判断是否为本机地址,然后在本机设置的 host 中寻找,如果没找到则去 DNS 服务器查询域名对应 IP 地址。

    2、建立 TCP 链接:根据 IP 地址寻址,然后访问指定端口;有客户端向服务器发送 TCP 连接请求,经过交换机->路由器;然后进行三次握手四次挥手保证连接可靠性

    3、发送请求:客户端发送 http 请求;服务器接受请求并处理;客户端根据服务器端的 response 渲染界面或进行逻辑处理。

    跨域:

    出于浏览器的同源策略限制,其是一种约定,它是浏览器最核心也是基本的安全功能;同源策略会阻止一个域的 js 脚本和另外一个域的内容进行交互。

    当一个请求 url 的协议、域名、端口三者之间任何一个与当前界面 url 不同即为跨域。

    解决办法:

    jsonp,简单适用,兼容性好。缺点只支持 get 请求,不支持 post 。

    https://blog.csdn.net/qq_38128179/article/details/84956552

    #、页面渲染大致过程

    1. 解析html建立dom树
    2. 解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树)
    3. 布局render树(Layout/reflow),负责各元素尺寸、位置的计算
    4. 绘制render树(paint),绘制页面像素信息
    5. 浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。
    6. 渲染完毕后会触发load事件:DOMContentLoaded -> load

    CORS?

    https://zhuanlan.zhihu.com/p/84212558

  • 相关阅读:
    CAP
    plugins for ST3 to frontend
    OAuth 2.0 详解
    Git SSH生成
    Android FrameWork 学习之Android 系统源码调试
    node.js安装步骤
    数据结构-- 队列 循环与顺序
    jsp之认识 servlet (基础、工作原理、容器请求处理)
    android 蓝牙开发---与蓝牙模块进行通讯 基于eclipse项目
    Android 仿微信调用第三方应用导航(百度,高德、腾讯)
  • 原文地址:https://www.cnblogs.com/guofan/p/15936932.html
Copyright © 2020-2023  润新知