![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端性能优化
文章平均质量分 75
背太阳的牧羊人
管它什么真理无穷,进一寸有一寸的欢喜。
展开
-
读懂vue源码必懂什么叫运行时和编译时
了解运行时和编译时的相关知识,了解纯运行时、纯编译时以及两者都支持的框架各有什么特点,并总结出Vue.js 3 是一个编译时 + 运行时的框架,它在保持灵活性的基础上,还能够通过编译手段分析用户提供的内容,从而进一步提升更新性能。原创 2022-10-25 17:18:38 · 1781 阅读 · 0 评论 -
虚拟DOM的性能测算
往往在比较虚拟DOM的性能时只是理论上的,这里我们从实际操作上去对比虚拟DOM和innerHTML在更新节点上的差异性。从生成DOM的每个阶段去量化为什么虚拟DOM能够胜出。原创 2022-10-25 15:47:13 · 398 阅读 · 0 评论 -
命令式和声明式相关知识
我们在框架设计上要做出的关于可维护性与性能之间的权衡。在采用声明式提升可维护性的同时,性能就会有一定的损失,而框架设计者要做的就是:在保持可维护性的同时让性能损失最小化。原创 2022-10-24 22:26:13 · 758 阅读 · 0 评论 -
innerHTML和creatElement创建元素的区别
innerHTML与createElement创建dom元素的区别:可以从innerHTML是采用字符串拼接还是数组形式拼接和其结构来说原创 2022-10-24 22:01:18 · 353 阅读 · 0 评论 -
webpack的优化配置(四)——webpack的资源持久化缓存
利用webpack对我们的网络资源进行持久化的缓存,利用缓存可以提高用户度对我们网页再次访问时的体验,加快网页的加载速度。当项目上线时更新部署到服务器,资源的更新是有时间间隔的,也就是有先有后,此时用户去访问我们的资源的话就很容易出现问题。比如用户在这个时间间隔去访问时他那到的可能是最新的HTML,但是相关的资源却没有拿到,那浏览器很可能用的还是缓存的css和js,那用户访问最新的HTML和旧的代码逻辑及样式网站就无法正常访问到,所以管理好缓存很重要,不然很容易出现程序员常说的,这个项目在我电脑上访问挺好原创 2021-03-11 15:11:55 · 354 阅读 · 0 评论 -
webpack的优化配置(三)——webpack的资源压缩
Terser压缩jsmini-css-extract-plugin提取css,比如我们在react中写css,可能会把样式以对象的方式插在结构代码中,这个插件可以帮助把css提取出来到单独的css文件中,将打包后的css和js进行拆分。拆分前没有提取css:拆分后提取css到单独的文件:optimize-css-assets-webpack-plugin压缩css接着对提取的css进行压缩优化HtmlWebpackPlugin-minify压缩HTMLHtmlWebp..原创 2021-03-11 11:52:13 · 382 阅读 · 0 评论 -
webpack的优化配置(二)——webpack代码拆分
对于大型的webpack而言,如果把所有的东西都放在一个文件中打成一个包,这是十分低效的,也是不可接受的。webpack在默认情况下会把所有的文件都打包成一个文件(也就是一个包),代码拆分要做的就是把单个bundle文件拆分成若干个小bundles/chunks,这样可以缩短首屏的加载时间。手动定义多个入口splitChunks提取公有代码,拆分业务代码与第三方库将公有代码,业务代码和第三方库进行拆分是一个更有效的方式,业务代码随着需求的改动会有改动,但是第三方库我们几乎是不改变的,这样进行拆分后原创 2021-03-11 10:32:14 · 983 阅读 · 0 评论 -
webpack的优化配置(一)
webpack通过配置loader和plugin可以帮我们做很多不同的工作,但是比较头疼的是,记住很多的loader和plugin并不方便,所以webpack4之后就引入了新的概念,就是mode模式,通过配置官网约定的两个模式:开发模式和生产模式,这两个模式分别有默认配置好的插件供我们使用,我们不需要再为配置而发愁(convention over configuration也就是约定大于配置),如果模式中有些细微的东西在项目中不太合适,也可以overwrite重写里面的配置,但我们不需要大规模的从头到尾自己原创 2021-03-11 07:10:09 · 344 阅读 · 0 评论 -
前端性能指标和优化目标——高频事件处理函数,防抖
有些事件触发频率非常的高,甚至超过帧的刷新速率,比如pc端的滚动事件,鼠标移动事件,移动端的touch事件,这些事件在一帧内会触发非常多次,会导致我们在一帧内对这些事件进行多次响应, 这些事件的处理函数如果消耗比较高,那在一帧内任务就会比较重,但实际上在一帧内这些任务是没有必要处理多次的,比如滚动我们并不关系中间的过程,我只关心最后滚动到了哪里,之前多出来的那些滚动会造成额外的任务量,如果无法保证一帧在16ms内完成了,没有办法在16ms内完成就会造成页面卡顿,也就是页面抖动。一帧的生命周期(life o原创 2021-03-08 14:40:55 · 552 阅读 · 0 评论 -
前端性能指标和优化目标——复合线程(compositor thread)与图层(layer)
复合是关键渲染路径中的最后一步,浏览器为了提高渲染的效率才有了复合,复合就是把页面拆解成不同的图层(类似Photoshop),当页面发生视觉变化时,可能只是影响了某一个图层其它图层不需要受到影响,此时我们可以把需要变化的元素单独创建一个图层。复合线程主要做了以下几点:将页面拆分多个图层进行绘制再进行复合,默认情况下如何拆分图层是由浏览器决定的,浏览器会根据规则来判断是否将页面拆分成多个图层以及把哪些元素拆分成单独的图层,它主要分析元素相互之间的影响,如果某个元素对其它元素影响非常的多,那这个元素就会被单独原创 2021-03-07 18:08:58 · 961 阅读 · 0 评论 -
前端性能指标和优化目标——布局(layout) 与绘制(paint)
常用的性能测量API利用性能测量工具可以去模拟用户的使用场景进行性能分析和评估。这些有时候还不够,这就需要通过动态的测量,借助web提供的标准的api。web标准API:关键时间节点(Navigation Timing , Resource Timing)网络状态(Network API)客户端服务端协商(HTTP Client Hints)& 网页显示状态(UI API)现代浏览器网页渲染原理,关键渲染路径(critical rendering path),...原创 2021-03-06 16:22:51 · 2203 阅读 · 0 评论 -
前端性能指标和优化目标
profiling就是性能分析的意思在性能评测中往往不要勾选Disabled cache,因为我们也要关系用户第二次访问页面时缓存有没有生效,这些缓存会帮助用户再次访问页面时提高访问的速度。Throttling网络吞吐自定义调整网络状态,模拟用户网络的情况,比如模拟4G,4G下载的速率大概在5M到12M左右,上传的速度大概在2M到5M。加载瀑布图资源首先经过排队才能从浏览器发出去,浏览器会对资源请求进行优先级的安排,它会把高优先级的资源先进行请求;每个资源会有一个域名,这个域名会被转换.原创 2021-03-05 18:05:06 · 577 阅读 · 1 评论