![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端代码优化
Naparte
积跬步以至千里
展开
-
重构改善既有代码的设计 --方法篇
重构改善既有代码的设计 --方法篇重新组织数据目的:解决不易理解的错综复杂的长函数,促使代码更清晰更易维护。解决思路:长函数变成短函数、算法结构优化常用方法:抽离函数(Extract Method),通过查询的方式来获取值 (Replace Temp With query), 优化算法 (Substitute Algorthm)AF老项目中有很多行数过百的函数,导致维护起...原创 2020-02-16 17:58:28 · 223 阅读 · 0 评论 -
重构改善既有代码的设计 --原则篇
重构改善既有代码的设计重构大到模式设计,也小到一个接口函数何时重构三次法则第一次做某件事只管去做,第二次做类似的事情会产生反感,但还是可以做,第三次再做类似的事情就应该重构添加功能时重构代码的设计无法帮助我轻松的添加需要的功能特性。修补错误时重构调试代码修改Bug的过程中发现代码可读性不好,可以用重构来加深理解坏代码的味道重复代码(Duplicat...原创 2020-02-10 14:00:28 · 346 阅读 · 0 评论 -
深入浅出webpack
深入浅出webpack配置含义Entry 配置模块的入口Output 配置如何输出最终想要的代码Module 配置处理模块的规则Resolve 配置寻找模块的规则Plugins 配置扩展插件DevServer 配置 DevServer配置含义Entry配置模块的入口Output配置如何输出最终想要的代码Module配置处理模块的规则...原创 2019-10-26 00:04:28 · 219 阅读 · 0 评论 -
npm命令备忘录
命令含义npm view echarts versions查看npm服务器上所有的echarts版本信息npm view echarts version;查看echarts的最新的版本是哪一个npm info echarts查看echarts所有的版本,但是能查出更多的关于echarts的信息npm ls echarts查看某个项目安装的echarts...原创 2019-10-25 17:00:04 · 162 阅读 · 0 评论 -
前端性能优化(图片篇)
前端性能优化(图片篇)不同业务场景下的图片方案选型JPEG/JPG (有损压缩、体积小、加载快、不支持透明)优点:有损压缩,图片体积压缩至原有体积的 50% 以下时,JPG 仍然可以保持住 60% 的品质。缺点:不支持透明度处理,透明图片需要召唤 PNG 来呈现。使用场景:大的背景图、轮播图或 Banner 图出现。PNG (无损压缩、质量高、体积大、支持透明...原创 2019-02-04 23:33:30 · 392 阅读 · 0 评论 -
前端性能优化(存储篇)
前端性能优化(存储篇)浏览器缓存机制四个方面,优先级依次排列如下:Memory CacheService Worker CacheHTTP CachePush Cache强缓存强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。强缓存中,当请求再次发出时,浏览器会根据其中的 expires 和 cache-control 判断...原创 2019-02-05 09:51:39 · 655 阅读 · 0 评论 -
前端性能优化(渲染篇)
前端性能优化(渲染篇)浏览器的运行机制主要功能模块 (HTML 解释器、CSS 解释器、图层布局计算模块、视图绘制模块与JavaScript 引擎)HTML 解释器:将 HTML 文档经过词法分析输出 DOM 树。CSS 解释器:解析 CSS 文档, 生成样式规则。图层布局计算模块:布局计算每个对象的精确位置和大小。视图绘制模块:进行具体节点的图像绘制,将像素渲染到...原创 2019-02-05 20:39:58 · 2476 阅读 · 0 评论