Skip to content

Latest commit

 

History

History
123 lines (90 loc) · 7.29 KB

README.md

File metadata and controls

123 lines (90 loc) · 7.29 KB
Raw

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

案例一，移动端普见的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？

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

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