HTTP。
主要版本为:
HTML5 是最新的 HTML 版本
HTML5 是定义 HTML 标准的最新的版本。 该术语通过两个不同的概念来表现:它是一个新版本的 HTML 语言,具有新的元素,属性和行为,它有更大的技术集,允许构建更多样化和更强大的网站和应用程序。这个集合有时称为 HTML5 和它的朋友们,不过大多数时候仅缩写为一个词 HTML5。
值得注意的是在中文语境中(主要指中国大陆),「H5」一般指移动端 Web 网页,有时也包括小程序。
可访问性是一种让尽可能多的用户可以使用你的网站的做法。传统上我们认为这只与残疾人士有关,但提升网站的可访问性也可以让其他用户群体受益。比如使用移动设备的人群,那些使用低速网络连接的人群。
一种透过了解搜索引擎的运作规则来调整网站,以及提高目的网站在有关搜索引擎内排名的方式
Float,是最常用的 CSS 布局方式。
CSS Flex 是一种「一维」布局。
自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面电脑显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现,减少用户进行缩放、平移和滚动等操作行为
BEM,即 Block Element Modifier 的缩写,是一种编写 CSS 的原则(methodologies),用于解决大型项目中 CSS 如何组织的问题。
Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包。利用 Bootstrap 提供的 Sass 变量和混合(mixins)、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件,能够让你快速地开发出产品原型或构建整个 app。
Tailwind, 是一个 CSS Framework,官方称之为「utility-first」,即它讲一些 CSS 功能封装为 「class」,且可自定义和扩展。
PostCSS,基于 JavaScript 的 CSS 处理器。它有丰富的插件,例如:autoprefixer、postcss-preset-env。
CSS Modules,是指同一个 CSS 文件中的所有 CSS class 等都默认本地作用域。由于不是 CSS 原生支持,所以一般需要配合 Webpack 的 CSS-loader 或者 PostCSS 使用。
CSS-in-JS is a styling technique where JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a style element) and attached into the DOM. It allows you to abstract CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way.
由于 React 官方并没有一种推荐的方式,导致社区中有了众多的方法。
浏览器的两种原生网络请求方式:
JavaScript 的标准称之为 ECMAScript 简称 ES,它有多个版本,普遍意义上讲已 2015 年以后发布的 ES6 (ES2015)为「现代的 JavaScript」。
TypeScript 是 JavaScript 类型的超集,他可以编译成 JavaScript。
Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的 web 应用中使用它们。
HTML 内容模板元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现,但随后可以(原文为 may be)在运行时使用 JavaScript 实例化。
Web Components 标准非常重要的一个特性是,它使开发者能够将 HTML 页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长、深层嵌套的标签来实现同样的页面功能。
Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净、整洁。其中,Shadow DOM 接口是关键所在,它可以将一个隐藏的、独立的 DOM 附加到一个元素上。
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle。
It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.
简单来说:Webpack 用来打包应用,Rollup 用来打包库。
极速零配置 Web 应用打包工具
Bazel 是 Google 基于内部的打包工具开源的多语言打包工具。
Angular 官方有使用 Bazel 打包的教程。
npm 是 Node.js 默认的包管理工具。
yarn 是 Facebook 推出的 JavaScript 包管理工具。
值得注意的是,yarn 2,带有 PNP (plug ’n’ play) 支持,但是不支持 React Native。
PRPL 指的是:
代表着一种让网页加载更快的模式。
RAIL 指的是:
代表一种以用户为中心,将用户体验分解为上述 4 个方面的模式。
Lighthouse 是前端质量检测工具,包括「Performance」、「Accessibility」、「PWA」等等检测指标。
它可以在 Chrome、命令行和 Node 中使用。
内容安全策略 (CSP) 是一个额外的安全层,用于检测并削弱某些特定类型的攻击,包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件,这些攻击都是主要的手段。
前端监控一般指监控用户的使用情况和系统的运行状态,例如 PV、UV、平均访问时长、bug 等等。
Reactive Extensions Library for JavaScript
Reactive State for Angular
Server Side Rendering (SSR),即服务端渲染,是指在运行阶段,由 Node 服务器渲染的 HTML 网页。已减少数据请求,从而达到更快的渲染速度。
SSR 可以保证数据的实时性,但是需要部署到一个 Node 服务器上。
Next.js 是基于 React 的 SSR/SSG 框架。
Angular Universal,Angular 提供的 SSR 功能。
Nuxt.js 是基于 Vue 的 SSR 框架。
Static Side Generator (SSG),即静态网站生成,是指在构建阶段,直接生成渲染后的 HTML 网页。已达到最佳的 Time-To-First-Byte 效果,以及更好的 SEO。
SSG 的概念本身并不新,但是基于现在三大前端框架(Angular, React, Vue)的 SSG 框架,既满足了多样化、复杂化的前端开发需要,又可以得到更好的首次渲染性能。
但是由于生成阶段在构建阶段,就会导致其数据无法达到实时性。
GatsbyJS 是基于 React 的 SSG 框架。
Scully 是基于 Angular 的 SSG 框架,本网站(https://devops.phodal.com/)就是使用了 Scully。
Gridsome 是基于 Vue 的 SSG 框架。
使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序
它使用 Chromium rendering engine 和 Node.js
GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。
Apollo,是一个 GraphQL 的实现,包括 Apollo Server、Apollo Client 等多个框架/工具。
Relay,是 Facebook 推出的,针对 React 的 GraphQL clinet。
PWA,不同于 Native APP 或者 Web APP,PWA 以 Web 技术开发(Javascript、HTML、CSS 等),同时使用一些现代 API 已实现例如:推送、离线使用、访问硬件等一般 Web APP 无法做到的功能。
PWA 对比 Native APP 有无需安装,方便用户直接使用的优势;对比 Web APP 又有推送等上述 Navive 的功能。
它是一种低级的类汇编语言,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如 C / C ++等语言提供一个编译目标,以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存,允许两者一起工作。
小程序主要是运行在某个「超级 APP」上的 Web 应用,主要包括:
由于各个公司都推出自己的小程序实现,导致开发者需要针对不同的小程序平台多次开发,所以 Taro 这种小程序框架应运而生
多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信/京东/百度/支付宝/字节跳动/ QQ 小程序/快应用/H5/React Native 等的应用。
他们都是基于某种框架的语法(React、Vue),然后编译成对应的小程序语法。