手机、电脑，它们的默认刷新频率都是 60FPS，也就是屏幕在 1s 内渲染 60次，约 16.7ms 渲染一次屏幕。这就意味着，我们的浏览器最佳的渲染性能就是所有的操作在一帧 16.7ms 内完成，能否做到一帧内完成直接决定着渲染性，影响用户交互。浏览器的 fps 指浏览器每一秒的帧数，fps 越大，每秒的画面就越多，浏览器的显示就越流畅。
标准渲染帧：在一个标准帧渲染时间 16.7ms之内，浏览器需要完成 Main 线程的操作，并 commit 给 Compositor 进程
丢帧：主线程里操作太多，耗时长，commit 的时间被推迟，浏览器来不及将页面 draw 到屏幕，这就丢失了一帧
1在浏览器的一个渲染帧（16.7ms）里，会存在一段时间，叫做空闲时间（idle period），如果完成各种任务的执行以及页面渲染的工作等的时间少于 16.7 ms，那么这一帧就会存在空闲时间，可以把一些耗时操作拆分开来，然后在每一帧的空闲时间中去执行。
所谓的页面卡顿、首屏加载慢，根本原因都是执行长任务，使得页面的渲染时机推后，在每一帧里得不到渲染，从而造成用户的不好体验。要想解决用户体 ...
移动端+适配
未读
混合开发（即Hybrid App）其实是一种开发模式，它混合使用了Native和Web技术开发来实现同一个应用。
主流跨端目前还是比较多的，分了以下这几大类
web整体渲染为主： Cordova（前身为PhoneGap）
原生渲染组件为主： React Native，weex
开放底层渲染能力： Flutter
较封闭的混合渲染： 微信/支付宝/抖音/百度等小程序（通常会用到taro或者uniapp做技术栈）
JSBridge
前端页面渲染到app上的webview中，原生与h5如何进行双向通信的？答案就是 JSBridge。
JSBridge 简单来讲，主要是给 JavaScript 提供调用 Native 功能的接口，让混合开发中的『前端部分』可以方便地> 使用地址位置、摄像头甚至支付等 Native 功能。
实际上，JSBridge 就像其名称中的『Bridge』的意义一样，是 Native 和非 Native 之间的桥梁，它的核心是构建 > Native 和非 Native 间消息通信的通道，而且是双向通信的通道。
在开发过程 ...
rem+vw移动端屏幕适配方案在说具体内容之前，我们必须了解几个概念，就是：Retina屏、物理像素、设备独立像素、设备像素比在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素是和屏幕像素密度有关的。
Retina屏所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。
Retina屏一般在苹果公司的产品上用的比较多，诸如MacBook、iPad、iPhone等
以MacBook Pro with Retina Display为例，工作时显卡渲染出2880x1800个像素，其中每四个像素一组，输出原来屏幕的一个像素显示的大小区域内的图像。 ...
技术实现方案5.1 Canvas分层渲染原理: 将Canvas分为多个图层,静态内容和动态内容分开渲染, 避免每帧都重绘整个Canvas。
分层策略:
1234图层1 (背景层): 静态背景、网格线 - 只绘制一次图层2 (内容层): 数据点、图形 - 数据变化时绘制 图层3 (动画层): 粒子、特效 - 每帧绘制图层4 (交互层): 鼠标hover、tooltip - 交互时绘制
优势:
减少重绘区域
降低CPU占用
提升帧率
优化内存使用
实现代码:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556class LayeredCanvas { constructor(container) { this.container = container this.layers = [] this.init() } init() { // 创建多个Can ...
如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vm vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？
而解决了适配问题后，后面就只是一个慢工出细活，耗时间的事情了。
适配方案分析看了网上的各种方案，目前大家采用的大概有 3 种👇
方案
实现方式
优点
缺点
vm vh
1.按照设计稿的尺寸，将px按比例计算转为vw和vh
可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
每个图表都需要单独做字体、间距、位移的适配，比较麻烦
scale
1.通过 scale属性，根据屏幕大小，对图表进行整体的等比缩放
1.代码量少，适配简单 2.一次处理后不需要在各个图表中再去单独适配
1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.当缩放比例过大时候，字体会有一点点模糊，就一点点 3.当缩放比例过大时候，事件热区会偏移。
rem + vm vh
1.获得 rem 的基准值 2.动态的计算html根元素的font-size3.图表中通过 vm ...
移动端+适配
未读
背景
员工手机扫电磁门开门通行摆脱对网络的依赖（电磁门位置通常在WiFi覆盖边缘，扫码开门强依赖网络漫游速度）
升级到离线的电子工卡，扣码开门
技术实现以电子工卡接入离线包方案为代表的方案，属于 NSR（Native Side Rendering），这是大前端配合的典型案例
简单分析 从 0 到 1 分析一个前端+移动端离线包方案目的通过离线包方案的源起和落地，梳理整个 hybrid 页面的优化相关方案
如图：第一步：从一个原生页面点击按钮，打开一个 hybrid 页面，首先经过原生页面路由，识别到”这是在访问一个 hybrid 页面”，此时原生会启动一个 WebView 容器，接着就是一个正常的前端加载并渲染页面的流程了；
第二步：前端 CSR 方式为例，首先请求并加载 HTML，接着以 HTML 为起点，请求 JavaScript、CSS 等静态资源，并由 JavaScript 发送数据请求（数据请求ajax依赖网络），最终完成页面内容的加载和渲染。
优化的路径有2个客户端阶段对于 WebView 容器的启动，客户端可以提前启动 WebView 容器池，这样在真正访问 hyb ...
移动端+适配
未读
你写过小程序/H5，那你知道他们的区别在哪里吗？为什么说小程序的性能通常优于 H5? 小程序能访问到 DOM 对象吗？小程序的原理是什么？
小程序和 H5 都是轻量级的、可直接在移动设备上运行的应用，但它们之间存在一些关键差异。
1. 运行环境
小程序：运行在特定的 APP（如微信，支付宝）内的一个独立的运行环境。📱
H5：运行在各种浏览器中的，这些浏览器基本上都遵循相同的 Web 标准，因此 H5 应用可以在任何支持这些标准的浏览器中运行。🌐
2. 开发环境和工具
小程序：开发需要使用特定的开发工具，如微信开发者工具，阿里巴巴的 IDE 等。你只能使用这些工具提供的 API 和组件进行开发，不能使用大部分的第三方库和工具。🛠️
H5：开发工具和库则非常丰富。你可以根据自己的需求和喜好选择最适合的工具进行开发，开发自由度较高。🎨
3. 性能和体验
小程序：由于小程序的代码运行在一个相对封闭和优化过的环境中，因此其运行效率和性能比 H5 更高。而且小程序可以实现类似于原生 APP 的体验，如离线访问，深度集成等。🚀
H5：H5 的性能和体验则受到浏览器的限制。虽 ...
一：数据存储这一块的知识只要是针对小程序列表和web资源包资源路径进行存储和查询。具体的详细设计如下：
小程序列表数据存储小程序接口列表接口返回数据设计
数据存储通过数据库进行存储、数据库表设计如下：
1234567891011121314"list": [{ "minProgramId": "", // 小程序Id "name": "" // 小程序名称 "content": "", // 更新描述 "version": "", // 小程序版本号 "build": 1, // 小程序build号 "h5Url": "", // h5线上地址 "detail": { "fullUrl": " ...
移动端+适配
未读离线包定义
离线包 是将包括 HTML、JavaScript、CSS 等页面内静态资源打包到一个压缩包内。预先下载该离线包到本地，然> 后通过客户端打开，直接从本地加载离线包，从而最大程度地摆脱网络环境对 H5 页面的影响。
离线包的优势
**提升用户体验：**通过离线包的方式把页面内静态资源嵌入到应用中并发布，当用户第一次开启应用的时候，就无需依赖网络环境下载该资源，而是马上开始使用该应用。**实现动态更新：**在推出新版本或是紧急发布的时候，您可以把修改的资源放入离线包，通过更新配置让应用自动下载更新。因此，您无需通过应用商店审核，就能让用户及早接收更新。
离线包实现流程图
离线方案的设计和开发（解决弱网环境下资源加载缓慢，体验差的问题）
(资源离线/JsBridge通信/接口预请求)● H5优势: 跨平台, 实时更新, 便于传播等● 劣势: 功能(硬件访问能力, 离线功能), 性能, 体验等
一. 资源离线● 静态资源加载耗时, 资源离线到本地, 能很好解决.● web页面把静态资源生成zip包, 客户端在合适的时机拉去zip包并解压到本地, 持久化 ...
视频讲解：移动端适配视频（必看）
viewport - 视图、视窗移动端设备中，整块显示屏就相当于视图、视窗。
在移动端设备中，浏览器视图并不是整个屏幕。因此viewport又被分为了3种：layout viewport、visual viewport、ideal viewport。
layout viewport大部分浏览器把viewport的宽度设为了980px，这个浏览器默认设置的视图被称为layout viewport。我们可以使用 document.documentElement.clientWidth 来获取。
visual viewportlayout viewport的宽度是远大于浏览器宽度的，因此我们需要一个新的viewport来代表浏览器的可视区域宽度，这个视图则被成为visual viewport。我们可以使用 window.innerWidth 来获取。
ideal viewport现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的ideal viewport。
viewport的单位 vw、vhvw、vh将viewport ...
