前端笔试题（三）

1.常见的前端性能优化的方式

分五大模块：加载优化，执行优化，渲染优化，脚本优化、代码优化

分五大模块

加载优化

• 减少HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需加载、预加载、压缩图像、减少Cookie、避免重定向、异步加载第三方资源

执行加载

• CSS写在头部，JS写在尾部并异步、避免img、iframe等的src为空、尽量避免重置图像大小、图像尽量避免使用DataURL

渲染加载

• 设置viewport、减少DOM节点、优化动画、优化高频事件、GPU加速

样式优化

• 避免在HTML中书写style、避免CSS表达式、移除CSS空规则、正确使用display：display、不滥用float等

脚本优化

• 减少重绘和回流、缓存DOM选择与计算、缓存.length的值、尽量使用事件代理、尽量使用id选择器、touch事件优化

细分(这里只是细分了几个常用的)

(1)加载优化(减少HTTP请求数)

• 合并和压缩文件：将多个文件合并成一个，并使用工具对代码和资源进行压缩，减小文件大小。

• 使用雪碧图：将多个小图片合并成一个雪碧图，减少图片请求次数

• 预加载和懒加载

(2)图片优化(尽可能使用png的格式)

• 使用适当的图片格式：选择合适的图片格式，如JPEG、PNG、WebP，以减小图片大小。

• 图片懒加载：延迟加载页面中的图片，当用户滚动到图片位置时再加载

(3)使用 CDN（内容分发网络）来托管资源：

• 将静态资源部署到 CDN 上，可以加速资源的加载速度，减轻服务器负担

(4)开启Gzip(代码压缩,压缩页面重要资源)

• 使用 Gzip 或 Brotli 等压缩算法来压缩 HTML、CSS、JavaScript 等重要资源，减小文件大小

(5)减少不必要的cookie

• 只保留必要信息： 移除无关紧要的 cookie 数据。

• 设置合适的过期时间： 对不需要长期保留的信息设置适当的过期时间

(6)脚本优化

• 异步加载脚本： 让不影响首屏的脚本异步加载，提高页面加载速度。

• 推迟脚本执行： 使用 defer 属性推迟脚本的执行，确保 HTML 解析不被阻塞

(7)前端代码结构优化

• 模块化开发： 使用工具如Webpack进行模块化开发，提高代码的可维护性和可扩展性。

• 代码拆分： 将大型应用拆分成小块，按需加载，减小初始加载体积

(8)SEO优化

• 良好的 HTML 结构： 使用语义化的 HTML 标签，帮助搜索引擎理解页面结构。

• 标题和描述优化： 确保每个页面有唯一、描述准确的标题和描述。

• 友好的 URL 结构： 使用简洁而有意义的 URL，包含关键词，以提高搜索引擎收录

(9)异步加载脚本：

• 将不影响首屏渲染的脚本设置为异步加载，以提高页面的初始加载速度。

(10)优化 CSS 和 JavaScript：

• 压缩和合并 CSS 和 JavaScript 文件，减小文件大小。

• 将脚本放在底部：将脚本标签放在页面底部，使页面在加载时不被脚本阻塞。

(11)使用缓存：

• 利用浏览器缓存：通过设置合适的缓存头，使浏览器能够缓存页面资源，减少重复加载。

• 使用 Service Worker：利用 Service Worker 实现离线缓存，提高访问速度。

(12)DNS 预解析：

• 使用 标签进行 DNS 预解析，提前解析域名，加速资源加载。

(13)优化字体加载：

• 选择合适的字体格式和加载方式，避免加载不必要的字体。

• 使用 font-display 属性来控制字体的显示方式。

(14)使用 Webpack 等构建工具：

• 利用构建工具进行代码分割和模块化，减小首屏加载的资源体积。

• Tree-shaking：通过工具消除未使用的代码，减小文件大小。

(15)使用异步加载的字体：

• 避免在页面加载时同步加载字体，可以使用异步加载或使用 font-display: swap 属性。

(16)减小重绘和回流：

• 使用 CSS3 动画代替 JavaScript 动画，以减小对页面性能的影响。

• 使用 transform 和 opacity 属性来触发 GPU 加速,减少页面的重绘和回流

2.ES6有哪些新特性

• const/let

• 解构赋值

• 箭头函数

• 模板字符串

• promise

• async/await

• set/map

• ES6中的类

3.vue双向数据绑定的原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

数据劫持: 当我们访问或设置对象的属性的时候，都会触发Object.defineProperty( )函数来拦截 (劫持)，然后再返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。

发布者-订阅者模式: 其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

4.display：none和visibility：hidden的区别

在过多操作元素是display：none的话，不利于性能优化

• 是否占据空间

  display:none，看不见也摸不到，将元素隐藏，在网页中不占任何位置

  visibility:hidden，看不见但摸得到，就是元素隐藏，在网页中占着位置

• 是否渲染

display:none，会触发reflow（回流），进行渲染。 ​ visibility:hidden，只会触发repaint（重绘），因为没有发现位置变化，不进行渲染。

• 是否是继承属性 display:none，display不是继承属性，元素及其子元素都会消失。

  visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来(这个和display: none有着质的区别)

5.let a=1;let b=2;如何在不声明第三个变量的情况下，让a=2;b=1

1. 第一种解法

   • a=a+b; => a=3

   • b=a-b; => b=1

   • a=a-b; => a=2

2. 第二种解法

   • 利用ES6中的解构赋值：[a,b]=[b,a]