前端架构体系技术
常用的前端开发技术栈介绍
常用的前端开发技术栈介绍前端开发技术栈是指一组前端相关的编程语言、框架、工具以及设计方法等技术的集合，它们协同工作，为Web开发提供了强大的支持。
本文将介绍前端开发常用的技术栈，包括HTML、CSS、JavaScript、React、Angular、Vue等。
一、HTML（超文本标记语言）HTML是Web页面及应用程序的基础。
它通过标记来定义文本、图像、音频、视频等内容的结构和语义，为显示器、浏览器等设备提供表现形式。
HTML的最新版本为HTML5，它提供了更多的标记和API以及多媒体和图形功能。
二、CSS（层叠样式表）CSS是用于Web页面样式的一种样式表语言。
它通过样式、规则和指令来对HTML文档进行布局、排版和美化。
CSS的主要功能包括选择器、属性和值的定义、样式的继承和优先级等。
三、JavaScriptJavaScript是一种面向对象的编程语言，它可以为Web开发提供交互性和动态化。
它支持一系列的特征，包括变量、函数、对象、运算符、条件、循环、事件、模块等。
JavaScript也拥有众多的库、框架和工具，方便代码编写和优化。
四、ReactReact是由Facebook开发的一款基于组件化构建用户界面的前端JavaScript库。
它提供了组件、状态管理、事件处理和生命周期等特性，简化了Web开发中引用和更新DOM等繁琐的编程操作。
React也广受欢迎，可以支持不同的数据源和设备。
五、AngularAngular是由Google开发的一款全面的Web应用程序开发框架，它以HTML、CSS和JavaScript为基础，提供了强大的组件化、依赖注入、路由和数据处理等功能。
Angular还拥有快速开发、易于测试和集成的特性，并且支持移动端和桌面应用程序开发。
六、VueVue是一个轻量级的、独立的前端JavaScript框架，它专注于界面层面的渲染和状态管理。
Vue的核心特性有模板语法、组件化、指令和响应式数据绑定等。
微前端架构的设计与实现
微前端架构的设计与实现随着Web应用的复杂性不断增加，传统的单体式前端开发模式逐渐暴露出了一些问题。
为了应对这些问题，微前端架构作为一种解决方案开始受到关注。
本文将探讨微前端架构的设计思路以及实现方式。
一、微前端架构概述微前端架构是一种将前端应用拆分为多个小型、独立的子应用的架构模式。
每个子应用可以独立开发、独立部署、独立运行，通过合理的通信机制实现各子应用之间的协同工作。
微前端架构旨在实现前端的可扩展性、独立性和敏捷性。
二、微前端架构的设计原则1. 单一职责：每个子应用只关注自身的业务逻辑，不与其他子应用产生耦合。
2. 独立部署：每个子应用都可以独立部署，使得前端开发团队可以更加灵活地进行持续交付。
3. 增量升级：每个子应用的升级不会影响其他子应用，降低了系统整体升级的风险。
4. 界面一致性：通过设计统一的UI风格和交互规范，保证整个应用的用户体验一致性。
三、微前端架构的实现方式1. 基于Web Components的实现方式：Web Components是一种基于浏览器原生支持的组件化技术，可以将UI组件进行封装，实现组件的独立复用。
在微前端架构中，可以使用Web Components将不同的子应用封装成独立的组件，通过自定义事件进行通信。
2. 基于iframe的实现方式：每个子应用都运行在独立的iframe中，通过iframe之间的消息传递实现通信。
这种方式相对简单，但需要处理跨域的问题，并且在性能方面可能存在一定的开销。
3. 基于客户端路由的实现方式：将前端路由交由各个子应用自己管理，通过统一的入口应用进行路由的分发。
这种方式可以实现子应用之间的无缝切换，并且可以更好地控制子应用之间的依赖关系。
四、微前端架构的实践经验1. 组件库的设计和管理：在微前端架构中，组件的重用和管理非常重要。
可以通过建立组件库并使用版本控制来管理公共组件的开发和更新。
2. 服务化的思想：将一些通用的功能抽象为服务，并通过微服务的方式提供给各个子应用使用。
前端架构方案
前端架构方案随着互联网技术的迅速发展，前端架构方案的重要性也日益凸显。
前端架构方案是指针对项目需求提出的一种前端开发架构规划，是前端开发团队协同工作的规范化实践，能够提高团队的协作效率和开发质量。
本文将介绍前端架构方案的常用实践和应用案例，希望为前端开发者们提供一些参考。
一、前端架构方案的实践1.需求分析在制定前端架构方案之前，首先需要进行需求分析。
需要明确产品的目标人群、功能需求、技术要求和应用场景等信息，并进行深入了解和研究，从而为前端架构方案的制定提供参考。
2.技术选型前端技术的发展日新月异，技术选型成为前端架构方案必不可少的环节。
在技术选型时，需要根据实际情况和需求，选择符合项目需求的前端技术，如MVVM框架Vue、React等，同时也需要考虑技术的成本、使用难度和开发成果等因素。
3.模块化开发前端开发中，模块化开发是非常重要的实践。
采用模块化开发可以提高代码的复用性、可维护性和可拓展性，同时也可以方便团队协作、提高开发效率。
具体实现可以采用AMD、CommonJS、ES6模块化规范等。
4.标准化规范前端开发团队需要建立一套标准化规范，如代码风格规范、目录结构规范、文档编写规范、版本控制规范等。
制定规范可以提高开发的一致性和规范性，避免代码冲突和重复开发等问题。
5.效率工具前端开发中，常常需要消耗大量的时间和精力进行重复性的工作，如代码压缩、代码检查、自动化构建和测试等。
有效地利用效率工具可以提高前端开发效率，如Grunt、Gulp、Webpack等。
二、前端架构方案的应用案例1.腾讯云管理后台腾讯云管理后台采用React框架和Redux数据流管理，在开发中采用了模块化开发、组件化开发、标准化规范和自动化构建等，同时还使用了Webpack、ESLint和Jest等效率工具，从而实现了高效、质量稳定、易于维护的前端架构方案。
2.百度外卖百度外卖采用了MVVM框架Vue、WebSocket实时通信技术，还采用了组件化开发、标准化规范和自动化构建等前端架构实践，从而保证了前端开发效率和开发质量。
常用的前端框架
常用的前端框架前言随着互联网的不断发展，前端技术在我们的日常生活中占据着越来越重要的地位，因此前端框架也逐渐成为了我们开发过程中不可或缺的一部分。
本文将介绍几种常用的前端框架，帮助读者快速了解并掌握它们的特点和使用方法。
一、BootstrapBootstrap是由Twitter开发的一款流行的前端框架，它基于HTML、CSS和JavaScript技术，为开发者提供了一系列的样式表、组件、插件、布局等基础代码库，使得前端开发变得更加简单、快捷和容易。
Bootstrap具有响应式布局、移动设备优先、浏览器兼容性好等特点。
此外，Bootstrap提供了丰富的主题和模板，可以让开发者根据自己的需求进行自定义开发。
二、Vue.jsVue.js是一个轻量级的JavaScript框架，被许多开发者誉为“渐进式框架”的代表。
Vue.js具有良好的可维护性、易用性和性能优化等特点，使得它在Web应用程序中被广泛应用。
Vue.js提供了一套MVVM架构，同时还有一些可重用的组件、路由和状态管理等模块，可以使开发者快速实现主要的前端功能。
三、AngularJSAngularJS是Google推出的一款优秀的JavaScript框架，主要用于构建动态Web应用程序。
AngularJS提供了一套完整的MVC 框架，使开发者能够更好地控制DOM元素，从而创建出更好的用户体验。
AngularJS还提供了类似于指令、过滤器、服务、控制器等组件，可以让开发者快速实现复杂的功能。
四、ReactReact是Facebook开发的一款流行的JavaScript框架，主要用于构建Web应用程序的用户界面。
React具有高效、灵活、可重用等特点，使得它在各种应用程序中被广泛应用。
React使用Virtual DOM技术，可以大大提高Web应用程序的性能，并且提供了各种可重用的组件、路由和数据管理等模块，使得开发变得更加简单和高效。
五、jQueryjQuery是一款流行的JavaScript框架，主要用于快速简化HTML文档的遍历和操作，使得开发者更容易实现各种交互效果。
前端架构设计：层次设计
前端架构设计：层次设计我们在开发的不同阶段，构成的架构因素是不同的，基于这个思路，架构可以分为：1. 系统级架构2. 应⽤级架构3. 模块级架构4. 代码级架构系统级架构应⽤在整个系统内的关系，如与后台服务如何通信，与第三⽅系统如何集成。
在设计前端的时候，⾸先应该考虑的，是前端系统与其他系统之间是怎样的关系。
这种关系包含，业务关系和协作机制，⽐如与其他前端应⽤之间，如何进⾏交互和通信。
如何与后台对接实现权限，授权，api管理等功能。
如果与后台通信，只需要规定与后台数据传递的机制即可，包括api设计规则，访问授权的⼀个开放标准（OAuth）跳转token的验证，数据传递cookie等。
对于前端与后端的关系，我们所考虑的主要因素是前后端分离的架构设计。
前后端分离架构其实是如何实施技术决策，⽤户鉴权、API接⼝管理和设计、API⽂档管理、Mock的使⽤、BFF(服务于前端的后端，nodejs)，是否需要服务端渲染等。
所有以上决策，都需要不同团队，⽐如前端与后端，与产品需求分析师，与测试的不断沟通，才能⼀起设计出整个系统⽅案。
⽽微前端很微妙，在⼀个系统内微前端是应⽤间的架构⽅案；在多个应⽤之间，微前端则是⼀种系统间等架构⽅案。
微前端是将多个前端应⽤以某种形式结合在⼀起进⾏应⽤。
下⾯我们来深⼊了解⼀下，微前端。
微前端的⼏个核⼼价值与技术栈⽆关。
主框架不限制接⼊应⽤的技术栈，⼦应⽤具备完全⾃主权独⽴开发、独⽴部署。
⼦应⽤仓库独⽴，前后端可独⽴开发，部署完成后主框架⾃动完成同步更新独⽴运⾏时，每个⼦应⽤之间状态隔离，运⾏时状态不共享其实可以这样理解，微前端，是类似前后端分离的形态。
微前端架构旨在解决单体应⽤在⼀个相对长的时间跨度下，由于参与的⼈员、团队的增多、变迁，从⼀个普通应⽤演变成⼀个巨⽯应⽤(Frontend Monolith)后，随之⽽来的应⽤不可维护的问题。
这类问题在企业级 Web 应⽤中尤其常见，⽐如淘宝。
前端架构方案
前端架构方案随着互联网的快速发展，前端开发在Web应用程序中的重要性日益凸显。
一个优秀的前端架构方案能够提高开发效率、提升用户体验、提供良好的可维护性和可扩展性。
本文将介绍一种前端架构方案，旨在帮助开发团队构建出高效、可靠的前端系统。
一、整体架构设计在设计前端架构方案时，首先需要明确整体架构的设计思路。
一个完善的前端架构应该具备以下几个关键要素：1. 分层架构：将前端系统分解为不同的层次，每一层都有特定的职责和功能。
常见的前端分层包括展示层（UI）、业务逻辑层、数据层等。
分层架构可以提高代码的复用性和可维护性。
2. 模块化开发：将前端功能按照模块进行划分，每个模块负责一个独立的功能。
模块化开发有助于团队协作、提升开发效率和可维护性。
3. 组件化开发：将页面中的各个独立部分划分为组件，通过组件的拼装来构建页面。
组件化开发可以提高开发效率、复用性和可维护性。
4. 前后端分离：通过前后端分离的架构，前端开发团队可以独立开发、维护和部署前端代码，实现前后端职责的清晰分离。
二、技术选型与工具链选择适合的技术栈和工具链是一个重要的环节。
以下是一些常见的前端技术和工具，供参考：1. 前端框架：如React、Vue.js等，可根据项目需求选择适合的框架。
框架提供了丰富的功能和工具，有助于提高开发效率和代码质量。
2. 状态管理：选择适合的状态管理库，如Redux、MobX等，用于管理应用的状态和数据流。
3. 构建工具：如Webpack、Gulp等，用于自动化构建、打包和部署前端代码。
4. 组件库：如Ant Design、Element UI等，提供了丰富的UI组件和样式，方便快速搭建页面。
5. 集成测试：选择适合的测试框架和工具，如Jest、Selenium等，用于保证代码的质量和稳定性。
三、项目结构与模块划分一个合理的项目结构有助于团队协作和代码的组织。
以下是一个常见的前端项目结构示例：```- src- assets // 存放静态资源，如图片、字体等- components // 存放可复用的组件- pages // 存放页面级组件- styles // 存放样式文件- utils // 存放工具函数- services // 存放与后端API交互的服务- store // 存放状态管理相关文件- App.js // 应用入口组件- index.js // 项目入口文件```根据项目需求，将功能按照模块划分，并组织在对应的目录下。
信息化系统前端框架技术路线
信息化系统前端框架技术路线1.引言1.1 概述在信息化系统的开发过程中，前端框架技术起到了非常重要的作用。
前端框架技术可以帮助开发人员提高工作效率，减少开发成本，并提供更好的用户体验。
概括来说，前端框架技术是指一套基于特定规范和标准的前端开发工具、库和框架集合。
通过使用前端框架技术，开发人员可以快速构建可维护、可扩展的网页应用程序。
前端框架技术的作用主要有以下几个方面：1. 提供了模块化开发的方式：前端框架技术可以将整个应用程序分割成多个独立的模块，每个模块负责不同的功能。
这种模块化开发方式可以提高代码的可维护性和可复用性，便于团队协作和代码的管理。
2. 提供了丰富的UI组件和功能：前端框架技术一般都提供了大量的UI组件和功能，可以快速构建出漂亮、交互丰富的用户界面。
这些UI组件和功能可以简化开发过程，节省开发时间，提高用户体验。
3. 提供了跨平台和跨设备的支持：前端框架技术可以让应用程序在不同平台和设备上运行，如Web浏览器、移动端等。
开发人员只需编写一次代码，就可以在多个平台和设备上使用，减少开发工作量。
4. 提供了良好的性能和可扩展性：前端框架技术通常会对性能进行优化，并提供了扩展机制，可以根据具体需求进行定制和扩展。
这样可以保证应用程序的高效运行，并满足不断变化的业务需求。
综上所述，前端框架技术在信息化系统的开发中起到了至关重要的作用。
开发人员可以通过选择适合的前端框架技术路线，提高开发效率，提供优秀的用户体验，并满足不断变化的业务需求。
1.2文章结构文章结构部分的内容可以按照如下方式撰写:文章结构部分是为了让读者快速了解本文的组织结构，并明确各个章节的内容。
通过合理的文章结构，可以帮助读者更好地理解文章的内容和逻辑。
本文的文章结构分为引言、正文和结论三个部分。
引言部分包括了概述、文章结构和目的三个方面。
在概述部分，会简要介绍信息化系统前端框架技术路线的重要性和背景，引起读者的兴趣。
在文章结构部分，会列出整篇文章的大纲，明确各个章节的内容和次序。
前端项目项目的具体的技术点
前端项目项目的具体的技术点标题：前端项目开发技术点详解一、前端项目概述前端项目开发是指通过HTML、CSS、JavaScript等技术实现网页和应用的开发工作。
随着互联网的快速发展，前端项目开发已经成为了互联网行业中不可或缺的一部分。
在进行前端项目开发时，需要掌握一系列技术点，包括但不限于前端框架、异步请求、UI组件和性能优化等方面。
本文将从这些技术点展开，详细介绍前端项目开发的具体技术细节。
二、前端框架1. ReactReact是由Facebook开发并维护的一款用于构建用户界面的JavaScript库。
它以组件化的方式来组织整个项目的界面，提供了高效的更新机制和虚拟DOM技术，使得React在大规模应用开发中表现出色。
在React中，开发者需要掌握JSX语法、组件生命周期、状态管理和路由等方面的知识。
2. VueVue是一款轻量级的JavaScript框架，具有易于学习和上手、灵活的数据绑定和渐进式框架特点。
Vue提供了一套完整的生态系统，包括路由、状态管理、组件化等方面的支持。
在进行Vue项目开发时，需要熟悉Vue的组件通信、虚拟DOM、响应式原理和指令等概念。
3. AngularAngular是由Google维护的一款前端框架，是一个完整的MVVM框架。
相比于React 和Vue，Angular可能更加重型，但它提供了更加丰富的功能和完整的解决方案。
在使用Angular进行项目开发时，需要了解模块化、依赖注入、指令和服务等方面的知识。
三、异步请求1. AJAX在前端项目开发中，异步请求是非常常见的需求之一。
使用AJAX（Asynchronous JavaScript and XML）可以在不刷新整个页面的情况下与服务器异步通信，实现动态数据的加载和更新。
开发者需要了解如何使用原生的XMLHttpRequest对象或者基于Promise的fetch API来发送和处理异步请求。
2. AxiosAxios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
前端架构体系技术一、框架与组件bootstrap等UI框架设计与实现伸缩布局：grid网格布局基础UI样式：元素reset、按钮、图片、菜单、表单组件UI样式：按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告响应式布局：布局、结构、样式、媒体、javascript响应式第三方插件：插件管理jQuery、zepto使用原理以及插件开发支持amd、cmd、全局变量的模块化封装$.fn.method = function(){}mvc/mvvm框架原理设计directive设计：html、text、class、html、attr、repeat、ref，可扩展filter设计：bool、upperCase、lowerCase，可扩展表达式设计：if-else等实现viewmodel结构设计：例如数据，元素，方法的挂载与作用域数据更变检测：函数触发，脏数据检测、对象hijacking polymer/angular2思想与设计思路import技术template和script引入方式css样式命名空间隔离简单复用第三方库reactjs原理与使用virtual dom单向数据绑定js执行语法方式UI由状态控制commonJS/AMD/CMD模块引入模块定义模块标识UMD解决不同规范兼容性的问题，例如webpack封装模块懒执行(CMD)与与预执行(AMD)loadJs模块化加载原理与实现创建script标签，需要id映射到资源urlonload加载模块队列判断全部加载完成后触发加载失败问题优化requirejs、modjs、seajspolyfill、shim原理与实现polyfill提供了开发者们希望浏览器原生提供支持的功能特性shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现virtual Dom、Incremental DOM1.用js对象树表示dom树结构，根据该对象树构建dom树2.状态改变时，重新构建对象，和旧的对象对比，记录两个对象树差异3.将对象树差异应用到dom中小结:js对象模拟dom(elem.js)，virtual dom diff算法(diff.js)、差异渲染dom(patch.js)incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中shadow dom隔离外部环境用于封装组件：结构、样式、行为实现形式：新标签、class类属性+ 构建编译webwork与service Workerwebwork与主线程机制，on/postserviceworker可作为浏览器请求代理应用场景ES6转ES5、Babel与ES6开发规范体系ES6编码规范全ES6在babel下兼容性ES6在node下兼容性与性能ES6新特性：看编码规范aurelia ES6前端框架Isomorphic JavaScript同构原理同构方案Rendrnodejs: 服务器hapi: 应用服务backbone.js: 后台mvc requirejs: 模块加载jquery: dom处理reactjs同构:React + Flux + Koa 双向数据绑定函数触发:vuejs脏数据检测:angular对象hijacking:avalonbrowserify运行原理1.从入口模块开始分析require函数调用2.根据依赖生成AST3.根据AST找到每个模块的模块名4.得到每个模块的依赖关系，生成一个依赖字典5.包装每个模块（传入依赖字典以及export和require函数），生成执行的jsperformance timingperformance timing api performance timing 过程performance timing 性能计算performanceTrace库组件UI与js组件规范化组件编码规范组件目录规范：组件目录与公用目录组件构建规范：构建环境支持组件模块化管理：spm，bowserify 组件复用性管理第三方组件接入成本immutable JavaScriptgenerator与promise原理与使用二、构建生态grunt/gulp开发环境任务编写文件处理插件：html、scss、js、image、font、其它优化插件：雪碧图、图片压缩、iconfont构建发布替换插件打包、压缩包插件：组件自动分析白名单配置自定义插件编写npm、jspm、bower包管理工具r.js、browserify、webpack、webpack2、Rollup打包工具使用原理：根据依赖配置文件对文件进行依赖打包webpack支持更多的规范打包，AMD,Commonjswebpack+babel/reactjs+refluxfis3构建与插件开发、构建环境、fis3构建离线包web Component：rosetta-org、x-view、Q、riot、novabrunch构建工具三、开发技巧与调试fiddler加willow基础组合调试常见配置与分析结合浏览器调试werien、vorlonjs远程调试，chrome inspectmockjs，F.M.S(FrontMock Server)模拟调试使用与cgi自动调试macha/phantomjs/casperjs/karma测试自动化任务使用自动化UI测试，海豚node-supervior、node-inspector、karma开发发布系统流程sublime高效插件emmet工具使用、sublimelinter、babel snippets、sublimeLint、SassBeautify 、emmet 快速编辑、jsxlint、SideBarEnhancements、SnippetsMaker、SublimeCodeIntel、css snippets、ColorPicker、html/css/js Pretty、SpinnetMacker、DocBlockr、MultiEditUtils、javascript& node spinnet、JavaScript & NodeJS Snippets、jsLint、cssLint代码自动化检查fecs四、html、css与重构jpeg、webp、apng、bpg图片编码原理特点与优劣势适用场景iconfont使用与实现原理自动打包构建方法iconfont兼容性写法fonthello、fontawesome、icomoon.io、线上工具页面响应式设计layout布局响应式html结构响应式css样式响应式image媒体响应式javascript响应式media query与平台判断css重置resetnomalizeneatsass/compass/less/postcss常用语法与使用常用语法功能组件化UI设计管理构建工具实现方案雪碧图自动合成iconfont自动接入等等media query与常见页面尺寸了解媒体类型引入和媒体特性引入device-width适应retina屏幕适应em,rem原理与实现rem计算：width*retina/10，相当于屏幕宽度为10rem 字体在rem情况下仍然使用pxcode4ui、code4app、初页、maka等前端dom操作即使刷新前端页面根据dom操作生成组件config配置保存到db根据config配置使用r.js或webpack打包发布打包后输出文件css3动画transformanimationtransiction3D加速与动画加速动画库缓动函数速查表：/easeing/easeing/ Ceaser：/easeing/ceaser/ cubic-bezier：/css网格布局susyResponsive Grid SystemFluid 960 Grid(adaptjs) Simple Grid搜索引擎与前端SEO tdk优化页面内容优化唯一的H1标题img设置alt属性nofollowurl优化统一链接301跳转canonicalrobot优化robots.txtmeta robotssitemapSEO工具各种站长工具等浏览器缓存种类，resources,webSQL,indexDB, localstorage,cookie,app cache,cache storagestore.js、cookie.jsUI框架bootstrap、jqwidgets、semantic ui、amaze ui 微信手Q ui: frozenui、weui、blend uiextjs、echart图表ui五、native/hybrid/桌面开发ionic移动开发方案运行架构hybrid混合开发cordova交互离线包更新性能瓶颈nativescript移动开发方案react Native移动开发方案运行架构：js引擎性能缺陷与内存泄露更新机制使用场景android/ios原生开发与框架javaoc、swiftweb与native交互屏幕旋转摇一摇录像，拍照，选取本地图片打电话，发短信电池电量地理位置日期选择开启硬件加速桌面应用开发nodewebkitatom-shell(后改名为electron)网易Hexpomelo(游戏服务器框架)react desktopappjs:六、前端/H5优化(另一个图已给出)yslow、pagespeed移动web性能优化手机浏览器”省流量”原理增量更新原理及注意事项本地存储的应用加载优化图片优化单页面及路由实现业内著名站点案例分析七、全栈/全端开发express/nodeclub + mongodb、thinkjs等框架node.js直出实时web开发，meteor/express.ioMEAN(mongodb/express/angular/nodejs)http 与http2协议、bigpipe、pipeline离线缓存，cookie、localstorage、indexdbcdn与dns动态域名加速cdn原理与cdn combo八、研究实验WebAssembly、webTRC、typescriptMaterial design规范的前端框架交互动效库AMP-HTML规范使用受限HTML以及缓存技术来提高移动网络中静态内容的性能添加自定义的元素代替禁用掉的元素：amp-audio, amp-img、amp-video等九、数据分析与监控badjs数据上报捕获错误两种方法：onerror、try-catch。
抽样上报，先onerror统计语法错误，如果是script error，再使用tryjs。