🪒Web端字体切割压缩方案
今天接到一个系统需求，需要将系统内的文字替换为鸿蒙OS的字体（ ），但是鸿蒙OS的字体单Regular的文件就有8M+。这个直接放到网页上，会极大影响使用体验。 于是乎，开始考虑怎么开始对字体文件进行压缩。 第一种方案 一般来说，字体格式体积由大到小排列（性能从差到好）： ttf，eot(IE8)，woff，woff2 从官网下载的鸿蒙字体是ttf格式的，尝试用了woff2格式的（ ），但是还是有4M多。对于Web端来说，还是太大了。...
SPA项目频繁上线导致白屏？最佳实践来了
<span style="color: var( g textcolor);" 背景是我们团队有个项目，上线后，偶尔会听到有人反馈说页面白屏了，刷新页面才好，因为有相当的机率复现，就排查原因。最后发现与SPA有关。</span 什么是SPA SPA是"单页应用程序"（Single Page Application）的缩写，与传统的多页应用程序（Multi Page Application，就是原生的一个个的HTML）相对应。 在传统的多...
实现主题换肤( CSS 变量 + 类名切换)
实战引入： CSS变量 + 类名切换 通过arco design组件库的使用来了解如何切换主题 主要思路：CSS变量 + 类名切换（组件库提供/自己定义） + 将当前主题模式设置到localStorage + vuex状态管理theme 1. 定义CSS变量：因为CSS变量组件库已经配好一套黑白变量了，直接拿来用 2. 为body标签添加相关的属性，参考arcodesign官网： 设置到localStorage防止刷新之后主题恢复成默认...
前端主题切换方案
现在我们经常可以看到一些网站会有类似 的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家可根据需求综合分析得出一套适用的方案。 方案1：link标签动态引入 其做法就是提前准备好几套 主题样式文件，在需要的时候，创建 标签动态加载到 标签中，或者是动态改变 标签的 属性。 表现效果如下： 网络请求如下： 优点： 实现了按需加载，提高了首屏加载时的性能 缺点：...
如何给网站安装百度统计代码
背景： 目前国内大部分网站都在网站添加了百度统计代码，用来统计网站的数据，例如网站的实习数据，来源，登陆页面，离开页面，停留时间等。如果你的网站希望能采集到这么详细的数据，并且网站服务器也在国内的话，可以在网站代码里面添加百度统计代码，然后进入百度统计的后台就可以查看到详细的网站运营指标数据。 操作步骤如下： 1、点击进入百度统计的官网， ： 2、注册一个账号，如果有百度的账号可以直接登陆： 3、登陆后添加网站： 操作路径，【管理】 【...
JS调用媒体设备失败 --- getUserMedia undefine 问题
解决: getUserMedia undefine 问题 问题: http请求的 chrome，edge, fireFox 等主流浏览器由于安全限制将不会暴露getUserMedia 方法，所以就不能够访问用户的媒体设备。 为什么会出现这种情况？ 首先本地开发 127.0.0.1 不会出现这种情况，这种情况仅存在于线上环境并且没有SSL证书的HTTP协议网址。 如何解决 1\. 使用HTTPS协议 为线上环境申请域名，配置SSL证书，实...
在非安全的http协议下，使用navigator.mediaDevices.getUserMedia
在非安全的 协议下，使用 方法会受到浏览器的限制，并且可能会导致无法访问用户的媒体设备。然而，有一些浏览器提供了一些设置选项来允许在 协议下使用媒体设备。以下是一种可能的解决方案： 在Chrome浏览器中，你可以通过以下步骤来启用 协议下的媒体设备访问： 1. 打开Chrome浏览器，在地址栏输入 并按下回车键。 2. 在搜索框中搜索 "Insecure origins treated as secure"，或者直接定位到该选项。 3....
一文带你弄懂 前端SEO优化
前言 以前开发独立站，涉及过一些SEO的内容，为了避免后面会遗忘，感觉有必要记录下相关经验，也算是一次总结吧！ SEO概念 SEO 是 Search Engine Optimizatio（搜索引擎优化） 的首字母缩写，利用搜索引擎的规则对网站进行内部及外部的调整优化，提高网页或网站在搜索引擎中关键词的自然排名, 以求得获得更多的展现量和吸引免费的点击流量，从而达到互联网营销及品牌建设的目标。 SEO的方式 1\. Title标签 对页面...
功能问题：如何限制同一账号只能在一处登录
大家好，我是大澈！ 本文约 字，整篇阅读大约需要 分钟。 感谢关注微信公众号：“程序员大澈”，免费领取" "一份，然后免费加入 ，从此让解决问题的你不再孤单！ 1\. 需求分析 前阵子，和问答群里一个前端朋友，随便唠了唠。期间他问了我一个问题，让我印象深刻。 他问的是，限制同一账号只能在一处设备上登录，是如何实现的？并且，他还把这个功能称为“单点登录”。 我说这不叫“ ”，这是“ ”。 于是，当时对此概念区分不清的他，和我在语言上开始了...