前端笔试题（三）

最新推荐文章于 2024-07-30 15:24:39 发布

哎亚亚哎亚亚

最新推荐文章于 2024-07-30 15:24:39 发布

阅读量912

点赞数 20

文章标签：前端

本文链接：https://blog.csdn.net/weixin_65459869/article/details/135641966

版权

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 预解析：

使用 <link rel="dns-prefetch"> 标签进行 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有着质的区别)