总结
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript
前端资料汇总
复制代码
唤醒原生应用
通过location.href与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，其基本格式为scheme://[path][?query]，笔者曾经发表过《H5与App的通讯方式》讲述URL Scheme的使用。
-
scheme：应用标识，表示应用在系统里的唯一标识
-
path：应用行为，表示应用某个页面或功能
-
query：应用参数，表示应用页面或应用功能所需的条件参数
URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。
若在页面引用第三方原生应用的URL Schema，可通过抓包第三方原生应用获取其URL。
打开微信
打开支付宝
打开支付宝的扫一扫
打开支付宝的蚂蚁森林
复制代码
禁止页面缩放
在智能手机的普及下，很多网站都具备桌面端和移动端两种浏览版本，因此无需双击缩放查看页面。禁止页面缩放可保障移动端浏览器能无遗漏地展现页面所有布局。
复制代码
禁止页面缓存
Cache-Control指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！
复制代码
禁止字母大写
有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。
复制代码
针对Safari配置
贴一些Safari较零散且少用的配置。
复制代码
针对其他浏览器配置
贴一些其他浏览器较零散且少用的配置，主要是常用的QQ浏览器、UC浏览器和360浏览器。从网易MTL的测试数据得知，新版的QQ浏览器和UC浏览器已不支持以下<meta>声明了。
复制代码
让:active有效，让:hover无效
有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。
复制代码
CSS方向
自动适应布局
针对移动端，笔者通常会结合JS依据屏幕宽度与设计图宽度的比例动态声明<html>的font-size，以rem为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。
笔者通常将rem布局比例设置成1rem=100px，即在设计图上100px长度在CSS代码上使用1rem表示。
function AutoResponse(width = 750) {
const target = document.documentElement;
if (target.clientWidth >= 600) {
target.style.fontSize = “80px”;
} else {
target.style.fontSize = target.clientWidth / width * 100 + “px”;
}
}
AutoResponse();
window.addEventListener(“resize”, () => AutoResponse());
复制代码
当然还可依据屏幕宽度与设计图宽度的比例使用calc()动态声明<html>的font-size，这样就能节省上述代码。不对，是完全代替上述代码。
html {
font-size: calc(100vw / 7.5);
}
复制代码
若以iPad Pro分辨率1024px为移动端和桌面端的断点，还可结合媒体查询做断点处理。1024px以下使用rem布局，否则不使用rem布局。
@media screen and (max-width: 1024px) {
html {
font-size: calc(100vw / 7.5);
}
}
复制代码
自动适应背景
使用rem布局声明一个元素背景，多数情况会将background-size声明为cover。可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙。
此时将background-size声明为100% 100%，跟随width和height的变化而变化。反正width和height都是量好的实际尺寸。
.elem {
width: 1rem;
height: 1rem;
background: url(“pig.jpg”) no-repeat center/100% 100%;
}
复制代码
监听屏幕旋转
你还在使用JS判断横屏竖屏调整样式吗？那就真的Out了。
/* 横屏 */
@media all and (orientation: landscape) {
/* 自定义样式 */
}
/* 竖屏 */
@media all and (orientation: portrait) {
/* 自定义样式 */
}
复制代码
支持弹性滚动
在苹果系统上非<body>元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度。
body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}
复制代码
禁止滚动传播
与桌面端浏览器不一样，移动端浏览器有一个奇怪行为。当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域，造成该区域也滚动起来。这种行为称为滚动传播。
若不想产生这种奇怪行为可直接禁止。
.elem {
overscroll-behavior: contain;
}
复制代码
禁止屏幕抖动
对于一些突然出现滚动条的页面，可能会产生左右抖动的不良影响。在一个滚动容器里，打开弹窗就隐藏滚动条，关闭弹窗就显示滚动条，来回操作会让屏幕抖动起来。提前声明滚动容器的padding-right为滚动条宽度，就能有效消除这个不良影响。
每个移动端浏览器的滚动条宽度都有可能不一致，甚至不一定占位置，通过以下方式能间接计算出滚动条的宽度。100vw为视窗宽度，100%为滚动容器内容宽度，相减就是滚动条宽度，妥妥的动态计算。
body {
padding-right: calc(100vw - 100%);
}
复制代码
禁止长按操作
有时不想用户长按元素呼出菜单进行点链接、打电话、发邮件、保存图片或扫描二维码等操作，声明touch-callout:none禁止用户长按操作。
有时不想用户复制粘贴盗文案，声明user-select:none禁止用户长按操作和选择复制。
- {
/* pointer-events: none; / / 微信浏览器还需附加该属性才有效 */
user-select: none; /* 禁止长按选择文字 */
-webkit-touch-callout: none;
}
复制代码
但声明user-select:none会让<input>和<textarea>无法输入文本，可对其声明user-select:auto排除在外。
input,
textarea {
user-select: auto;
}
复制代码
禁止字体调整
旋转屏幕可能会改变字体大小，声明text-size-adjust:100%让字体大小保持不变。
- {
text-size-adjust: 100%;
}
复制代码
禁止高亮显示
触摸元素会出现半透明灰色遮罩，不想要！
- {
-webkit-tap-highlight-color: transparent;
}
复制代码
禁止动画闪屏
在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了。
.elem {
perspective: 1000;
backface-visibility: hidden;
transform-style: preserve-3d;
}
复制代码
美化表单外观
表单元素样式太丑希望自定义，appearance:none来帮你。
button,
input,
select,
textarea {
appearance: none;
/* 自定义样式 */
}
复制代码
美化滚动占位
滚动条样式太丑希望自定义，::-webkit-scrollbar-*来帮你。记住以下三个关键词就能随机应变了。
-
::-webkit-scrollbar：滚动条整体部分
-
::-webkit-scrollbar-track：滚动条轨道部分
-
::-webkit-scrollbar-thumb：滚动条滑块部分
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-image: linear-gradient(135deg, #09f, #3c9);
}
复制代码
美化输入占位
输入框占位文本太丑，::-webkit-input-placeholder来帮你。
input::-webkit-input-placeholder {
color: #66f;
}
复制代码
对齐输入占位
有强迫症的同学总会觉得输入框文本位置整体偏上，感觉未居中心里就痒痒的。桌面端浏览器里声明line-height等于height就能解决，但移动端浏览器里还是未能解决，需将line-height声明为normal才行。
input {
line-height: normal;
}
复制代码
对齐下拉选项
下拉框选项默认向左对齐，是时候改改向右对齐了。
select option {
direction: rtl;
}
复制代码
修复点击无效
在苹果系统上有些情况下非可点击元素监听click事件可能会无效，针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。
.elem {
cursor: pointer;
}
复制代码
识别文本换行
多数情况会使用JS换行文本，那就真的Out了。若接口返回字段包含\n或<br>，千万别替换掉，可声明white-space:pre-line交由浏览器做断行处理。
- {
white-space: pre-line;
}
复制代码
开启硬件加速
想动画更流畅吗，开启GPU硬件加速呗！
.elem {
transform: translate3d(0, 0, 0);
/* transform: translateZ(0); */
}
复制代码
描绘像素边框
万年话题，如何描绘一像素边框？
.elem {
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;
}
}
复制代码
控制溢出文本
万年话题，如何控制文本做单行溢出和多行溢出？
.elem {
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上触发。
总结一下
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
