Skip to content

huenchao/questions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

案例一,移动端普见的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-flexiblepx2rem
    • 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

About

每天想到的问题,都放在issue中。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published