日常问题

由于之前的一些简单站点是通过vuepress打包生成，现在只是修改部分站点信息，在开发环境下运行`yarn dev`是正常的，但是运行打包`yarn build`是报错的

批量处理一个文件夹内的资源名称，处理成类似slug格式的，同时使用各种脚本node、bash、PowerShell方式来处理。

本文主要列举一些格式化json文件的方法，以及对比使用方法的不同场景。什么时候使用紧凑格式、什么时候使用美化方式

在id元素名不使用CSS标识符的命名规则时，可以使用其他措施来正常获取到id元素，避免出现一些异常现象

adsense广告在广告展示失败的时候，需要采取一些措施来保证页面不会出现空白区域等现象，最早是使用了替补游戏来弥补。本次处理需要去除这些替补广告的展示，广告不成功展示或者不展示，直接隐藏

nginx反向代理https相关目标服务，出现了SSL_do_handshake() failed，可以使用 proxy_ssl_server_name on 来正确识别客户端，来解决ssl握手失败

使用阿里云的cdn缓存资源，需要注意资源是否设置强缓存或者协商缓存，以避免缓存未命中情况。因为阿里云CDN存在默认缓存规则和优先级

使用a标签测试下载附件的现象 在同源情况下，文件都可以正常下载 不同源情况，部分文件(.json、.txt、.png等)会变成在线预览形式

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知

通过鼠标控制放大缩小，不断的放大后，图片清晰度就会慢慢出现模糊，越放大，像素就会越小。图片大部份模糊会与这个像素比devicePixelRatio挂钩

最近项目中,对于一些元素使用了fixed(`相对于屏幕视口（viewport）的位置来指定元素位置`),但是却出现一些特殊的现象：使用了`position:fixed;top：0;left：0`的元素

java bridge method can't be invoked on a non injected object "`,这也是在安卓包调试后，才发现的问题。本文针对这种情况，出现的原因及解决方

react项目中很容易提示一些错误React Hook useEffect has missing dependencies，这种问题下如何处理

1、现象： 初步分别使用css媒体查询和react-responsive的useMediaQuery，进行移动端和pc端切换对比。使用useMediaQuery可以快速通过js获取当前的媒体查询，从而

因为项目中使用nginx和minio来代理静态文件，使用字母大小写不一样的路径，访问同一个页面，返回的页面内容不一致。本文主要针对这种大小写访问同一个路径，解决页面内容不一致的nginx处理方案

常规懒加载 使用图片资源懒加载作为例子，一般都是在页面中进行资源监测，进入页面触发一次懒加载，滚动时候再绑定事件触发懒加载，这样页面就一开始进行了两次处理。如果页面有横向滚动的元素，就需要再绑定

Cache 浏览器的缓存主要有memoryCache、diskCache、ServiceWorker cache，本文主要以ServiceWorker 的cache为主，使用缓存存储当前面中所有资源

当脚本在网页加载过程中未能成功加载时，通常会发生错误。这些错误可能是由各种因素引起的，例如网络连接问题、服务器故障、vpn代理等， 大部份可以重复再加载一次，或者使用不同节点的脚本作为备用源加载

项目中使用element-ui表单，同时需要处理一些特殊条件下，需要进行表单校验。一些特殊条件下使用了v-if,从而导致了部分表单校验失效

使用innerHTML中插入<script>，直接把谷歌脚本引入(之前这么做目的是为了减少把谷歌脚本拆得分散),导致浏览器没有运行执行脚本