Open Geekiter opened 6 months ago
代码分割
压缩代码
Tree Shaking
图片优化
使用CDN
缓存优化
懒加载和预加载
使用Webpack插件,使用优化类的webpack插件,如minicssextractplugin提取css,htmlwebpackplugin生成html,bundleanalyzerplugin分析打包文件等
代码分割,将代码拆分微多个小块,按需加载。这样可以减少初始加载时需要下载的资源量,提高页面的加载速度
压缩代码,使用webpack的uglifyjsplugin或terserplugin来压缩js代码,来减少文件大小,加快加载速度。uglifyjs-webpack-plugin、terser-webpack-plugin来压缩js代码,css-minimizer-webpack-plugin来压缩css代码
tree shaking,来消除js中未使用的代码,减少最终打包文件的体积。
图片优化,使用image-webpack-loader或者url-loader来优化图片资源,包括压缩图片、转换为base64格式或按需加载
使用cdn,将静态资源部署到cdn上,加快资源的加载速度,减轻服务器压力
缓存优化,使用webpack的文件名哈希,chunkhash等机制,实现文件名的缓存优化,确保文件更新后能够正确地被浏览器缓存
懒加载和预加载,使用webpack实现懒加载和预加载,根据页面的实际需求来延迟加载某些资源和提前加载可能需要的资源,以提高用户体验和性能。
同上
babel是一个广泛使用的js编译器,将当前或旧版本的js代码转换为向后兼容的js代码,以便在当前或旧版本的浏览器中运行。这是因为它具备以下的特点:
没有,但是了解过。
class MyWebpackPlugin{ constructor(options){ this.options = options; } apply(compiler){ compiler.hooks.emit.tap("MyWebpackPlugin", compilation => { console.log("Webpack is emitting files..."); }) } } // ------ const MyWebpackPlugin = require("./MyWebpackPlugin") module.exports = { plugins: [ new MyWebpackPlugin({ }) ] }
webpack loader机制是webpack提供的一种机制,用于处理项目中各种js模块、css、图片、字体等。通过loader机制,webpack可以将不同类型的文件转换为模块,并且可以在转换过程应用各种转换操作,例如编译、压缩、转译等; 特点:
uglify是一个js代码压缩工具,它的主要原理是通过删除代码中的空白符,注释、简化变量名等方式,从而减小代码体积,提高加载速度。Uglify的原理可以简单概括为词法分析、语法分析和代码压缩三个步骤。
babel是一个广泛使用的js编译器,它主要用于将es2015+的代码转换为向后兼容的js版本,以便在现有环境中运行。babel的主要原理包括词法分析、语法分析、转换和生成代码4个步骤
webpack的插件机制可以监听webpack构建生命周期中的各个钩子,并且可以访问webpack的编译实例以及整个构建过程中的各种资源,从而实现对构建过程的干预和定制化处理。
白屏问题通常是指页面加载时间长,用户看到的是空白的页面,而非期望的内容。以下是一些优化白屏问题的方法:
浏览器为了提升动画的性能,为了在动画的每一帧的过程中不必要每次都重新绘制整个页面。在特定方式下可以触发一个合成层,合成层拥有单独的graphicslayer。 需要进行动画的元素包含在这个合成层下,这样动画的每一帧只需要去重新绘制这个graphicslayer即可,从而达到提升动画性能的目的。 如果我们想尽可能的优化我们的css动画,或者在日常css开发中,尽可能的提升css的性能,这是一个非常重要的概念。通过生成独立的graphicslayer,让此层内的重绘重排不引起整个页面的重绘重排。 这也就是我们常说的,css 3d硬件加速的本质原因。 那么元素什么时候会触发一个graphics layer层?
tress shaking是一种js模块优化技术。
作用是在打包过程中去除未被引用的代码,以减少最终生成的包体积,优化资源利用
原理是基于es6模块的静态结构分析,识别未被引用的代码。
是指前端应用拆分为多个小型、独立的服务单元,每个单元负责特定的功能或页面。
优点是:
CDN,内容分发网络,content delivery network,是一种通过互联网互相连接的电脑网络系统,利用最靠近每位用户的服务器,更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户,来提高性能、可扩展性以及低成本的网络内容传递用户。
用户请求资源,经过CDN的DNS服务器将全局负载均衡设备IP地址返回给用户,用户向缓存IP发起请求,缓存服务器逐级请求上一级缓存服务器,如果最后缓存服务器没有,就会去自己的服务器去获取资源。
懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户智能看到可是窗口的那一部分,这样就浪费了性能。如果在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样网页的加载速度更快,减少了服务器的负担。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lazy Load Images</title> <style> .placeholder { height: 300px; /* 设置一个占位符的高度,以保持页面布局不变 */ } </style> </head> <body>
1.如何⽤ webpack 来优化前端性能?
代码分割
压缩代码
Tree Shaking
图片优化
使用CDN
缓存优化
懒加载和预加载
使用Webpack插件,使用优化类的webpack插件,如minicssextractplugin提取css,htmlwebpackplugin生成html,bundleanalyzerplugin分析打包文件等
代码分割,将代码拆分微多个小块,按需加载。这样可以减少初始加载时需要下载的资源量,提高页面的加载速度
压缩代码,使用webpack的uglifyjsplugin或terserplugin来压缩js代码,来减少文件大小,加快加载速度。uglifyjs-webpack-plugin、terser-webpack-plugin来压缩js代码,css-minimizer-webpack-plugin来压缩css代码
tree shaking,来消除js中未使用的代码,减少最终打包文件的体积。
图片优化,使用image-webpack-loader或者url-loader来优化图片资源,包括压缩图片、转换为base64格式或按需加载
使用cdn,将静态资源部署到cdn上,加快资源的加载速度,减轻服务器压力
缓存优化,使用webpack的文件名哈希,chunkhash等机制,实现文件名的缓存优化,确保文件更新后能够正确地被浏览器缓存
懒加载和预加载,使用webpack实现懒加载和预加载,根据页面的实际需求来延迟加载某些资源和提前加载可能需要的资源,以提高用户体验和性能。
2.如何提⾼ webpack 的打包速度?
3.如何提⾼ webpack 的构建速度?
同上
4.webpack 的构建流程
5. babel 是什么,怎么做到的?
babel是一个广泛使用的js编译器,将当前或旧版本的js代码转换为向后兼容的js代码,以便在当前或旧版本的浏览器中运行。这是因为它具备以下的特点:
6. webpack 热更新的机制原理?
7. 是否有写过 webpack 插件?
没有,但是了解过。
8. 谈下 webpack loader 机制?
webpack loader机制是webpack提供的一种机制,用于处理项目中各种js模块、css、图片、字体等。通过loader机制,webpack可以将不同类型的文件转换为模块,并且可以在转换过程应用各种转换操作,例如编译、压缩、转译等; 特点:
9.uglify 原理?
uglify是一个js代码压缩工具,它的主要原理是通过删除代码中的空白符,注释、简化变量名等方式,从而减小代码体积,提高加载速度。Uglify的原理可以简单概括为词法分析、语法分析和代码压缩三个步骤。
10. babel 原理?
babel是一个广泛使用的js编译器,它主要用于将es2015+的代码转换为向后兼容的js版本,以便在现有环境中运行。babel的主要原理包括词法分析、语法分析、转换和生成代码4个步骤
11. webpack 插件机制?
webpack的插件机制可以监听webpack构建生命周期中的各个钩子,并且可以访问webpack的编译实例以及整个构建过程中的各种资源,从而实现对构建过程的干预和定制化处理。
12. 白屏怎么优化?
白屏问题通常是指页面加载时间长,用户看到的是空白的页面,而非期望的内容。以下是一些优化白屏问题的方法:
13.动画性能?
14. 渲染合成层?
浏览器为了提升动画的性能,为了在动画的每一帧的过程中不必要每次都重新绘制整个页面。在特定方式下可以触发一个合成层,合成层拥有单独的graphicslayer。 需要进行动画的元素包含在这个合成层下,这样动画的每一帧只需要去重新绘制这个graphicslayer即可,从而达到提升动画性能的目的。 如果我们想尽可能的优化我们的css动画,或者在日常css开发中,尽可能的提升css的性能,这是一个非常重要的概念。通过生成独立的graphicslayer,让此层内的重绘重排不引起整个页面的重绘重排。 这也就是我们常说的,css 3d硬件加速的本质原因。 那么元素什么时候会触发一个graphics layer层?
15.tree shaking 是什么,有什么作用,原理是什么?
tress shaking是一种js模块优化技术。
作用是在打包过程中去除未被引用的代码,以减少最终生成的包体积,优化资源利用
原理是基于es6模块的静态结构分析,识别未被引用的代码。
16. 前端微服务?
是指前端应用拆分为多个小型、独立的服务单元,每个单元负责特定的功能或页面。
优点是:
17. CDN 的概念
CDN,内容分发网络,content delivery network,是一种通过互联网互相连接的电脑网络系统,利用最靠近每位用户的服务器,更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户,来提高性能、可扩展性以及低成本的网络内容传递用户。
18.CDN 的作用
19. CDN 的原理
用户请求资源,经过CDN的DNS服务器将全局负载均衡设备IP地址返回给用户,用户向缓存IP发起请求,缓存服务器逐级请求上一级缓存服务器,如果最后缓存服务器没有,就会去自己的服务器去获取资源。
20、CDN 的使用场景
21. 懒加载的概念
懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户智能看到可是窗口的那一部分,这样就浪费了性能。如果在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样网页的加载速度更快,减少了服务器的负担。
22.懒加载的特点
23. 懒加载的实现原理