1、如何做适配h5页面的适配？
视口设置（viewport）
- 在HTML页面的
<head>标签内添加<meta>标签，如<meta name="viewport" content="width=device - width, initial - scale=1.0">。这行代码的意思是让页面宽度等于设备宽度，初始缩放比例为1.0，这样能确保页面在移动设备上正确显示，避免出现页面被压缩或拉伸的情况。
媒体查询（Media Queries）
- 可以根据不同的设备屏幕宽度、高度等条件来应用不同的CSS样式。例如：
/* 当屏幕宽度小于600px时 */
@media (max - width:600px) {
body {
font - size:14px;
}
}
这种方式可以灵活地调整页面布局和样式，比如在小屏幕设备上改变字体大小、隐藏某些元素或者改变元素的排列方式。
百分比布局和弹性布局（Flexbox）
- 百分比布局：将元素的宽度、高度等属性设置为百分比形式，使元素能够根据父元素的大小按比例缩放。比如，一个
元素设置宽度为50%，它就会始终占据父元素宽度的一半，这样在不同屏幕尺寸下能自适应。
- 弹性布局（Flexbox）：通过设置
display:flex 或 display:inline-flex来启用弹性布局。例如：
.container {
display:flex;
justify - content:space - between;
align - items:center;
}
这会让容器内的元素能够灵活地排列，根据空间自动调整间距和对齐方式，在各种屏幕尺寸下保持良好的布局效果。
相对单位
- 使用相对单位如rem、em等。rem是相对于根元素（html元素）字体大小的单位，em是相对于父元素字体大小的单位。比如设置 font - size:1.2rem ，当根元素字体大小改变时，这个元素的字体大小也会按比例变化，方便在不同设备上实现统一的缩放效果。
2、图片懒加载怎么实现
纯JavaScript实现
（1）首先，将所有需要懒加载的图片的 src 属性设置为一个占位符（比如一个很小的默认图片或者一个特定的标识），同时将真实的图片地址存储在 data-src 属性中。
（2） 然后，通过 document.addEventListener('scroll', function() {}) 监听页面滚动事件。在滚动事件的回调函数中，遍历所有需要懒加载的图片，判断图片是否进入可视区域。
（3）可以使用getBoundingClientRect函数来获取图片相对于浏览器视口的位置。如果图片的顶部位置小于浏览器视口的高度，就说明图片进入可视区域，此时将data-src 中的真实图片地址赋值给 src 属性，实现图片加载。例如：
<img src="placeholder.jpg" data-src="real-image.jpg" alt="懒加载图片">
const lazyImages = document.querySelectorAll("img[data-src]");
const loadImage = function (image) {
image.src = image.dataset.src;
};
const handleScroll = function () {
lazyImages.forEach((image) => {
if (image.getBoundingClientRect().top < window.innerHeight) {
loadImage(image); // 加载后移除事件监听，避免重复加载
image.removeEventListener("load", handleScroll);
}
});
};
window.addEventListener("scroll", handleScroll);
使用IntersectionObserver API
（1） IntersectionObserver是一个现代浏览器提供的API，用于异步观察目标元素与祖先元素或顶级文档视窗（viewport）交叉状态。
（2）对于懒加载图片，首先还是将真实图片地址存储在 data-src 属性中，将 src 设置为占位符。
（3）创建一个IntersectionObserver实例，传入一个回调函数，在回调函数中，当观察的图片进入可视区域（交叉比例大于0）时，将 data - src 赋值给 src 来加载图片。例如：
<img src="placeholder.jpg" data-src="real-image.jpg" alt="懒加载图片">
const lazyImages = document.querySelectorAll("img[data-src]");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
const image = entry.target;
image.src = image.dataset.src;
observer.unobserve(image);
}
});
});
lazyImages.forEach((image) => {
observer.observe(image);
});
3、Math.js、BigDecimal.js的理解
Math.js是一个功能强大的JavaScript和Node.js数学库。
它可以进行复杂的数学计算，包括但不限于数值计算、代数运算、微积分等。例如它支持矩阵运算，像创建矩阵、矩阵乘法等操作，这在处理线性代数相关问题时非常有用。同时，它还能处理不同数据类型的数值，包括整数、小数等。
BigDecimal.js主要用于高精度的十进制算术运算。
在JavaScript中，浮点数的精度有时会出现问题，而BigDecimal.js可以避免这种情况。比如在进行货币计算时，需要精确到小数点后几位，BigDecimal.js就能保证计算的准确性，防止出现因为浮点数精度问题导致的金额计算错误。
4、js的浅拷贝和深拷贝的区别
浅拷贝（Shallow Copy）：浅拷贝只复制对象的第一层属性。
深拷贝（Deep Copy）：深拷贝会递归地复制对象及其所有子对象，从而创建一个与原对象完全独立的副本。
简单点来说，比如数据A复制了数据B，当修改数据B时，数据A变了，说明这是浅拷贝，数据A没变，那就是深拷贝。
实现浅拷贝的方法
（1）for···in只循环第一层
（2）Object.assign方法 Object.assign(target)
（3）直接用=赋值
实现深拷贝的方法
（1）采用递归去拷贝所有层级属性
（2）通过JSON对象来实现深拷贝
function deepClone2(obj) {
var _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone;
}
缺点：无法实现对对象中方法的深拷贝，会显示为undefined
（3）通过jQuery的extend方法实现深拷贝
var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝
（4）lodash函数库实现深拷贝
可参考官方文档：https://lodash.com/
// 导入lodash，lodash用下划线接
import _ from 'lodash'
let result = _.cloneDeep(test)
（5）Reflect法
（6）手动实现深拷贝
（7）如果对象的value是基本类型的话，也可以用Object.assign来实现深拷贝，但是要把它赋值给一个空对象 Object.assign({}, target)
（8）用slice、concat实现对数组的深拷贝
// 当数组里面的值是基本数据类型，比如String，Number，Boolean时，属于深拷贝
var arr1 = ["1","2","3"];
var arr2 = arr1.slice(0); var arr2 = arr1.concat();
// 当数组里面的值是引用数据类型，比如Object，Array时，属于浅拷贝
var arr1 = [{a:1},{b:2},{c:3}];
var arr2 = arr1.concat();
（9）使用拓展运算符（…）实现深拷贝
// 当value是基本数据类型，比如String，Number，Boolean时，是可以使用拓展运算符进行深拷贝的
// 当value是引用类型的值，比如Object，Array，引用类型进行深拷贝也只是拷贝了引用地址，所以属于浅拷贝
var obj = { a: "1", b: "2", c: "3" }
var updateObj = { ...obj, b: "5" }
console.log(obj); // {a: "1", b: "2", c: "3"}
console.log(updateObj); // {a: "1", b: "5", c: "3"}
（10）直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。
5、简述如何对网站的文件和资源进行优化?
参考回答：
（1）文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片 （精灵图），可以通过相关工具在线合并，也可以在ps中合并。
（2）使用CDN（内容分发网络）加速，降低通信距离。
（3）缓存的使用，添加Expire/Cache-Control头。
（4）启用Gzip压缩文件
（5）图片预加载，将css放在页面最上面。将script放在页面最下面。
（6）避免在css中使用表达式。
（7）将css, js都放在外部文件中。
（8）减少DNS查询。
（9）文件压缩：最小化css, js，减小文件体积。
（10）避免重定向。
（11）移除重复脚本。
（12）配置实体标签ETag。
（13）使用AJAX缓存，让网站内容分批加载，局部更新。
以上是本次分享全部内容。
非常感谢您阅读本篇博客文章。希望这篇文章能够为您提供有价值的信息，并帮助您解决问题或增长知识。如果您对文章内容有任何问题、建议或反馈。同时，也欢迎您继续关注我的博客，获取更多有趣、实用的内容。
期待与您在下一篇文章再次见面。谢谢！
扫一扫
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
