CamilleZJ的博客

实现网站都变成灰色

html picture元素

iframe通信

CSS 自定义属性（变量）

react错误边界

babel-plugin-import 实现按需引入

chrome浏览器自动填充样式

css处理loader

聚焦源代码安全，网罗国内外最新资讯！编译：代码卫士专栏·供应链安全数字化时代，软件无处不在。软件如同社会中的“虚拟人”，已经成为支撑社会正常运转的最基本元素之一，软件的安全性问题也正在成为当今社会的根本性、基础性问题。随着软件产业的快速发展，软件供应链也越发复杂多元，复杂的软件供应链会引入一系列的安全问题，导致信息系统的整体安全防护难度越来越大。近年来，针对软件供应链的安全攻击事件一直呈快速增长态势，造成的危害也越来越严重。为此，我们推出“供应链安全”栏目。本栏目汇聚供应链安全资讯.

热门NPM库 “coa”遭劫持，影响全球的 React 管道，解决有coa劫持引起的安装项目报错。

Web 页面中的 JS 与 iOS Native 如何交互？JS 和 iOS Native 就好比两块没有交集的大陆，如果想要使它们相互通信就必须要建立一座“桥梁”。WebViewJavascriptBridge是盛名已久的 JSBridge 库，它仅使用了少量代码就实现了对于 Mac OS X 的 WebView 以及 iOS 平台的 UIWebView 和 WKWebView 三种组件的完美支持。WebViewJavascriptBridge 主要是作为 Mac OS X 和 iOS 端（Na.

support-webp.tsexport default new Promise(resolve => { const image = new Image(); image.onerror = () => resolve(false); image.onload = () => resolve(image.width === 1); image.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASo

开始通过npm init 创建package.json的时候就有大量与用户的交互(当然也可以通过参数来忽略输入)；而现在大多数工程都是通过脚手架来创建的，使用脚手架的时候最明显的就是与命令行的交互，如果想自己做一个脚手架或者在某些时候要与用户进行交互，这个时候就不得不提到inquirer.js了。介绍由于交互的问题种类不同，inquirer为每个问题提供很多参数：type：表示提问的类型，包括：input, confirm, list, rawlist, expand, checkbox, pas

react中使用lodash的debounce，使用如下： constructor(props: Props) { super(props); this.state = { value: "", }; this.handleChange = this.handleChange.bind(this); this.debounceInput = _.debounce(this.debounceInput, 500); } handleCha.

最近在做一个活动，涉及多环境的定位，如app、微信、支付宝小程序等，分别采用各自环境的定位api获取用户当前位置的经纬度，根据经纬度获取距离该用户最近的门店。app(本公司)采用的百度坐标系（BD09，百度坐标） 微信采用的腾讯坐标系（WGS84，gps定位） 支付宝采用高德坐标系（火星坐标系）不同坐标系参照物不一样，之间存在误差 ，需要统一坐标系获取最近的门店，是根据经纬度计算最短距离。该接口采用的是百度坐标系，所以使用上面定位到的经纬度需要统一转换成百度坐标系，百度提供了坐标转换接口，微信

一般项目发版后前端静态文件会有缓存问题，不强制刷新很难解决，但是用户不会去强制刷新。一般浏览器缓存的文件有html、css、js等。而html中引入的css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。但是浏览器把整个html页面缓存就稍微麻烦些。html静态文件缓存：1、一般设置了静态文件的缓存，都会设置文件的协商缓存。所以每次请求下载文件时，都会返回一个http响应Last-Modified:文件修改时间1。用户访问文件会在http请求头带上If-

<a href="https://www.xinshouzhanzhang.com/" target="_blank">跳转到一个新页面</a>没有rel=“noopener noreferrer”的情况下使用target=“_blank”是有安全风险，超链接a标签的rel="noopener noreferrer"属性是一种新特性，它能让网站更安全，超链接添加rel="noopener noreferrer"来防止钓鱼网站，因为它获取的window.opener的值为null.

1、display：none；DOM结构：浏览器不会渲染display属性为none的元素，不占据空间，意思就是页面上没有它的一席之地，你在开发者模式中选不中那个元素。 事件监听：无法进行DOM事件监听。 性能：动态改变此属性时会引起重排，性能较差。 继承：不会被子元素继承，因为子元素也不被渲染。 transtion过渡不支持display。2.、visibility：hidden；DOM结构：元素被隐藏了，浏览器会渲染visibility属性为hidden的元素，占据空间，意思就是页面上

给定一个m x n 整数矩阵matrix ，找出其中 最长递增路径 的长度。对于每个单元格，你可以往上，下，左，右四个方向移动。 你 不能 在 对角线 方向上移动或移动到 边界外（即不允许环绕）...

https://xie.infoq.cn/article/fa1693e9fcda8719dc95a1bc2

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。

经典问题：js setTimeout 0秒，会立即执行吗？ setTimeout 1000ms 若是没有其他任务，是到了时间立即执行么，若不是间隔是多久(浏览器刷新率按60帧算就是1000、60=16.7ms)setTimeout(function(){console.log("setTimeout执行了")},0)for(var i=0;i<1000000000;i++){ if(i==999999999){ console.log(i);

call、apply、bind的作用是改变函数运行时this的指向。一、this1、普通函数中的thisfunction fn1(){ console.log(this) //window}fn1()var a = 1;function fn(){ console.log(this.a);}fn(); //输出1setTimeout(function() { console.log(this) //window function fn(){..

通过自己编写打包代码，可以更好的了解打包的流程记以及webpack打包原理。案例：实现一个类似于webpack的打包工具，也是基于nodejs。目录结构：//word.js：export const word = "hello"; //message.js：import { world } from "./word.js"; //要去实现类似于webpack的打包工具，即还没有webpack的功能，因此必须写全引用export const message = `say ${wo

webpack plugin能够钩入(hook)到在每个编译(compilation)中触发的所有关键事件。在编译的每一步，插件都具备完全访问compiler对象的能力。使用阶段式的构建回调，开发者可以引入它们自己的行为到 webpack 构建流程中。官方文档：https://webpack.docschina.org/contribute/writing-a-plugin/ https://webpack.docschina.org/api/plugins/插件构成：一个 Ja...

Webpack 的整体架构、打包思路、loader 实现思路、plugin 实现思路、parser 运行流程等都讲到了。https://xiedaimala.com/courses/32694a1c-6f3b-4e3a-b36d-e55a6c1d74a6/random/c930a7592b#/common高级前端面试中经常有这么几道题：说一说 loader和 plugin 的区别 webpack 构建流程是怎样的 编写 webpack loader 的思路 编写 webpack plugin.

了解了redux，还需要好好了解 Redux 相关的生态。一、redux-thunkredux-thunk是什么？redux-thunk是redux的中间件，利用 redux 的中间件可以让 redux 支持异步的 action。如下：原始的Redux里面，action creator必须返回plain object，而且必须是同步的。function increment() { return { type: 'INCREMENT' }};store.dispatc.

当内容即dom tree发生变化时，如何基于Virtual DOM来进行局部刷新渲染，而不是整棵树都重新渲染=>最小程度话的操作dom，而不是推倒重来。一、环境本次的代码实现，用到了ES6，所以需要使用babel，具体如下：package.json：{ "scripts": { "cleanbuild": "rm ./public/vm_bundle.js && babel ./src/index.js --out-file ./public/vm_bun

目前最流行的两大前端框架，React和Vue，都不约而同的借助Virtual DOM技术提高页面的渲染效率。那么，什么是Virtual DOM？它是通过什么方式去提升页面渲染效率的呢？二、Virtual DOM是什么？本质上来说，Virtual DOM只是一个简单的JS对象，并且最少包含tag、props和children三个属性。不同的框架对这三个属性的命名会有点差别，但表达的意思是一致的。它们分别是标签名（tag）、属性（props）和子元素对象（children）。<div&

之前做app内嵌页时，按照机型做了齐刘海适配，到现在iPhone12发布后，发现ios 齐刘海机型很多，所以按照机型适配有点繁琐，统一修改如下。先看一下各个机型以及分辨率：https://www.theiphonewiki.com/wiki/Modelsios中的px转pt根据设备的ppi大概是3:1/2:1/1:1转换：4.7寸6、6s、7、8，状态栏高度为20pt，导航栏高度为44pt. 5.5寸的6p、6sp、7p、8p，状态栏高度为18pt，导航栏高度为44pt. 拥有刘海屏的X

npm的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。(安装node就可以使用了)Package.json 属性说明 name- 包名。 version- 包的版本号。 description- 包的描述。 homepage- 包的官网 url 。 author- 包的作者姓名。 contributors- 包的其他...

流程：输入框获取焦点，软键盘弹起可能遇到问题： 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，且页面 webview 表现不同。 在IOS12 上，微信版本 v6.7.4 及以上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。 在 IOS 上，使用第三方输入法，高度计算存在偏差，导致在有些输入法弹起，将输入框挡住一部分。 在有些浏览器上使用一些操作技巧，还是存在输入框被输入

优秀的react组件库推荐，有其他好用的请来补充1、Ant Design2、Ant Design Mobile3、material-uiReact Material-UI 是一组实现了谷歌 Material Design 设计语言的 React 组件。非常高的 star 数，帅气的 Material 设计规范实现，巨量 issue 和贡献者，明星级的项目。激进地全局使用了 inline 样式，可能会让部分人群不适应。4、react-bootstrapbootstrap3 设计..

SVGA动画介绍SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单！SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注

目前在互联网上，图片流量仍占据较大的一部分。因此，在保证图片质量不变的情况下，节省流量带宽是大家一直需要去解决的问题。传统的图片格式，如 JPEG，PNG，GIF 等格式图片已经没有太多的优化空间。因此 Google 于 2010 年提出了一种新的图片压缩格式 — WebP，给图片的优化提供了新的可能。WebP 在各大互联网公司已经使用得很多了，国外的有 Google（自家的东西肯定要用啦，Chrome Store 甚至已全站使用 WebP）、Facebook 和 ebay，国内的有淘宝、腾讯和美团等。

vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。git地址：https://github.com/Tencent/vConsole演示案例：http://wechatfe.github.io/vconsole/demo.html特性查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies、localStorage 和 SessionStorage 手动执行 JS 命令行 自定义插件使用在html页面中引入，若是多页面

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具，借助于网络，可以在PC上直接调试运行在移动设备上的远程页面。Weinre作为一种远程调试工具，在结构上分为三层：目标页面（target）：被调试的页面，页面已嵌入weinre的远程js，下文会介绍； Debug客户端（client）：本地的Web Inspector调试客户端； Debug服务端（agent）：一个HTTP Server，为目标页面与Debug客户端建立通信。

一、前言打开caniuse首页（https://caniuse.com/)，在最新的特性这里看到一个陌生的东西，一个名为AVIF的图片格式，这么名词有意思，AV？IF？等下，我先系个安全带，可以了，让我开进去看看是个什么东东。结果万里江山一片红：我一瞬间就明白事情不简单，这玩意不得了。开天辟地头一回，还没有任何浏览器支持，就把一个特性放上来的，说明这厮潜力可以，未来之星，大腿务必立刻抱上。于是我就参考相关文档，终于大致搞清楚了AVIF图片格式…………的表面一些支持，对，就表面这点

移动端点击延迟事件1.移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟2.原因: 移动端的双击会缩放导致click判断延迟git地址：https://github.com/ftlabs/fastclick解决方式1. 禁用缩放 `<meta name = "viewport" content="user-scalable=no" > ` 缺点: 网页无法缩放2.更改默认视口宽度 `<meta name="viewp...

body { -webkit-touch-callout: none; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}font-smoothingfont-smoothing是非标准的css渲染规则，由于不同操作系统对字体渲染不同，不同浏览器也有自己对样式的一套解释规则，所以这个css样式至今也没有加入web标...