性能优化
关注
分享
扫一扫
文章平均质量分 51
马优晨
生活中的打击和挫折远比想象的更多，有时灾难又会让你的一切努力白费，也许明天我们就会死去，但如果我们还活着，在面对着种种不公和无奈过后，“明天的明天的明天，你是否会依然爱着这个世界。” 我想我会.......................
展开
-
异常的捕获与处理
一、异常介绍 按键无法点击、元素不展示、页面白屏，这些都是我们前端不想看到的场景。在计算机程序运行的过程中，也总是会出现各种各样的异常。例如：页面元素异常（例如按钮无法点击、元素不展示），页面卡顿，页面白屏。异常虽然不会导致计算机宕机，但是往往会导致用户的操作被阻塞。二、异常分类执行 JS 期间可能会发生的错误有很多类型。每种错误都有对应的错误类型，而当错误发生的时候就会抛出响应的错误对象。ECMA-262 中定义了下列 7 种错误类型：三、异常捕获1 window.onerror原创 2021-02-25 18:24:26 · 431 阅读 · 0 评论 -
一些JS优化小技巧
1. if多条件判断如果if里面包含多个判断条件，可以把判断条件存到一个数组，然后在去这个数组中检索”输入的值“是否满足条件；// 冗余if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {}// 简洁if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}2. if…else…单个if else可以直接使用变量赋值替代，省时省力// 冗余let test: boolean;原创 2021-02-01 14:51:55 · 454 阅读 · 2 评论 -
性能优化之图片懒加载
本文在github做了收录 github.com/Michael-lzg…demo源码地址 github.com/Michael-lzg…为什么要进行图片懒加载我们先来看一下页面启动时加载的图片信息。图片懒加载的原理我们先来看下页面结构 <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> img {转载 2020-12-09 16:14:46 · 1188 阅读 · 0 评论 -
使用require.context实现前端工程自动化
require.context介绍require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块require.context使用场景：在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入(原谅ide的警告-.-),原创 2020-06-28 14:12:56 · 1081 阅读 · 4 评论 -
代码复杂度降级的几个实例
降低代码的圈复杂度我们可以通过一些代码重构手段来降低代码的圈复杂度。（1）抽象配置通过抽象配置将复杂的逻辑判断进行简化。例如下面的代码，根据用户的选择项执行相应的操作，重构后降低了代码复杂度，并且如果之后有新的选项，直接加入配置即可，而不需要再去深入代码逻辑中进行改动：（2）单一职责 -> (提炼函数)函数应该做一件事，做好这件事，只做这一件事。 ————— 代码整洁之道...转载 2019-10-15 10:38:18 · 1615 阅读 · 0 评论 -
H5页面在 ios 端滑动不流畅的问题
body { overflow-x: hidden}XXX{ //滚动的容器 overflow-y: auto}解决办法：给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto原创 2019-07-08 16:05:39 · 1884 阅读 · 1 评论 -
一个简单的if else优化
优化前优化后：原创 2018-12-17 17:39:46 · 1508 阅读 · 0 评论 -
JS的节流、防抖
以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。1.window对象的resize、scroll事件2.拖拽时的mousemove事件3.射击游戏中的mousedown、keydown事件4.文字输入、自动完成的keyup事件函数防抖(debounce)在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。模拟一段a...原创 2018-12-27 10:55:08 · 316 阅读 · 0 评论 -
前端开发几个小技巧
使用 Array.includes 来处理多重条件// 条件语句function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); }}如果我们想要匹配更多的红色水果呢，比方说『樱桃』和『蔓越莓』？我们是不是得用更多的 || 来扩展这条语句？functio...原创 2018-10-10 10:39:12 · 1198 阅读 · 0 评论 -
网站性能优化注意点
网站的性能的指标：白屏时间首屏时间整页时间DNS时间CPU占用率一、网络传输性能优化重定向→拉取缓存→DNS查询→建立TCP链接→发起请求→接收响应→处理HTML元素→元素加载完成。(1)设置浏览器缓存 去除network面板顶部的Disable cache 勾选，查看缓存数据来源（from memory cache 和 from disk cache）...翻译 2018-08-15 14:13:04 · 4586 阅读 · 0 评论