前端科举八股文-性能优化篇

星海拾遗 2024-07-08 17:33:02 阅读 76

前端科举八股文-性能优化篇

常见的前端性能优化方案?css精灵图的原理?说说懒加载的原理什么是防抖节流?什么是重绘和重排,如何减少重绘和重排如何减少重排?webpack是干什么的?简历上写到你使用了vite,讲讲它和webpack的区别?webpack的核心配置是什么?有开发过loader吗? 他的本质是什么?常用的loader?为什么plugins可以执行更高级的任务,loader不可以呢?webpack可以进行哪些优化

常见的前端性能优化方案?

前端性能优化方案可以从几个方向去切入,

第一点是从请求方面去优化。可以使用css精灵图或者懒加载来减少http的请求数。可以使用cdn分发网络加快请求效率。

第二点是从代码层面去优化,比如将css写在页面顶部,使资源优先加载,将js写在页面底部,使js执行不阻塞页面的渲染。使用防抖节流等技巧去优化代码的执行效率。尽量避免浏览器的重绘与重排。

第三点是从缓存方向去优化,浏览器向服务器端请求资源是十分耗时的,可以将一些不常变化的资源通过http的缓存协议缓存到本地。使得浏览器直接从本地缓存中读取资源,提高效率。

第四点可以通过一些第三方打包工具,比如webpack,可以使用webpack的插件完成线上代码压缩功能、tree-shaking、图片压缩等进一步压缩线上代码体积。

css精灵图的原理?

精灵图的原理就是把多张图片压缩成一张图片,这种优化方案并不能减少需要传输的数据体积。比如一个网站需要多张图片资源,精灵图可以把多张图片资源合并成一张之后,通过css的定位属性精准的定位到所需要使用的图片坐标来使用。

说说懒加载的原理

懒加载就是在页面渲染时避免加载一些不必要的资源。所谓的不必要的资源就是比如一个官网首页,用户进入到这个页面时能看到的范围肯定时有限的。所以在视口之外的,也就是说需要滚动才能看到的一些图片资源实际上是不需要加载的。可以等到这些资源进入到用户视口区域内再去加载。可以通过getBoundingClientRect这个js方法去判断。

什么是防抖节流?

防抖节流是通过js的优化手段去减少一些高频次触发的事件。比如移动端常见的场景是下拉获取最新的内容。如果不加以限制,在滚动过程中可能会触发上百次的请求。防抖就是把高频触发的事件合并成一次。节流就是将高频触发的场景优化成低频触发。(具体实现方法放在前端科举八股文-手撕代码篇)

什么是重绘和重排,如何减少重绘和重排

浏览器从绘制页面到呈现会生成两棵树,一个css树一个dom树,然后把两个合并生成渲染树之后再挂载到页面上。然后在页面更新时,如果更新时需要重新绘制css树和dom树的叫做重排,不需要重新绘制只需要重新渲染的叫做重绘。比如页面的首次渲染,修改字体,修改背景颜色,边框颜色就只会引发重绘。但是修改元素大小引发网页整体结构发生变化的,就叫做重排。重排的开销是很大的,所以要尽量避免重排。

如何减少重排?

1、如果需要频繁操作dom的场景可以使用文档碎片来合并批量操作,一次性去操作dom。

2、将一些频繁变化的元素,比如动画元素设置脱离文档流使它不会影响到其他dom元素的布局,进而减少重排。

3、在可能改变页面布局的场景下使用防抖节流(比如resize)

webpack是干什么的?

简单来说,webpack就是帮助浏览器去识别它默认情况下不能识别的语法。因为浏览器是只认识JS语法的。那么如果我们在js中如引用图片,引用css资源,就要借助webpack的帮助来实现这些功能。webpack可以使用css-loader,vue-loader去处理css资源,vue文件。使这些文件也能正常的被浏览器识别并使用

简历上写到你使用了vite,讲讲它和webpack的区别?

首先vite将项目代码分为源码和依赖两部分,vite在处理依赖部分使用的是go语言,由于语言优势,go语言先天就会比webpack快上10-100倍。

其次在项目启动时,由于现代浏览器都支持ES6的模块化语法了。所以现代浏览器都是先直接启动开发服务器,然后根据打开的页面去动态的请求页面资源。而webpack会从打包入口开始,把整个项目打包之后再去启动开发服务器。所以项目越大 vite的优势会越明显。

webpack的核心配置是什么?

1、入口 entry 表示需要从哪个文件开始去打包整个项目

2、output 表示打包成功之后的输出文件夹

3、loader 表示文件的处理器

4、plugins 插件、可以完成loader不能完成的一些更高级更复杂的功能

5、mode 打包模式 如果是生产模式的话会自动开启代码压缩功能

有开发过loader吗? 他的本质是什么?

开发过demo,loader的本质其实就是函数,在loader匹配文件时会将文件作为参数传入到函数中,然后在loader中处理最后返回

常用的loader?

css-loader style-loader sass-loader vue-loader image-loader 等等

为什么plugins可以执行更高级的任务,loader不可以呢?

因为loader的本质就是简单的函数,处理能力有限,而webpack在每一次打包编译的过程中都会产生一个complier对象,这个对象可以访问到整个编译生命周期暴露出来的hooks,可以通过这些暴露出来的api来执行更加广泛、更加高级的功能。

webpack可以进行哪些优化

1、对webpack的loader属性加上includes和exclude来加快执行效率

2、生产模式下webpack会默认开启对代码的压缩

3、通过tree-shaking来去除代码中无用的部分,进一步减少代码体积

4、使用code-split结合vue的动态路由实现路由的懒加载

5、通过webpack的插件实现preload,prefetch等预加载功能

6、使用oneOf关键字来提升loader的匹配效率。



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。