2023高薪前端面试题（二、前端核心——移动 web 开发）

最新推荐文章于 2023-09-06 13:50:03 发布

iaz999

最新推荐文章于 2023-09-06 13:50:03 发布

阅读量1.2k

点赞数

分类专栏：前端面试题文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/iaz999/article/details/130626468

版权

本文详细探讨了前端开发者在面试中可能会遇到的移动Web开发相关问题，包括PWA（渐进式Web应用）、移动布局策略如盒模型、Flexbox和Grid，以及Rem和Em单位的使用。文章还深入讲解了移动端适配1px边框问题的解决方案，如伪元素结合CSS3缩放，以及动态设置Viewport和REM方式。此外，还讨论了移动端性能优化，如CDN的工作原理和优势，以及如何通过DNS解析、负载均衡和缓存机制提高加载速度。最后，文章提到了移动端的兼容性问题，如iOS和Android设备中的点击事件延迟、输入框在调用输入法时的显示问题，以及如何处理这些问题。

摘要由CSDN通过智能技术生成

• 知道 PWA 吗

参考回答：

PWA 全称 Progressive Web App，即渐进式 WEB 应用。一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能

什么是PWA？

PWA，即Progressive Web App, 是提升Web App的体验的一种新方法，能给用户原生应用的体验。

PWA 不是一项技术，也不是一个新的产物，而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准，可以从安全、性能和体验三个方面，优化我们的Web App。所以其实PWA 本质上依然是个Web App。

PWA中的一些技术

PWA本身其实是一个概念集合，它不是指某一项技术，而是通过一系列的Web技术与Web标准优化Web App的安全、性能和体验。其中涉及到的一些技术概念包括了：

Web App Mainfest
Service Worker
Cache API缓存
Push & Notification 推送与通知
Background Sync 后台同步
响应式涉及
......

• 移动布局方案

传统盒模型布局方式

我们的传统布局方式就是通过盒模型，使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局）。这个大家都比较熟悉，没有掌握的同学再去恶补一下基础

文档流布局

这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行，这个相信大家都比较熟悉了，就不再赘述了

浮动布局

浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。这个大家也比较熟悉，就不再赘述了。

定位布局

我们也可以通过 position 属性来进行定位，这个大家也比较熟悉了，就不再赘述了。

flex 布局

css3 引入的，flex 布局；优点在于其容易上手，根据 flex 规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到 ie9 及以上；

注：当元素设置了弹性布局，子元素的float、clear、vertical-align属性无效

grid 网格布局

disp: grid，注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。

Rem 布局

参考回答：

首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例如:font-size:10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。

优点

可以快速适用移动端布局字体图片高度

缺点

①目前 ie 不支持，对 pc 页面来讲使用次数不多；

②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；

③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。

也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在css 样式之前

• 百分比布局

参考回答：

1、具体分析

除了用 px 结合媒体查询实现响应式布局外，我们也可以通过百分比单位 " % " 来实现响应式的效果。比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。为了了解百分比布局，首先要了解的问题是：css 中的子元素中的百分比（%）到底是谁的百分比？

直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height 百分比相对于 height，width 百分比相对于 width。当然这种理解是正确的，但是根据 css 的盒式模型，除了 height、width 属性外，还具有 padding、border、margin 等等属性。那么这些属性设置成百分比，是根据父元素的那些属性呢？此外还有 border，radius 和 translate 等属性中的百分比，又是相对于什么呢？下面来具体分析。

padding、border、margin 等等属不论是垂直方向还是水平方向，都相对于直接父元 素的 width。

除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身 的。

2、百分比单位布局应用

比如我们要实现一个固定长宽比的长方形，比如要实现一个长宽比为 4:3 的长方形,我们可以根据 padding 属性来实现，因为 padding 不管是垂直方向还是水平方向，百分比单位都相对于父元素的宽度，因此我们可以设置 padding-top 为百分比来实现，长宽自适应的长方形：

.trangle{
    height:0; /*容器高度是由padding来控制，盒模型原理告诉你一切*/
    width:100%;
    padding-top:75%;
}

3、百分比单位缺点

从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：

（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

（2）从小节 1 可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如 width 和 height 相对于父元素的 width 和 height，而 margin、padding 不管垂直还是水平方向都相对比父元素的宽度、border-radius 则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

CSS 常见布局方式 - 掘金

css实现长宽比的几种方案 https://www.cnblogs.com/love314159/articles/9797191.html

• px、em、rem、%、vw、vh、vm 这些单位的区别

绝对长度	px	px就是像素，是无弹性的，不能自适应
	pt	(point)是iOS开发的单位，是屏幕密度无关的单位
	dp	`dp`(density-independent pixels )是google开发的单位
相对长度（相对长度都有一个基准）	em	自适应，参考物不统一，是父元素的字体大小，运算量大
	rem	自适应，参考物统一，是根元素（html）的字体大小兼容性：IE9+
	%	自适应，参考物不统一，有可能是加了定位的父元素，也有可能是自己
	vm	css3新单位，相对于视口的宽度或高度中较小的那个。兼容性较差
	vw	相对于视口的宽度。视口被均分为100单位
	vh	vh相对于视口的高度。视口被均分为100单位

web前端长度单位详解（px、em、rem、%、vw/vh、vmin/vmax、vm、calc()）_前端em单位_落花见流水的博客-CSDN博客

• Rem, Em

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

　　px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

　　em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

rem中的r意思是root（根源），这也就不难理解了。

子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

rem

rem是全部的长度都相对于根元素，根元素是谁？<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

总结：

在做项目的时候用什么单位长度取决于你的需求，我一般是这样的：

像素（px）：用于元素的边框或定位。

em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。

注意：chrome设置的最小字体大小为12px，意思就是说低于12px的字体大小会被默认为12px，这一尬境可以由css3解决

方法一：切图解决
小于12px的字体，如果内容固定，可以将内容切除做图片，没有兼容问题

方法二：-webkit-transform:scale(0.8);

c3的新属性，但是使用这个之后，如果该标签有背景图，那背景图也会被缩放，解决办法：给该标签里包裹一个span标签，设置样式display:block;

方法三：CSS3新属性 -webkit-text-size-adjust: 100%
由于移动端端绝大多数浏览器采用的是Webkit内核，我们只需要设置-webkit-text-size-adjust: 100%;，这样一来就可以在移动端Webkit浏览器中设置任意大小的字了。**但是需要注意的是：-webkit-text-size-adjust:none老版本谷歌，27版本之后无用。