Skip to main content

3 posts tagged with "Frontend"

Frontend tag description

View All Tags

Web Components

· 5 min read
zgh
Front-end Engineer

Web Components 是浏览器原生支持的。详细见 MDN

三个核心概念:

  1. Custom Elements(自定义元素):
    1. 可以创建自己的 HTML 标签,类似 <my-component>,并且定义其行为和生命周期函数。
    2. 相关生命周期回调包括 connectedCallbackdisconnectedCallbackattributeChangedCallback
  2. Shadow DOM(影子 DOM):
    1. 提供了 DOM 和 CSS 的封装,防止组件内部的样式和结构影响到外部
    2. 使组件更具可复用性,避免了样式污染
  3. HTML Templates(HTML 模板):
    1. 通过 <template><slot> 元素,可以创建可复用的结构和内容插槽
    2. <template> 中的内容不会立即渲染,只有在 JS 中手动克隆和插入到 DOM 时才会渲染

CSR、SSR、SSG

· 4 min read
zgh
Front-end Engineer

网页渲染方式主要有:

  • 客户端渲染(Client Side Rendering)
  • 服务端渲染(Server Side Rendering)
  • 静态站点生成(Static Site Generation)