- 博客(222)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 Chrome DevTools：Console & Performance 汇总篇
chrome devtools 的console 和 performance 面板使用方法 和 关键路径知识分享及性能优化方法推荐
2024-10-23 09:15:28
1497
原创 Chrome DevTools 三： Performance 性能面板扩展—— 性能优化
HTML的缓存要注意，控制在5分钟以内，或者使用协商缓存。但一定要避免长时间的缓存导致无法更新的情况。针对关键的样式，可以直接写在head部分内，减少请求，是需要权衡HTML的大小，因为HTML通常不会缓存或不会缓存很长时间。preconnect 则可以提前建立连接，在需要获取资源的时候，跳过该步骤。dns-prefetch 的兼容性要比preconnect 的更好，且资源占用更少，所以可以配合使用。需要的资源，被标记的资源优先级会在当前页面调至最低，在浏览器空闲期间进行下载，以便于在下个页面直接从。
2024-10-18 08:29:20
1294
1
原创 Chrome DevTools 二： Performance 性能面板
主要介绍performance在我们日常开发中所起到的作用，以及如何利用performance 面板进行性能分析和相关优化建议。
2024-10-18 08:25:42
1596
原创 小程序基础原理
本文会围绕小程序的基础原理进行介绍。主要包括小程序的基础结构、编译、加载、通讯等几个方面。旨在阅读完毕后可以对小程序有一个基本的印象。
2022-11-18 15:23:33
2027
1
原创 Html2Canvas 常见问题
1. 文字样式丢失且都变成为最小号字体。解决方案： 需要截图的节点根样式添加font-variant: normal；2. 文字向下偏移。解决方案： 指定html2canvas的版本号为1.0.0-alpha.123. 不完整，缺失，留白。出现情况： 当截图区域超过视图高度，且滚动条未处在顶部时，会出现。解决方案： 截图之前控制滚动条至顶部。4. 模糊，不清晰。出现情况： 通常是图片设置为背景的情况下，截图会比较模糊。解决方案： 将背景图通过img标签加定位的方式实现。...
2021-07-28 14:41:18
7193
2
原创 关于Div 高度height: auto 时的计算规则。
自身height>子元素为block且指定了高度>子元素为block时内容的高度>其他其他包括子元素为行内，行内块，自身的line-height(font-size)等。会以line-height，font-size为最小高度，然后谁大取谁。（最后一部分优先级较为麻烦，不便记忆，以实际效果为准。）...
2021-04-01 14:28:05
2942
原创 CSS实验：linear-gradient 详解及实践
文章目录前言一、 介绍示例小结二、场景用法1. 四角边框背景2.读入数据总结前言 本文想要介绍一些linear-gradient的更多实用性比较强的用法，前面有根据CSS揭秘总结的讲线性渐变实现条纹背景的方法。CSS揭秘：5.条纹背景（上）一、 介绍示例 background: linear-gradient(red, yellow, blue); background: linear-gradient(red 0%, yellow 50%, blue 100%); back
2020-11-16 19:01:21
12342
2
原创 音乐API（仅测试使用）
说明2019/12/26 更新获取歌曲播放地址接口 增加 lyric参数代表是否获取歌词。增加获取歌词接口2019/12/24 更新所有音乐接口更改，增加一层music/ ，获取地址改为 music/song增加福利图片接口示例接口更改为https接口仅供交流学习使用github 项目地址因为之前使用网络上别人封装的音乐api现在无法使用，或者一些需要付费使用，当然...
2020-11-12 11:24:17
11367
20
原创 CSS揭秘：6.复杂的背景图案（上）
文章目录前言一、网格1. 网格 First Try总结相关阅读前言上一篇文章中我们学会了如何使用渐变实现条纹状的背景，但是实际上条纹背景并不是我们能实现的唯一的背景图案，利用渐变我们可以实现很多更为复杂的图案，本篇会介绍一些其他的简单而实用的背景图案。提示：以下是本篇文章正文内容，下面案例可供参考一、网格网格的原理其实很简单，目前我们已经实现了条纹背景，那么如果我们将条纹背景组合呢？互相穿插组合，那么是不是很简单就实现了各种各样的网格背景。1. 网格 First Try代码如下：wi
2020-09-21 10:05:03
794
原创 CSS揭秘：5.条纹背景（下）
上篇文章讲述了实现条纹效果所使用的CSS特性并实现了水平和垂直条纹，接下来我们来实现斜向条纹。回忆一下之前的效果水平条纹background: linear-gradient(#fb3 33%, #58a 0, #58a 66%, yellowgreen 0);background-size: 100% 60px;垂直条纹background: linear-gradient(90deg, #fb3 33%, #58a 0, #58a 66%, yellowgreen 0);backgro
2020-07-08 12:23:53
637
1
原创 CSS揭秘：5.条纹背景（上）
条纹背景背景知识：CSS线性渐变，background-sizeCSS线性渐变 background: linear-gradient(red, yellow, blue); background: linear-gradient(red 0%, yellow 50%, blue 100%); background: linear-gradient(to right, red 0%, yellow 50%, blue 100%); background: linear-gradien
2020-07-03 01:04:02
689
原创 JavaScript：leetcode_209. 长度最小的子数组（滑动窗口 + 双指针）
题目说明给定一个含有 n 个正整数的数组和一个正整数 s ，找出该数组中满足其和 ≥ s 的长度最小的连续子数组，并返回其长度。如果不存在符合条件的连续子数组，返回 0。 示例：输入：s = 7, nums = [2,3,1,2,4,3]输出：2解释：子数组 [4,3] 是该条件下的长度最小的连续子数组。 进阶：如果你已经完成了 O(n) 时间复杂度的解法, 请尝试 O(n log n) 时间复杂度的解法。解题思路一第一种方法，比较常规，符合我们的脑回路。遍历数组，求遍
2020-06-29 00:32:16
464
2
原创 JavaScript：leetcode_16. 最接近的三数之和（排序+双指针）
题目说明给定一个包括 n 个整数的数组 nums 和 一个目标值 target。找出 nums 中的三个整数，使得它们的和与 target 最接近。返回这三个数的和。假定每组输入只存在唯一答案。 示例：输入：nums = [-1,2,1,-4], target = 1输出：2解释：与 target 最接近的和是 2 (-1 + 2 + 1 = 2) 。 提示：3 <= nums.length <= 10^3-10^3 <= nums[i] <= 10^3
2020-06-24 16:27:44
332
原创 All of the HTTP/1.1 方法
http/1.1 中可使用的方法，源自《图解HTTP》GET：获取资源用来请求服务器中已被URI识别的资源。经服务器解析后返回相应内容。若请求的是文本即返回文本的内容。类型内容请求GET /index.html HTTP/1.1 Host: www.hackr.jp If-Modified-Since: Mon, Jun 22 2020 23:58:43 GMT响应HTTP/1.1 200 OKDate: Mon, Jun 22 2020 23:58:43 GM.
2020-06-23 10:15:48
300
原创 CSS揭秘：4.边框内圆角
边框内圆角背景知识：box-shadow，outline，“多重边框”一、两个div嵌套两个div实现内圆角很容易，只需要内圆角外直角即可。div First Try.box{ width: 200px; padding: 20px; background-color: #655; }.content{ background-color: tan; border-radius: .8em; paddi
2020-06-19 00:17:15
2919
1
原创 JavaScript：leetcode_1028. 从先序遍历还原二叉树
题目说明我们从二叉树的根节点 root 开始进行深度优先搜索。在遍历中的每个节点处，我们输出 D 条短划线（其中 D 是该节点的深度），然后输出该节点的值。（如果节点的深度为 D，则其直接子节点的深度为 D + 1。根节点的深度为 0）。如果节点只有一个子节点，那么保证该子节点为左子节点。给出遍历输出 S，还原树并返回其根节点 root。 示例 1：输入："1-2--3--4-5--6--7"输出：[1,2,5,3,4,6,7]示例 2：输入："1-2--3---4
2020-06-18 15:48:53
634
原创 CSS揭秘：3.灵活的背景定位
灵活的背景定位背景知识：background-position的扩展语法，background-origin，calc()background-position扩展语法background-position扩展语法： css3 中background-position 语法可以通过在偏移量前指定关键字，来设置四条边的偏移量。background-positon: right 20px bottom 10px;background-originbackground-origin： cs
2020-06-12 00:38:06
308
1
原创 JavaScript：leetcode_739. 每日温度（栈）
题目说明根据每日 气温 列表，请重新生成一个列表，对应位置的输出是需要再等待多久温度才会升高超过该日的天数。如果之后都不会升高，请在该位置用 0 来代替。例如，给定一个列表 temperatures = [73, 74, 75, 71, 69, 72, 76, 73]，你的输出应该是 [1, 1, 4, 2, 1, 1, 0, 0]。提示：气温 列表长度的范围是 [1, 30000]。每个气温的值的均为华氏度，都是在 [30, 100] 范围内的整数。暴力方法就不提了，直接循环判断即可。解
2020-06-11 11:27:28
384
原创 CSS揭秘：2.多重边框
多重边框背景知识：box-shadow的基本用法，outline基本用法/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);以上是box-shadow的基本参数。box-shadow是为元素添加阴影效果的样式。但是我们可以通过对其属性的设置，呈现边框效果。box-shadow 方案First Try将x偏移量 ，y偏移量设置为0px，此时阴影会在元素下面不会超
2020-06-11 00:07:53
578
原创 JavaScript：leetcode_9. 回文数（水题，三种方法）
题目说明判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。示例 1:输入: 121输出: true示例 2:输入: -121输出: false解释: 从左向右读, 为 -121 。 从右向左读, 为 121- 。因此它不是一个回文数。示例 3:输入: 10输出: false解释: 从右向左读, 为 01 。因此它不是一个回文数。进阶:你能不将整数转为字符串来解决这个问题吗？解题思路一（字符串反转）第一反应数字转字符串，然后前
2020-06-10 10:42:50
236
原创 CSS揭秘：1.半透明边框
半透明边框背景知识：RGBA/HSLA 半透明颜色， 它们同样是一种颜色，并非只适用于背景。background-clip 背景裁切属性，定义了背景的延伸范围，是否延伸到边框、内边距盒子、内容盒子，内容文字下面。分别对应border-box，padding-box，content-box，text四个属性值First Try首先我们来尝试一下，假如我们想要实现一个半透明的边框，该如何写样式border: 10px solid hsla(0, 0%, 0%, 0.5);background-c
2020-06-09 23:37:20
905
原创 JavaScript：leetcode_面试题46. 把数字翻译成字符串（斐波那契）
题目说明给定一个数字，我们按照如下规则把它翻译为字符串：0 翻译成 “a” ，1 翻译成 “b”，……，11 翻译成 “l”，……，25 翻译成 “z”。一个数字可能有多个翻译。请编程实现一个函数，用来计算一个数字有多少种不同的翻译方法。 示例 1:输入: 12258输出: 5解释: 12258有5种不同的翻译，分别是"bccfi", "bwfi", "bczi", "mcfi"和"mzi" 提示：0 <= num < 231解题思路一（斐波那契数列）我一般做
2020-06-09 10:49:48
219
原创 JavaScript：leetcode_面试题29. 顺时针打印矩阵（分层 + 递归）
题目说明输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 示例 1：输入：matrix = [[1,2,3],[4,5,6],[7,8,9]]输出：[1,2,3,6,9,8,7,4,5]示例 2：输入：matrix = [[1,2,3,4],[5,6,7,8],[9,10,11,12]]输出：[1,2,3,4,8,12,11,10,9,5,6,7]限制：0 <= matrix.length <= 1000 <= matrix[i].lengt
2020-06-05 10:11:42
242
原创 JavaScript：leetcode_238. 除自身以外数组的乘积（左右乘积列表）
题目说明给你一个长度为 n 的整数数组 nums，其中 n > 1，返回输出数组 output ，其中 output[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。 示例:输入: [1,2,3,4]输出: [24,12,8,6] 提示：题目数据保证数组之中任意元素的全部前缀元素和后缀（甚至是整个数组）的乘积都在 32 位整数范围内。说明: 请不要使用除法，且在 O(n) 时间复杂度内完成此题。解题思路一（左右乘积列表）如果可以用除法，那我们只需
2020-06-04 09:47:19
285
原创 《you dont konw js》一起来明明白白的了解作用域和闭包吧
本文来源于《你不知道的JavaScript》上卷，第一部分：作用域和闭包。有兴趣，有时间的同学，强烈建议直接去看书，书里的知识才是最全面最系统的，本文仅为个人书后总结。一 作用域是什么？变量的存储和查找的这一套规则被称为作用域1.1 编译原理js通常被认为是动态（解释执行）语言，但事实上它也是一门编译语言，但并不是提前编译的。传统语言的编译分为三部分：分词/词法分析（Tokenizing/Lexing）： 将 var a = 2;分解成为、词法单元： var、 a、 =、 2解析/语法分.
2020-06-02 18:28:06
428
原创 JavaScript：leetcode_101. 对称二叉树（递归）
题目说明给定一个二叉树，检查它是否是镜像对称的。 例如，二叉树 [1,2,2,3,4,4,3] 是对称的。 1 / \ 2 2 / \ / \3 4 4 3 但是下面这个 [1,2,2,null,3,null,3] 则不是镜像对称的: 1 / \ 2 2 \ \ 3 3解题思路一递归加判断即可可能判断还是稍麻烦点的，哈哈。左节点，右节点都为null -------------------------
2020-06-01 13:27:44
201
原创 JavaScript：leetcode_1431. 拥有最多糖果的孩子
题目说明给你一个数组 candies 和一个整数 extraCandies ，其中 candies[i] 代表第 i 个孩子拥有的糖果数目。对每一个孩子，检查是否存在一种方案，将额外的 extraCandies 个糖果分配给孩子们之后，此孩子有 最多 的糖果。注意，允许有多个孩子同时拥有 最多 的糖果数目。 示例 1：输入：candies = [2,3,5,1,3], extraCandies = 3输出：[true,true,true,false,true] 解释：孩子 1 有 2
2020-06-01 11:19:42
173
原创 JavaScript：leetcode_198. 打家劫舍（动态规划）
题目说明你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。给定一个代表每个房屋存放金额的非负整数数组，计算你 不触动警报装置的情况下 ，一夜之内能够偷窃到的最高金额。示例 1:输入: [1,2,3,1]输出: 4解释: 偷窃 1 号房屋 (金额 = 1) ，然后偷窃 3 号房屋 (金额 = 3)。 偷窃到的最高金额 = 1 + 3 = 4 。示例
2020-05-29 10:00:13
352
原创 JavaScript：leetcode_974. 和可被 K 整除的子数组（前序和 + 同余定理）
题目说明给定一个整数数组 A，返回其中元素之和可被 K 整除的（连续、非空）子数组的数目。 示例：输入：A = [4,5,0,-2,-3,1], K = 5输出：7解释：有 7 个子数组满足其元素之和可被 K = 5 整除：[4, 5, 0, -2, -3, 1], [5], [5, 0], [5, 0, -2, -3], [0], [0, -2, -3], [-2, -3] 提示：1 <= A.length <= 30000-10000 <= A[i]
2020-05-27 23:35:12
343
原创 JavaScript：leetcode_146. LRU缓存机制（vue的keep-live所使用的缓存机制）
题目说明运用你所掌握的数据结构，设计和实现一个 LRU (最近最少使用) 缓存机制。它应该支持以下操作： 获取数据 get 和 写入数据 put 。获取数据 get(key) - 如果关键字 (key) 存在于缓存中，则获取关键字的值（总是正数），否则返回 -1。写入数据 put(key, value) - 如果关键字已经存在，则变更其数据值；如果关键字不存在，则插入该组「关键字/值」。当缓存容量达到上限时，它应该在写入新数据之前删除最久未使用的数据值，从而为新的数据值留出空间。 进阶:
2020-05-26 12:44:27
304
2
原创 JavaScript：leetcode_287. 寻找重复数（二分法）
题目说明给定一个包含 n + 1 个整数的数组 nums，其数字都在 1 到 n 之间（包括 1 和 n），可知至少存在一个重复的整数。假设只有一个重复的整数，找出这个重复的数。示例 1:输入: [1,3,4,2,2]输出: 2示例 2:输入: [3,1,3,4,2]输出: 3说明：不能更改原数组（假设数组是只读的）。只能使用额外的 O(1) 的空间。时间复杂度小于 O(n2) 。数组中只有一个重复的数字，但它可能不止重复出现一次。解题思路一先放一种前端比较好理解的。
2020-05-26 12:09:08
282
原创 JavaScript：leetcode_105. 从前序与中序遍历序列构造二叉树（前序找根，中序分左右，递归）
题目说明根据一棵树的前序遍历与中序遍历构造二叉树。注意:你可以假设树中没有重复的元素。例如，给出前序遍历 preorder = [3,9,20,15,7]中序遍历 inorder = [9,3,15,20,7]返回如下的二叉树： 3 / \ 9 20 / \ 15 7解题思路一前序找根，中序分左右，递归即可。根为前序第一个值。let root = new TreeNode(preorder[0]);找到根在中序中的位置let roo
2020-05-22 09:59:26
269
原创 JavaScript：leetcode_5. 最长回文子串
题目说明给定一个字符串 s，找到 s 中最长的回文子串。你可以假设 s 的最大长度为 1000。示例 1：输入: "babad"输出: "bab"注意: "aba" 也是一个有效答案。示例 2：输入: "cbbd"输出: "bb"解题思路一遍历字符串，从i开始向左右扩展对比 i--, i++ 是否相同，过程求出最大值。以上仅检测奇数回文即："cbabc"而不能检测cbbc对原字符串进行改造例如"cbbc" => "c#b#b#c"这样就可以以#为中心对比了。（奇数长
2020-05-21 14:58:25
205
原创 JavaScript：leecode_1371. 每个元音包含偶数次的最长子字符串（前缀和）
题目说明给你一个字符串 s ，请你返回满足以下条件的最长子字符串的长度：每个元音字母，即 'a'，'e'，'i'，'o'，'u' ，在子字符串中都恰好出现了偶数次。 示例 1：输入：s = "eleetminicoworoep"输出：13解释：最长子字符串是 "leetminicowor" ，它包含 e，i，o 各 2 个，以及 0 个 a，u 。示例 2：输入：s = "leetcodeisgreat"输出：5解释：最长子字符串是 "leetc" ，其中包含 2 个 e 。示
2020-05-21 11:10:17
261
原创 JavaScript：leetcode_680. 验证回文字符串 Ⅱ（双指针）
题目说明给定一个非空字符串 s，最多删除一个字符。判断是否能成为回文字符串。示例 1:输入: "aba"输出: True示例 2:输入: "abca"输出: True解释: 你可以删除c字符。注意:字符串只包含从 a-z 的小写字母。字符串的最大长度是50000。解题思路一回文字符串，字符串正序反序都一样。同样也是对称的。正反指针，一个从头，一个从末尾，对比。找到不同的位置，去掉该位置的值。（可能为i，也可能为length-1-i）若两种情况中有一种是回文。那就返
2020-05-19 21:07:28
283
原创 JavaScript：leetcode_152. 乘积最大子数组（动态规划）
题目说明给你一个整数数组 nums ，请你找出数组中乘积最大的连续子数组（该子数组中至少包含一个数字），并返回该子数组所对应的乘积。示例 1:输入: [2,3,-2,4]输出: 6解释: 子数组 [2,3] 有最大乘积 6。示例 2:输入: [-2,0,-1]输出: 0解释: 结果不能为 2, 因为 [-2,-1] 不是子数组。解题思路一该题与之前所写的560.和为K的子数组很相似，解法也都是一样的。依旧是对前缀进行操作。不同的是，我们这次不需要保留所有的结果，只需要保留本次
2020-05-18 11:24:22
267
原创 JavaScript：leetcode_210. 课程表 II
题目说明现在你总共有 n 门课需要选，记为 0 到 n-1。在选修某些课程之前需要一些先修课程。 例如，想要学习课程 0 ，你需要先完成课程 1 ，我们用一个匹配来表示他们: [0,1]给定课程总量以及它们的先决条件，返回你为了学完所有课程所安排的学习顺序。可能会有多个正确的顺序，你只要返回一种就可以了。如果不可能完成所有课程，返回一个空数组。示例 1:输入: 2, [[1,0]] 输出: [0,1]解释: 总共有 2 门课程。要学习课程 1，你需要先完成课程 0。因此，正确的课
2020-05-17 13:26:06
312
原创 JavaScript：leetcode_560. 和为K的子数组（前序和）
题目说明给定一个整数数组和一个整数 k，你需要找到该数组中和为 k 的连续的子数组的个数。示例 1 :输入:nums = [1,1,1], k = 2输出: 2 , [1,1] 与 [1,1] 为两种不同的情况。说明 :数组的长度为 [1, 20,000]。数组中元素的范围是 [-1000, 1000] ，且整数 k 的范围是 [-1e7, 1e7]。解题思路一该题可以使用前序和进行计算和为k的个数，也可以用动态规划的思路来理解我们记录该元素之前的所有前缀和。然后利用上一次的
2020-05-15 11:16:31
357
原创 JavaScript：leetcode_136. 只出现一次的数字（异或运算）
题目说明给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。说明：你的算法应该具有线性时间复杂度。 你可以不使用额外空间来实现吗？示例 1:输入: [2,2,1]输出: 1示例 2:输入: [4,1,2,1,2]输出: 4解题思路一主要看一下题目的要求，线性复杂度，不适用额外的空间。这里可以巧妙的使用异或运算符的特性，相同值的异或为0；所有的值，异或0都是本身。数组的所有项向异或之后的结果就是只出现一次的值我使用了re
2020-05-14 11:19:10
297
Dev-Cpp_5.11
2018-05-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人