中高级前端须注意的40条移动端H5坑位指南 | 网易三年实践

Posted 2022-01-27 程序员成长指北

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了中高级前端须注意的40条移动端H5坑位指南 | 网易三年实践相关的知识，希望对你有一定的参考价值。

position: relative;
width: 200px;
height: 80px;
&::after
position: absolute;
left: 0;
top: 0;
border: 1px solid #f66;
width: 200%;
height: 200%;
content: "";
transform: scale(.5);
transform-origin: left top;

width: 400px;
line-height: 30px;
font-size: 20px;
&.sl-ellipsis
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

&.ml-ellipsis
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

JS方向

禁止点击穿透

移动端浏览器里点击操作会存在300ms延迟，往往会造成点击延迟甚至点击无效，这个是众所周知的事情。

2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。该方案就是上述300ms延迟的主要原因，当用户执行第一次单击后会预留300ms检测用户是否继续执行单击，若是则执行缩放操作，若否则执行点击操作。鉴于该方案的成功，其他移动端浏览器也复制了该方案，现在几乎所有移动端浏览器都配备该功能。而该方案引发的点击延迟被称为「点击穿透」。

在前端领域里最早解决点击穿透是jQuery时代的zepto，估计现在大部分同学都未使用过zepto，其实它就是移动端版本的jquery。zepto封装tap事件能有效地解决点击穿透，通过监听document上的touch事件完成tap事件的模拟，并将tap事件冒泡到document上触发。

在移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟，后续又出现fastclick。该解决方案监听用户是否做了双击操作，可正常使用click事件，而点击穿透就交给fastclick自动判断。更多fastclick原理可自行百度，在此不作过多介绍。

fastclick有现成的NPM包，可直接安装到项目里。引入fastclick可使用click事件代替tap事件，接入方式极其简单。

import Fastclick from "fastclick";

FastClick.attach(document.body);

禁止滑动穿透

移动端浏览器里出现弹窗时，若在屏幕上滑动能触发弹窗底下的内容跟着滚动，这个是众所周知的事情。

首先明确解决滑动穿透需保持哪些交互行为，那就是除了弹窗内容能点击或滚动，其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点，全部解决方案都能禁止<body>的滚动行为却引发其他问题。

弹窗打开后内部内容无法滚动

弹窗关闭后页面滚动位置丢失

Webview能上下滑动露出底色

当打开弹窗时给<body>声明position:fixed;left:0;width:100%并动态声明top。声明position:fixed会导致<body>滚动条消失，此时会发现虽然无滑动穿透，但页面滚动位置早已丢失。通过scrollingElement获取页面当前滚动条偏移量并将其取负值且赋值给top，那么在视觉上就无任何变化。当关闭弹窗时移除position:fixed;left:0;width:100%和动态top。

scrollingElement可兼容地获取scrollTop和scrollHeight等属性，在移动端浏览器里屡试不爽。document.scrollingElement.scrollHeight可完美代替曾经的document.documentElement.scrollHeight || document.body.scrollHeight，一眼看上去就是代码减少了。

该解决方案在视觉上无任何变化，完爆其他解决方案，其实就是一种反向思维和障眼法。该解决方案完美解决固定弹窗和滚动弹窗对<body>全局滚动的影响，当然也可用于局部滚动容器里，因此很值得推广。

body.static 
    position: fixed;
    left: 0;
    width: 100%;

const body = document.body;
const openBtn = document.getElementById("open-btn");
const closeBtn = document.getElementById("close-btn");
openBtn.addEventListener("click", e => 
    e.stopPropagation();
    const scrollTop = document.scrollingElement.scrollTop;
    body.classList.add("static");
    body.style.top = `-$scrollToppx`;
);
closeBtn.addEventListener("click", e => 
    e.stopPropagation();
    body.classList.remove("static");
    body.style.top = "";
);

支持往返刷新

点击移动端浏览器的前进按钮或后退按钮，有时不会自动执行旧页面的JS代码，这与往返缓存有关。这种情况在Safari上特别明显，简单概括就是往返页面无法刷新。

「往返缓存」指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略，以下简称BFCache。该策略具体表现为：当用户前往新页面前将旧页面的DOM状态保存在BFCache里，当用户返回旧页面前将旧页面的DOM状态从BFCache里取出并加载。大部分移动端浏览器都会部署BFCache，可大大节省接口请求的时间和带宽。

了解什么是BFCache再对症下药，解决方案就在window.onunload上做文章。

// 在新页面监听页面销毁事件
window.addEventListener("onunload", () => 
    // 执行旧页面代码
);

若在Vue SPA上使用keep-alive也不能让页面刷新，可将接口请求放到beforeRouteEnter()里。

当然还有另一种解决方案。pageshow事件在每次页面加载时都会触发，无论是首次加载还是再次加载都会触发，这就是它与load事件的区别。pageshow事件暴露的persisted可判断页面是否从BFCache里取出。

window.addEventListener("pageshow", e => e.persisted && location.reload());

若浏览器不使用<meta http-equiv="Cache-Control" content="no-cache">禁用缓存，该解决方案还是很值得一用。

解析有效日期

在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错Invalid Date，但在安卓系统上解析这种日期格式完全无问题。

new Date("2019-03-31 21:30:00"); // Invalid Date

查看Safari相关开发手册发现可用YYYY/MM/DD HH:mm:ss这种日期格式，简单概括就是年月日必须使用/衔接而不能使用-衔接。当然安卓系统也支持该格式，然而接口返回字段的日期格式通常是YYYY-MM-DD HH:mm:ss，那么需替换其中的-为/。

const date = "2019-03-31 21:30:00";
new Date(date.replace(/\\-/g, "/"));

修复高度坍塌

当页面同时出现以下三个条件时，键盘占位会把页面高度压缩一部分。当输入完成键盘占位消失后，页面高度有可能回不到原来高度，产生坍塌导致Webview底色露脸，简单概括就是输入框失焦后页面未回弹。

页面高度过小

输入框在页面底部或视窗中下方

输入框聚焦输入文本

只要保持前后滚动条偏移量一致就不会出现上述问题。在输入框聚焦时获取页面当前滚动条偏移量，在输入框失焦时赋值页面之前获取的滚动条偏移量，这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

const input = document.getElementById("input");
let scrollTop = 0;
input.addEventListener("focus", () => 
    scrollTop = document.scrollingElement.scrollTop;
);
input.addEventListener("blur", () => 
    document.scrollingElement.scrollTo(0, this.scrollTop);
);

修复输入监听

在苹果系统上的输入框输入文本，keyup/keydown/keypress事件可能会无效。当输入框监听keyup事件时，逐个输入英文和数字会有效，但逐个输入中文不会有效，需按回车键才会有效。

此时可用input事件代替输入框的keyup/keydown/keypress事件。

简化回到顶部

曾几何时编写一个返回顶部函数麻烦得要死，需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能，一行核心代码就能搞定。

该函数就是scrollIntoView，它会滚动目标元素的父容器使之对用户可见，简单概括就是相对视窗让容器滚动到目标元素位置。它有三个可选参数能让scrollIntoView滚动起来更优雅。

「behavior」：动画过渡效果，默认auto无，可选smooth平滑

「inline」：水平方向对齐方式，默认nearest就近对齐，可选start顶部对齐、center中间对齐和end底部对齐

「block」：垂直方向对齐方式，默认start顶部对齐，可选center中间对齐、end底部对齐和nearest就近对齐

const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () => document.body.scrollIntoView( behavior: "smooth" ));

当然还可滚动到目标元素位置，只需将document.body修改成目标元素的DOM对象。一行核心代码就能搞掂的事情为何还编写那么多代码去完成，不累吗？

简化懒性加载

与上述「简化回到顶部」一样，编写一个懒性加载函数也同样需scrollTop、定时器和条件判断三者配合才能完成。其实DOM对象里隐藏了一个很好用的函数可完成上述功能，该函数无需监听容器的scroll事件，通过浏览器自身机制完成滚动监听。

该函数就是IntersectionObserver，它提供一种异步观察目标元素及其祖先元素或顶级文档视窗交叉状态的方法。详情可参照MDN文档，在此不作过多介绍。

懒性加载的第一种使用场景：「图片懒加载」。只需确认图片进入可视区域就赋值加载图片，赋值完成还需对图片停止监听。

<img src="pig.jpg">
<!-- 很多<img> -->

const imgs = document.querySelectorAll("img.lazyload");
const observer = new IntersectionObserver(nodes => 
    nodes.forEach(v => 
        if (v.isIntersecting)  // 判断是否进入可视区域
            v.target.src = v.target.dataset.src; // 赋值加载图片
            observer.unobserve(v.target); // 停止监听已加载的图片
        
    );
);
imgs.forEach(v => observer.observe(v));

懒性加载的第二种使用场景：「下拉加载」。在列表最底部部署一个占位元素且该元素无任何高度或实体外观，只需确认占位元素进入可视区域就请求接口加载数据。

<ul>
    <li></li>
    <!-- 很多<li> -->
</ul>
<!-- 也可将#bottom以<li>的形式插入到<ul>内部的最后位置 -->
<div id="bottom"></div>

const bottom = document.getElementById("bottom");
const observer = new IntersectionObserver(nodes => 
    const tgt = nodes[0]; // 反正只有一个
    if (tgt.isIntersecting) 
        console.log("已到底部，请求接口");
        // 执行接口请求代码
    
)
bottom.observe(bottom);

优化扫码识别

通常移动端浏览器都会配备长按二维码图片识别链接的功能，但长按二维码可能无法识别或错误识别。二维码表面看上去是一张图片，可二维码生成方式却五花八门，二维码生成方式有以下三种。

[x] 使用<img>渲染

[x] 使用<svg>渲染

[x] 使用<canvas>渲染

从网易MTL的测试数据得知，大部分移动端浏览器只能识别<img>渲染的二维码，为了让全部移动端浏览器都能识别二维码，那只能使用<img>渲染二维码了。若使用SVG和Canvas的方式生成二维码，那就想方设法把二维码数据转换成Base64再赋值到<img>的src上。

一个页面可能存在多个二维码，若长按二维码只能识别最后一个，那只能控制每个页面只存在一个二维码。

自动播放媒体

常见媒体元素包括音频<audio>和视频<video>，为了让用户得到更好的媒体播放体验与不盲目浪费用户流量，大部分移动端浏览器都明确规定不能自动播放媒体或默认屏蔽autoplay。为了能让媒体在页面加载完成后自动播放，只能显式声明播放。

const audio = document.getElementById("audio");
const video = document.getElementById("video");
audio.play();
video.play();

对于像微信浏览器这样的内置浏览器，还需监听其应用SDK加载完成才能触发上述代码，以保障WebView正常渲染。其他内置浏览器同理，在此不作过多介绍。

document.addEventListener("WeixinJSBridgeReady", () => 
    // 执行上述媒体自动播放代码
);

在苹果系统上明确规定用户交互操作开始后才能播放媒体，未得到用户响应会被Safari自动拦截，因此需监听用户首次触摸操作并触发媒体自动播放，而该监听仅此一次。

document.body.addEventListener("touchstart", () => 
    // 执行上述媒体自动播放代码
,  once: true );

总结

上述坑位按照「HTML方向」、「CSS方向」和「JS方向」三大类型划分，能更高效地区分出每个坑位的使用场景和解决方案，减少混乱记忆。

❤️爱心三连击

1.看到这里了就点个在看支持下吧，你的「点赞，在看」是我创作的动力。
2.关注公众号程序员成长指北，回复「1」加入高级前端交流群！「在这里有好多 前端 开发者，会讨论 前端 Node 知识，互相学习」！
3.也可添加微信【ikoala520】，一起成长。
“在看转发”是最大的支持

超赞！高级前端开发面试指南（附思维导图）

最近面了一个前端开发，4 年经验，应聘的是前端高级开发工程师。

他的简历中提到很多技术点，从 HTML、CSS、JavaScript 再到 Vue.js 和 React 一个都不缺，跨平台PC、移动端、小程序也都经历过，看着像个实战派。

深度聊了聊，发现他对这些技术的了解并没那么深，对很多底层技术和原理都是一知半解，甚至连最基本的 JavaScript 作用域和闭包都说不明。

当问到 Vue CLI 中对 Webpack 的一些基础配置时，他就显得更懵了，他竟然还表达出了这些问题不会影响到他的日常开发工作。唉，他可能认为这些都是架构师这种核心角色才了解的，其实不然，这些早已成为了前端开发工程师能力分水岭的重要技能。

最终面试结果，自然是没通过。

所以说，想快速成为大厂的高薪 offer，你得先清楚大厂要什么人才，我分析了至少 100 家企业对高级前端工程师的需求，帮你总结了一份学习清单，里面包含了 7 个进大厂的必备的技能。

（在文章末尾可以获得高清的学习路线）

这 7 大技能包含的技能点非常丰富，如果你想深入的学习并掌握，我不建议自学，大概率到最后只学到了些皮毛，白白浪费了时间精力。

说到这，我真诚的给你推荐拉勾教育的课程了，大家知道，拉勾深耕招聘领域多年，在“人岗匹配”的过程中，发现很多人才的知识能力体系与企业的用人需求存在偏差。为了解决这个问题，拉勾教育团队历经 12 个月的精心打磨，推出《大前端高薪训练营》。不仅内容对标阿里 P7，更重要的是签订内推涨薪协议，优秀学员还可以每个月内推一次。

毫不夸张的说，这门课程就是为你进大厂的敲门砖！！！

这个课程有 5 个其他机构难以企及的优势：

1、课程设计对标阿里P7，覆盖主流前端技术知识

市面上的培训机构，在课程内容上大多存在这两个问题：