使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
渲染阻止资源(render-blocking resources)是浏览器必须下载、解析和执行才能显示页面的外部 JavaScript 或 CSS 文件。 目标是仅运行正确显示页面所需的核心 CSS 和 JavaScript 代码。 打开 coverage 标签页: 点击下图这个图标,会以 instrumenting 模式重新加载应用: 结果显示,webpack 生成的 vendor
使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
Optimize website speed 每当您着手提高站点的负载性能时,请始终从 audit 开始。 审计有两个重要功能: 它为您创建了一个基线来衡量后续更改。它为您提供有关哪些更改将产生最大影响的可行提示。 本文使用下面这个网站应用作为例子。 https://glitch.com/edit/#!/tony 点击 Tony, 然后再点击 remix this,得到一个名称随机生
关于 SAP 电商云首页加载时触发的 OCC API 请求
当我访问本地启动的 SAP Spartacus Storefront 时,在 Chrome 开发者工具里观察到总共 23 个 OCC API 调用: http://localhost:4200/electronics-spa/en/USD/ 这23个 OCC API 调用从功能上可以分成三组: 第一组:包含一个请求/occ/v2/electronics-spa/cms/pages?lan
SAP UI5 确保控件 id 全局唯一的实现方法
Support for Unique IDs stable ID 用于在运行时识别和修改控制器内的控件。 但是,如果您重用或嵌套这些视图,这些 stable ID 将不再是唯一的。 为了避免 id 冲突,每个 SAP UI5 视图都将自己的 ID 作为前缀添加到其所有子控件中。 看一个例子,下面这个 xml 视图里,Button 控件的 id 为:aButton <mvc:View v
SAP 电商云 Accelerator 和 Spartacus UI 的工作机制差异
SAP Commerce Cloud Accelerator UI 基于 JSP,属于服务器端渲染技术,Commerce 服务器将渲染好的 HTML 页面发送给客户端。 当用户在当前页面点击某些元素,要跳转到新的 UI 时,这些新的 UI 和当前页面是由不同的 page 实现的。因此这些跳转操作,会触发浏览器向服务器发起新的页面请求(page request). 客户端收到服务器发
介绍一个好用的能让网页变成黑色背景的护眼 Chrome 扩展应用 - Night Eye
这个扩展的名称:Night Eye - Dark mode on any website 可以直接在 Chrome extension web store 里下载。 看个使用的例子:这是我正常的网页: 这个扩展安装成功后,在右上角扩展图标栏里能看到对应的图标,点击: 选择“黑暗”模式即可: 切换成黑色模式之后的网页: 点击这个齿轮图标,可以进行自定义设置: 即使不付费,也可
Chrome 开发者工具 performance 标签页的用法
Analyze runtime performance 运行时性能是您的页面在运行时的表现,而不是加载。 就 RAIL 模型而言,本文介绍的方法对于分析页面的响应、动画和空闲阶段非常有用。 在隐身模式下打开谷歌浏览器。 隐身模式可确保 Chrome 以干净的状态运行。 例如,如果您安装了很多扩展,这些扩展可能会在您的性能测量中产生干扰。 在您的隐身窗口中加载以下页面。 这是您要分析的演示。
Client Side Cache 和 Server Side Cache 的区别
Cache me outside 缓存是一种优化网页加载时间并优化其使用的内存量的持久化机制。 Cache 的定义出于篇幅限制,本文重点介绍 Web 缓存。 当您加载网站时,网站数据(如图像、视频和 html 文档)将被保存。 重新加载网站后,它不会调用数据库再次获取该数据。 它只是将数据从内存中读取。 缓存以容量换取速度,缓存通常会暂时存储数据的子集,而数据库的数据通常是完整且持久的。
SAP HANA Schemas 和 HDI Containers
plan: hdi-shared SAP HANA 数据库 schema 使您能够在逻辑上将对象(例如表、视图和存储过程)组合在一起。 如果没有定义的 Schema,您将无法写入目录。 SAP HANA 扩展应用程序服务 (SAP HANA XS) 使您能够将数据库模式创建为存储库中的可传输设计时文件。 关系数据库包含描述系统中各种元素的 catalog. Catalog 将数据库划分为
如何手动下载并安装 Visual Studio Code 的 SAP Fiori tools - Extension Pack 扩展
有朋友按照我这篇教程SAP UI5 本地开发环境的搭建里介绍的步骤,在 Visual Studio Code 内直接在线安装 SAP Fiori tools - extension pack 时: 遇到一些错误,导致在线安装不能成功: 错误消息: Error while installing SAP Fiori tools - Extension Pack extension.
一个最简单的 Github workflow 例子
源代码: name: learn-github-actions on: [push] jobs: check-bats-version: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with
SAP UI5 初学者教程之七 - JSON 模型初探试读版
Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和“汪子熙”微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 一无所知的新手,从哪些材料开始学习比较好? 曾经提到,Jerry 也是从 SAP UI5 菜鸟一路走过来,深知只有 ABAP 开发背景的开发
SAP UI5 初学者教程之六 - 了解 SAP UI5 的模块(Module)概念试读版
Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和“汪子熙”微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 一无所知的新手,从哪些材料开始学习比较好? 曾经提到,Jerry 也是从 SAP UI5 菜鸟一路走过来,深知只有 ABAP 开发背景的开发
关于 SAP UI5 里包含的 jQuery 版本
How to find the jQuery version used by SAPUI5 sap-ui-core.js 是 bootstrap 部分的一部分,如下所示。 它包含一个 jQuery 文件的副本。 正在使用的 jQuery 版本可以通过命令 $.fn.jQuery 找到。 <!DOCTYPE HTML> <html> <head>
SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods
SAPUI5 View Controller lifecycle methods Create an Application Project for SAPUI5打开 Eclipse 并转到菜单选项,文件 -> 新建 -> 其他…。 在 New 窗口中,打开节点 SAPUI5 Application Development 并选择 Application Project 选项。 单击
如何理解 SAP UI5 的 sap.ui.define 函数
Understanding sap.ui.define by Hello World 随着 1.28 版本中 sap.ui.define 函数的引入,SAPUI5 引入了对异步模块定义 (AMD) 的支持。AMD 是 Asynchronous Module Definition 的缩写。 所谓模块(Module),即是可以在浏览器中加载和执行的 JavaScript 文件。 异步模块定义 (
SAP UI5 初学者教程之五:视图控制器初探 试读版
Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和“汪子熙”微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 一无所知的新手,从哪些材料开始学习比较好? 曾经提到,Jerry 也是从 SAP UI5 菜鸟一路走过来,深知只有 ABAP 开发背景的开发
SAP UI5 的初始化过程
加载 SAPUI5 运行时后开始初始化过程。 SAPUI5 运行时的初始化包括以下步骤: (1) jQuery 插件主要位于 jQuery.sap 命名空间中,提供 SAPUI5 的基本功能,例如模块化概念、日志框架、性能测量等。 如下图所示: (2) 定义了全局对象 sap: (3) sap.ui.core.Core 类与其所有依赖项一起执行。 (4) 运行时配置(r
Angular 应用里的摇树优化 - tree shaking
Tree Shakeable Providers and Services in Angular Angular 最近推出了一项新功能,Tree Shakeable Providers。 Tree Shakeable Providers 是一种定义服务和其他东西的方式,以一种可以提高 Angular 应用程序性能的方式被 Angular 的依赖注入系统使用。 首先,在我们深入挖掘之前,让我们先
Angular 应用里的 vendor.js 是用来干什么的?
What is vendor file in angular? 以 SAP 电商云 UI 的 Angular 页面为例,这个 vendor.js 有超过 17 万行代码: 此文件包含导入您的应用程序 (app.module) 的所有库,包括 Angular 库。 导入到您的应用程序中的第三方库也会被编译到此文件中(例如 lodash、moment 等)。 这个文件在开发编译(ng b