1前端语言串讲NOTE丨青训营

娜媞娥
73 阅读7分钟

01 前端语言基本能力

  • HTML：结构；CSS：风格；JS：交互
  • 三剑客的基本语法

Browser

  • 浏览器包含：渲染引擎、Javascript引擎
  • 渲染引擎：根据html加载页面，排版、图层、绘制等。
  • image.png
  • Javascript引擎：解释器运行文本。
  • image.png

02 前端语言的协作配合

  • image.png
  • JS in html：DOM
  • image.png
  • 事件捕捉和事件捕获
  • image.png
  • CSS Module 避免变量名冲突

03 你不知道的HTML5

老师提到了很多概念，这里进行了一些补充。

  • HTML并非图灵完备，只是一门标记语言。

  • 基本语法：

    • 标签（元素）Element：<tag></tag>
    • 文本
    • 注释：<!-- comments -->
    • DTD Document Type Definition语法定义文档：<!Doctype html>
    • 处理信息

  • HTML标签分类

    • 文档型
    • 闭合型
    • 换行型
    • H5新元素（多媒体、表单、功能）

  • HTML5语义化标签

  • HTML5存储

    • Cookies：
      • 网站在计算机上存储少量数据的一种方式，主要用于追踪用户活动和记住用户的特定信息。存储量受限只有4KB，并且每次HTTP请求都会发送，可能影响性能。
      • 当需要跨会话（或跨浏览器启动和关闭）持久化存储一些信息，或者在服务器端追踪用户信息时使用。例如，用于保持用户登录状态。
    • Local Storage：
      • HTML5提供的一种在客户端永久保存数据的方法，可以存储大量数据，达5MB。它只在用户的浏览器中可用，不参与服务器通信。
      • 当需要在客户端长期存储大量数据，且不需要在每次HTTP请求中发送这些数据时使用。例如，保存用户的应用设置或者草稿内容。
    • Session Storage：
      • 与Local Storage类似，但其存储的数据在浏览器关闭后就会被清除。它也用于在用户的浏览器中存储数据，但这些数据只在当前会话中有效。
      • 当需要在一个浏览器会话期间临时存储数据，但在会话结束后数据可以被清除，那么可以使用Session Storage。例如，保存用户在电子商务网站的购物车信息。

  • PWA & AMP

    • PWA
      • Progressive Web App，是一种使用现代web技术创建类似于原生应用的体验的网页应用。它可以离线运行，可以被用户添加到主屏幕，并且能发送推送通知。
      • 当网页应用需要有更接近原生应用的体验，如离线使用，添加到主屏幕，或者发送推送通知时，可以使用PWA技术。例如，新闻阅读应用、电子邮件客户端等。
    • AMP
      • Accelerated Mobile Pages，是Google推出的一种用于提高移动网页加载速度的开放源码库，它通过预加载和异步加载等技术，使网页在移动设备上的加载速度大大提高。
      • 如果你希望网页在移动设备上有更快的加载速度，提高用户体验和SEO效果，可以使用AMP。

  • HTML5 API：GeoLocation获取位置、Drag&Drop拖拽

  • HTML5 Web Socket：本质是一个TCP的连接请求

    • 是一种在单个TCP连接上进行全双工通信的协议。它允许服务器主动向客户端推送信息，而不是按照传统的请求-响应模式，减少了不必要的网络延迟。
    • 应用场景包括：需要实时的双向通信，如实时聊天应用，股票价格更新，或者游戏。

  • HTML5 Shadow DOM

    • HTML5的Shadow DOM技术允许开发者创建封装的"影子" DOM树，与主DOM树分离。这样可以避免CSS和JS的全局作用，提高了代码的模块化和复用性。
    • 在创建复杂的Web组件，需要封装HTML结构、样式和行为时Sh使用。例如，用于构建Web组件库或者框架。

  • SVG & Canvas

    • SVG (Scalable Vector Graphics) 是一种基于矢量的图形格式，可以缩放而不失清晰度，适合用于网页图标和一些需要动态改变的图形。
    • Canvas是一种基于像素的图形API，适合处理大量图形和需要实时更新的场景，例如游戏或动画。
    • 创建复杂且动态的2D图形或动画，例如数据可视化、图标或者游戏等场景。

  • WebGl & WebGPU：着色语言

    • WebGL是一种在浏览器中实现3D图形的API，它基于OpenGL ES 2.0，并使用GLSL作为其着色语言。WebGPU是WebGL的后继者，提供了更高的性能和更直接的硬件控制，同时使用了一种新的着色语言。
    • 应用在浏览器中展示3D图形或者执行复杂的图形计算。例如，3D游戏、复杂的数据可视化等。

  • WebAssembly(WASM)

    • WebAssembly (WASM) 是一种用于浏览器的二进制代码格式，它设计用于执行速度接近于本地代码，可用于重的计算任务或者游戏。WASM 可以与 JavaScript 交互，使得在web应用中可以使用更多的编程语言。
    • 需要在浏览器中运行高性能的应用，如复杂的游戏、音视频编辑器，或者CPU密集型的任务，如图像处理、科学计算等。

技术的实现方法（简略）

  • HTML5存储：

    • Cookies：当浏览器访问一个服务器时，服务器会发送一个Set-Cookie HTTP header，其中包含了要存储的信息。浏览器会保存这个Cookie，然后在以后的请求中，会自动附带这个Cookie发送给服务器。在JavaScript中，可以使用document.cookie API 来读取和设置cookie。
    • Local Storage：在JavaScript中，localStorage 对象提供了setItem(key, value)、getItem(key)和removeItem(key)等方法，可以用于存储和读取数据。这些数据在浏览器关闭后依然存在。
    • Session Storage：sessionStorage对象的API与localStorage几乎相同，但存储的数据会在页面会话结束后被清除。

  • PWA：依靠Service Workers、Web App Manifest和HTTPS等技术。

    • Service Workers可以拦截网络请求，并能在离线时提供缓存的响应。
    • Web App Manifest则定义了应用的名称、图标、启动页面、显示模式等元信息。

  • AMP：AMP通过限制HTML、CSS的使用和JavaScript的运行，以及提供预渲染、异步加载等机制，优化了页面的加载性能。

  • HTML5 GeoLocation API：使用navigator.geolocation对象的getCurrentPosition()方法，可以获取用户的当前位置。这需要用户的授权，并且在HTTPS环境下运行。

  • HTML5 Drag&Drop API：可以通过监听dragstart、dragover、drop等事件，实现元素的拖放操作。拖放的数据可以通过DataTransfer对象进行传递。

  • HTML5 Web Socket：通过创建一个WebSocket对象，并指定一个ws或wss协议的URL，就可以创建一个WebSocket连接。然后，可以使用send()方法发送数据，监听message事件接收数据。

  • HTML5 Shadow DOM：通过Element的attachShadow()方法，可以创建一个shadow root，然后在这个shadow root下面添加HTML结构、样式和行为，这些内容都会被封装起来，不会影响到主DOM树。

  • SVG & Canvas：SVG 是一种基于XML的标记语言，可以直接在HTML中使用。Canvas 则是一种基于JavaScript的绘图API，需要通过getContext('2d')获取一个2D渲染上下文，然后调用其方法进行绘制。

  • WebGL & WebGPU：WebGL和WebGPU都提供了一套JavaScript API，可以控制GPU进行3D渲染或者通用计算。在使用时，通常需要编写GLSL（WebGL）或WGSL（WebGPU）的着色器程序。

  • WebAssembly (WASM)：WASM的二进制代码可以通过Emscripten等工具，从C/C++、Rust等源代码编译得到。然后，这些代码可以在JavaScript中通过WebAssembly对象进行加载和执行。WASM代码运行在一个安全的沙箱环境中，且与JavaScript有良好的交互性。

04 拓展分享

  • MVC & MVVM & MVP：软件架构模式。为了解决开发过程中的维护问题和档案管理问题，目的都是为了将业务(Model)和视图(View)的实现代码分离。
avatar
文章
阅读
粉丝