学了一段时间的前端，目前打算重新翻一遍，记录一些容易忘的地方方便记忆，仅此而已

简介Houdini是一个国际逃脱艺术家，通常使用各种玄幻的方式打破观众的想象，收获到各种惊叹。 而在 W3C 中 Houdini 是 W3C 成立的一个任务小组，Houdini 主要的工作任务是把开放的CSS API 提供给开发者，开发者可以在通过在浏览器渲染的各个阶段控制该时间节点的工作内容来实现对CSS进行编程，也意在提供玄幻、充满着各种无限可能的CSS实现方式。 Houdini 主要由Typed OM、Properties/Values、Worklets、Parser API、Paint API、Layout API组成，下面会进行简单的介绍。 Typed OMTyped OM 全称是 Typed Object Model 类型对象模型。他可以给 我们取到的CSS 值添加一些类型、方法和新的对象模型来进一步扩展CSS值的易用性和可读性。 这时候我们取到的CSS的值不再是字符串了，现在我们取到的值是JavaScript里的一个对象，可以更加符合我们JavaScript编程的习惯，我们也可以对 CSS 进行更加合理的操作。 举个栗子。

由于小程序更新迭代速度很快，而且我们的技术栈是 react 全家桶，所以在对比 wepy 和 mpvue 之后，我们选择了直接使用原生小程序。对比图如下： 当然直接使用原生的有个显然的缺点：没有了构建。不过这没有关系，缺什么补上即可。 需要构建做什么 一般来说，我们需要构建主要是用来做这些工作：ES6/7 转 ES5、NPM 包管理、组件化、 CSS 预编译、图片压缩、打包合并等。 而这些能力除了CSS 预编译和图片压缩之外，其他的功能小程序默认已经提供了。所以一个小巧的小程序构建只需要支持CSS 预编译和图片压缩即可。 GULP 构建方案 既然只涉及到一些任务的处理，那么使用 gulp 是最合适不过的了。 对于 CSS 预编译，有 gulp 对应的 sass、less、postcss 插件可选；对于图片压缩，可以使用 gulp 的 imagemini 插件，再装上各种图片的格式对应的压缩库即可。

上个月参与了助力小程序的开发，其中也遇到了一些小程序开发过程之中的问题。 GETMENUBUTTONBOUNDINGCLIENTRECT 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。 如果我们使用的是自定义导航模式（ navigationStyle: 'custom' ），一般则需要通过此函数来获取菜单按钮的信息： 此函数从官方文档上看是同步的，但是经过实际中发现，它可能是异步的。经常有的时候会获取不到相应的 bottom、top 等信息。 VIDEO 组件的全屏问题 经过测试发现，小程序的 video 组件会在进入全屏播放，然后退出全屏的过程中黑屏。

关于WebAssembly ( en [https://webassembly.org/] zh ，将C/C++编译为wasm依赖于emscripten，这里我们需要自行去编译一个Emscripten。

微信小程序为支付提供了一个 API，那就是 wx.requestPayment [https://developers.weixin.qq.com/miniprogram/dev/api/wx.requestPayment.html] 。打眼一看还是比较简单的，就是传入几个参数呗，但是实际要搞定这几个参数还是需要一些流程的。 参数说明 wx.requestPayment 的参数如下： 返回的。而该接口需要提供小程序appid、商户号，用户 openid 等。 然后 paySign 签名涉及到 签名算法

前言 我之前确实对包版本管理这块的知识比较缺失，所以导致我在项目的某次需求当中掉进了很多深坑。这篇文章，希望可以帮助你避开这些包版本管理不善带来的问题。 下面是故事时间： 故事一 我们的项目中使用的是preact，preact-compat的库。某天，小A要做需求，时间比较赶所以想引用一些库进来提升效率，但是由于当前preact-compat太低导致不兼容啊。怎么办？这还用问么？当然是 升级一下preact-compat的版本 啊。 小A开心的就把本地的preact-compat升级了，跑一下本地，很正常嘛，于是就push上了远程愉快的发布了。 发布后不久，产品经理来找小B了，说怎么回事，我们的页面不能用了啊！直接一上来就是遮罩 ，关都关不掉。于是小B赶紧找到发布了需求的小A，问问有没有改到自己的文件。同时也拉取了最新的代码在本地调试。很快就找到了问题 --- 就是由于preact-compat版本升级导致一个JSX-if的库不兼容 。原先需要判断一下if else逻辑的地方，一下子全部失效了。

原文链接： http://www.cun-xu.cn/index.php/2018/12/26/浏览器缓存/ 今天我们来说一下浏览器缓存的问题，缓存可以减少网络IO的消耗，提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。 关于缓存的头部字段包括： CACHE-CONTROL(缓存头) * 每个资源都可通过 cache-control HTTP标头定义其缓存策略 * cache-control 指令控制谁在什么条件下可以缓存响应以及可以缓存多少 可缓存性public ： 即使它有相关联的http身份验证，甚至响应状态代码通常无法缓存，也可以缓存响应。大多数情况下， public 不是必需的，因为明确的缓存信息(例如 max-age )已表示响应是可以缓存的。 private ： 浏览器可以缓存 private 响应。不过，这些响应通常只为单个用户缓存，因此不允许任何中间缓存对其进行缓存。例如，用户的浏览器可以缓存包含私人信息的HTML网页，但CDN却不能进行缓存。

原文地址： http://www.cun-xu.cn/index.php/2018/12/25/重排与重绘/ 在页面的生命周期中，一些效果的交互都有可能发生重排（ Layout ）和重绘（ Painting ），这些都会使我们付出高额的性能代价。 浏览器从下载文件至本地到显示页面是个复杂的过程，这里包含了重绘和重排。通常来说，渲染引擎会解析HTML文档来构建DOM树，与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来，DOM树和CSSOM树关联起来构成渲染树（ RenderTree ），这一过程称为 Attachment 。然后浏览器按照渲染树进行布局（ Layout ），最后一步通过绘制显示出整个页面。 渲染过程 [https://upload-images.jianshu.io/upload_images/8336115-7fd8954aacbecff0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240]

在互联网信息内容主管部门的指导下，为加强帐号管理，自2018年11月16日起，微信小程序及公众号进行注册上限调整。 1、同一个邮箱只能申请1个公众号； 2、同一个手机号码可注册和认证5个公众号； 3、同一身份证注册个人类型公众号数量上限为1个； 4、同一企业、个体工商户、其他组织资料注册公众号数量上限为2个； 5、同一政府、媒体类型可注册和认证50个公众号。 根据微信此前的说法，公司主体已经注册超过2个账号在年审的时候不会受影响，本公告只针对订阅号和服务号，小程序暂时不受影响。 在9个月前微信就曾做过一次公众号注册数量的调整，具体的调整方案为：个人主体注册公众号数量上限由5 个调整为2 个，组织类主体注册公众账号的数量上限由50 个调整为5 个。 当时微信方面表示，这一调整是依据《互联网用户公众账号信息服务管理规定》做出的。该《规定》第七条指出：互联网用户公众账号信息服务提供者应当对同一主体在同一平台注册公众账号的数量合理设定上限。 ---------小程序就用即速应用

这几天一直在看关于HTTP和前端性能优化相关的内容，今天先写一篇关于HTTP的文章，如果时间允许的话再接着把前端性能优化的写完。毕竟还要留着时间去看小片嘛😌 接下来就是正文啦！ 浏览器输入URL后HTTP请求返回的完整过程 就是下图这个啦(这个可是我从某课网偷来的)ＵＲＬ输入到请求返回 [https://upload-images.jianshu.io/upload_images/8336115-1b9897cabaa1797b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240] 从输入地址到页面渲染 从输入地址到页面渲染 [https://upload-images.jianshu.io/upload_images/8336115-42eab94408a5d660.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240] 在HTTP的五层分层中： * 应用层为应用软件提供了很多服务，构建于TCP协议之上，屏蔽网络传输相关细节

相信很多产品都经历了用 web-view 组件就可以嵌入小程序的发展过程。 第一步：安装 npm install -g hap-toolkit 安装 第二步：hap脚手架生成一个初始项目 hap init test1 初始化项目目录 这一步大家别急着 npm run server 否则报一下错误 报错 第三步：安装依赖 npm install 第四步：运行服务 npm run server image.png 还是失败，新出的东西官网还不是很完善，后面应该不会出现，这里花了几分钟找到了原因，项目少了hap-tools库， 这里没看到官网有这个库的介绍，package.json里也没 ap-tools 这个库的引入。 大家输入npm install hap-tools 手动安装下这个库。 安装 然后 npm run server 开发者可以通过命令行终端或者调试服务器主页看到提供* 扫描的二维码 开发者通过快应用调试器扫码安装按钮，扫码安装待调试的rpk文件 开发者点击快应用调试器中的开始调试按钮，开始调试 给大家解释下目录说明 ├── sign rpk包签名模块