这里记录我搜集的坑和技巧

案例一，移动端普见的300ms延迟带来的各种问题：

1. a标签的href属性与click事件的烦恼 本文讲述的是核心就是当点击浏览器a标签的时候，浏览器的默认机制如下：

   • 1.1 触发a的click事件
   • 1.2 读取href属性的值
   • 1.3 如果是URI则跳转
   • 1.4 如果是javascript代码则执行该代码

2. 用 iOS 在手Q阅读书友交流区发表书评时，光标点击总是不好定位到正确的位置

   • 2.1 额外总结：对于自己发现的奇怪现象，又觉得无法定位的时候，就去对比相同结构的页面，看看他们的页面有没有相同的问题。
   • 2.2 关于fastclick的源码阅读，由于里面有很多的hack，可能阻碍阅读，建议大致知道先跳过。 主流程 touchstart => toutchend => e.preventDefault , dispatchEvent => click。 注意有个preventDefault，他其实是会阻止原生click、mousemove、fouce这样的事件,然后自己触发自定义click事件，这样就避免了300ms延迟。

3. 移动端的touch click事件的理解+点透 总结起来就是:

   • 3.1 当一个用户在点击屏幕的时候，系统会触发touch事件和click事件，touch事件优先处理，touch事件经过 捕获，处理, 冒泡 一系列流程处理完成后， 才回去触发click事件
   • 3.2 当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了.

4. touch click mouse事件

案例二，移动端适配问题：

1. 一篇真正教会你开发移动端页面的文章(一)

   • 1.1 dpr = 实际手机像素／device-width、缩放的原理是缩放css像素、html的width是基于布局视口(document.documentElement.clientWidth)的，所以html的100%的宽度就是基于它来计算的。（布局视口|document.documentElement.clientWidth、视觉视口、理想适口|screen.width).
   • 1.2 关于h5移动端基本知识科普;

2. 一篇真正教会你开发移动端页面的文章(二)

   • 2.1 rem的使用、字体要用媒体查询、以100px的html font-size来设置rem方面计算。

3. 51信用卡移动端适配的参考（3.2）：

   • 3.1 文档一:这个脚本设置了（1）1rem = documentElement.clientWidth / 10。（2）detect 0.5px supports.
   • 3.2 文档二:这篇文章里提到了lib-flexible和px2rem。
   • 3.3 vh vw配合rem

4. 移动端适配的解释

移动端视频自动播放问题

移动端出现[[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See…]

1. 原因
2. 解决方案 如果你用了fastclick这个库，然后出现了类似问题，可以尝试修改源码里的touchstart事件。

性能分析

1. 谷歌调试工具
   • 1.1 网络性能优化 包括issue在内，有一些场景和优化方法，总结起来就是利用好 时间瀑布，看到底在哪一步慢了，然后排除法。

前端各种距离

hybrid

1. 原理
2. 为什么打开中间页可以唤起app
3. 连续5篇hybrid介绍

监控

1. 监控日志发现script error crossorigin
2. 关于1.的引申

打包工具 1.webpack的基本了解

加密技术

css

1. box-shadow()
2. link vs @import 主要关注的是并行加载的问题。貌似除了ie有些小问题，其他问题不大，主要是注意不要在link下来的css文件里又加@import url

html

js

埋点技术

1. 使用 navigator.sendBeacon() 上报数据

seo

缓存方案

1. Last-Modify、ETag、Expires和Cache-Control(转载)

模块加载技术 主要是CJS、ESM

1. CJS、ESM的相互引用
2. How do CommonJS modules work？
   • 2.1原理讲解
   • 2.2源代码
   • 2.3帮助源码理解
   • 2.4帮助源码理解

AST

nodejs

1. module.js: 1.1 看2.1、2.2、2.3

git

canvas和可视化学习

1. 图片到canvas上模糊的解决思路
2. 毛刺

puppeteer相关

1. Time to First Meaningful Paint
2. puppeteer技巧好文

今日学习计划：

1. shell 环境变量

如果有想了解的方面，但是我上面没有提及的，请在issue上留言，我会补充上去。 本周计划：

1. docker学习，镜像制作与安装实践。

todo 关注的人的文章笔记要读一读: https://segmentfault.com/u/sixwinds

• 2.4帮助源码理解笔记
• 2.4帮助源码理解

todolist: https://dev.to/khaosdoctor/node-js-under-the-hood-1-getting-to-know-our-tools-1465 https://myslide.cn/slides/8876