- 博客(87)
- 收藏
- 关注
RSS订阅原创 一文讲透HTTP缓存之ETag
无论是前端、后端或者运维同学，在平时的开发工作中，都会和HTTP缓存打交道，大家或多或少都了解HTTP缓存中的ETag字段，它是资源的特定版本的标识符，可以让缓存更高效，并节省带宽。本文系统性的阐述了ETag的起源、生成原理及使用。看完本文后，对于不了解ETag的同学能够知道ETag的来龙去脉，并能马上上手使用；对于熟悉ETag的同学也能做到温故而知新。ETag定义及起源ETag（Entity-Tag，下文简称：ETag）是万维网协议HTTP的一部分，它是 HTTP 为Web 缓存验证提供的多种机..
2022-03-23 20:59:07
12965
1
原创 前端H5 video视频在360浏览器、微信内置浏览器层级提升（太高）问题
我们在对页面进行浏览器兼容性测试的时候会发现页面中的视频在部分浏览器中（QQ浏览器、360浏览器、搜狗浏览器等）会被提升，这属于浏览器自身优化行为，无法通过CSS的z-index属性改变其层级关系。目前找到了360浏览器、微信内置浏览器的解决方案：<video controls360=no // 360浏览器 webkit-playsinline playsinline x5-playsinline // 针对腾讯
2021-09-06 13:08:02
791
原创 Nuxt 使用路由守卫为URL添加默认query查询参数
使用Nuxt进行页面跳转的时候会更新URL，此时会发现携带的参数丢失了，但是我们又想在跳转任意路由的时候都携带默认统一的参数，目前想到以下两个实现方案：跳转时手动添加（this.$router.push({name: ‘home’, query: { id: 1 }})）【麻烦且扩展性不好】利用router路由守卫自动添加，（基于plugins特性）// ~/plugins/router.jsexport default ({ app }) => { app.router.beforeE
2021-05-20 11:30:24
1360
原创 修改element select 选中的 span 宽度和样式
题目描述的是以下样式：有时候选中的值名字会很长，导致span宽度超过了下拉框，看起来很丑第一种方法呢就是改变下拉框的宽度，但是，如果对下拉框宽度有限制，只能改变span标签的宽度。这里介绍的是后者<style lang="less" scoped>// container ：下拉框父类class.container /deep/ .el-select__tags { .el-tag:nth-child(1) { width: 110px; paddi
2021-04-14 16:50:00
1318
原创 元素增加animation后，绝对定位居中失效解决办法
以下是绝对定位的垂直居中代码，但是加上animation后发现元素居然不居中了。（这里实现的是 loading 动画，可以放到 run 上看看效果）.container{ width: 400px; height: 400px; background: #eee; position: relative;}.center{ background: blue; position:absolute; top: 50%; left: 50%; transform: tran
2020-09-02 18:56:45
1794
原创 210小时
这两天有点厌学，只学习了以下内容：学习如何发布npm包又重新学习如何写一个webpack插件（使用新hooks）学习Vue项目优化学习node基础
2020-09-01 21:57:18
153
原创 170小时
昨日学习内容如下：学习如何从webpack打包层面优化项目，重点看了DllPlugin和SplitChunks插件，它俩都是提取公共内容，但是原理不太一样（dll属于在编译阶段就把内容提取出来，配合DllReferencePlugin插件动态引入；split属于打包后提取），不推荐同时使用。如果想对生成环境（webpack4+如果是生产环境，自动配置terser插件）的js进行压缩，推荐使用TerserWebpackPlugin或UglifyjsWebpackPlugin，它俩不同点是terser支持E
2020-08-26 09:58:49
173
原创 160小时
昨天好像学了不少东西，可是回过头来看，好像又啥也没学，还是记录一下吧：如何编写一个插件Vue项目基本优化回顾图片懒加载原理，IntersectionObserver兼容性不是很好，并且存在可能算不准的情况（不知道修复没），建议慎用...
2020-08-25 09:42:28
165
原创 150小时
最近两天因为有事就没有更新状态，这两天学习内容如下：前端骨架屏方案（饿了么方案），该文是罗冉在第三届前端千人峰会上的分享演讲稿，个人觉得帮助很大。看了阮一峰老师的《黑客与画家》一书最近想深入学习一下如何写好前端组件，大家有不错的文章或者书籍麻烦推荐推荐，感谢(〃‘▽’〃)...
2020-08-23 01:09:29
120
原创 130小时
昨日学习内容如下：getComputedStyle() API动态获取元素的属性// 语法let style = window.getComputedStyle(element, null);// 动态获取元素CSS属性window.getComputedStyle(document.getElementsByClassName('header')[0], null).getPropertyValue('font-size') // 16pxcss属性名最好使用 kab-case，如 :
2020-08-20 10:27:29
145
原创 web前端布局方式总结
本文主要介绍了前端布局方案的实现以及存在的问题，涉及到的布局方案包括：流体布局float布局table布局定位布局flex布局响应式布局grid布局前端布局从最开始的：Table布局 => DIV+CSS布局 => Flex布局 => Grid布局 经历了以上一系列变化，这些变化伴随着前端技术的发展和程序猿对布局方案便利性的追求，最终的结果就是让我们的网页设计变得越来越方便、快捷、高效，我们看到的网页也越来越多样化和人性化。互联网从诞生到至今也就二十年的时光，因此，让我
2020-08-16 23:31:25
2009
原创 vue style样式中scoped无效解决方案
如果你使用的是import方法导入样式后无效，解决方案如下：// 第一种（最快捷）将<style scoped> @import './index.css';</style>换成<style src="./index.css" scoped></style>// 第二种，如果你使用的是webpack打包工具，在webpack.config.js里配置postcss-loader，这里需要安装autoprefixer，postcss-impor
2020-08-15 10:19:01
10794
1
原创 80小时
今日学习内容如下：《JavaScript 20 年史》中文版 (3) 改革失败flex-grow和flex-shrink的详细计算方式最强大的 CSS 布局 —— Grid 布局Grid 网格布局教程
2020-08-12 22:14:39
138
原创 史上最全垂直居中方法(almost)总结
// HTML 结构<div class="container"> <div class="center"></div></div>// table法.container { width: 600px; height: 600px; background: #eee; display: table-cell; text-align: center; vertical-align: middle;}.center {
2020-08-07 23:26:23
327
原创 39小时
今日学习内容如下：看完了张鑫旭作者的《CSS世界》一书，整理了部分内容，明天将垂直居中的内容分享出来，尽量囊括所有的方法，无论是平时工作还是面试都可以用到。
2020-08-06 23:20:44
94
原创 20小时
今天的学习内容如下：看公司项目代码、完成任务学习CSS布局方法（浮动布局、flex布局、position布局，近期将会对此进行总结，先占坑）学习计算机操作系统第二章-进程管理
2020-08-04 23:25:11
89
原创 10小时
今天的学习内容如下：看了计算机操作系统第一章内容学习快应用开发中的图片、背景图片内容（工作需要）了解了H5 手机 App 开发入门HTTP Referer 教程
2020-08-03 23:36:27
158
原创 前端工程师的自我修养
为什么写这篇文章首先自我介绍一下：我叫薛小科，2020年毕业于吉林大学，本科专业是电路系统，研究生学的是材料相关专业。以上是我的个人基本信息，从信息中你应该可以看出我并没有任何计算机相关的背景。但毕业找工作的时候找了前端开发岗位，现在也刚入职一个月（会HTML、CSS、JavaScript、Vue基础），想写这篇文章的契机是因为今天看了阮一峰老师的未来世界的幸存者一书，里面有提到有个叫 Dan McLaughlin 的人为了验证一万小时定律从零开始训练自己，虽然他由于背伤和难以取得突破，Dan 在201.
2020-08-02 22:51:20
149
原创 JavaScript 中 trim() 方法原理及简单实现
ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。我们用函数的形式来实现以上方法：/**str:传入的字符串direct:表示具体从哪边trim*/function trim(str, direct...
2020-03-07 16:52:40
1531
原创 git 提交时忽略某些文件或者目录
git 提交时如果想忽略某些文件或者目录：1.在根目录下创建 .gitignore 文件2.在该文件中直接添加内容，如：#忽略.mdb、.sln、.sln,.config 文件，不忽视 .txt 文件*.mdb*.ldb*.sln.config!.txt#忽略Debug目录及文件，忽视obj目录Debugobj/...
2020-03-03 20:26:08
789
原创 npm 安装 css-loader 时出错
npm ERR! cb() never called!npm ERR! This is an error with npm itself. Please report this error at:npm ERR! https://npm.communitynpm ERR! A complete log of this run can be found in:安装css-loader...
2020-03-03 20:19:37
1423
原创 HTML中不支持冒泡的事件
UI事件loadunloadresizeaborterror焦点事件blurfocus鼠标事件mouseleavemouseenter有一个比较特殊：scroll 事件：element的scroll事件不冒泡, 但是document的defaultView的scroll事件冒泡参考：W3C MDN...
2019-09-05 16:33:51
706
原创 一次搞懂 CSS3 animation动画中forwards和both的区别
平时会用 animation 实现动画效果，之前一直没有留意 animation-fill-mode 中 forwards 和 both 动画的区别，今天自己动手实现了一下，终于搞懂了。animation-fill-mode 属性可以接受 none | forwards | backwards | both 四个值中的一个，接下来分别简单介绍一下每个值的效果。mode效果n...
2019-09-05 10:22:44
17914
5
原创 彻底搞懂负载均衡的原理及其常见方法
负载均衡（百度百科）定义：负载均衡（Load Balance）建立在现有网络结构之上，它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。（一脸懵逼的进来又一脸懵逼的出去）以下是我查阅相关内容后的总结和理解：1. 负载均衡的由来了解计算机网网络的同学（不了解也没关系）都知道我们客户端和服务端通信（发送请求和接收相应）的时候，服...
2019-07-21 17:32:54
1385
原创 算法之深度优先搜素（DFS）和广度优先搜素（BFS）
深度优先搜素（DFS）：如果当前节点有孩子，遍历当前孩子再遍历依次兄弟节点的孩子。<div class="root"> <div class="items"> <ol> <li class="list-item">a</li> </ol> <div class="item"> <s...
2019-07-05 14:04:04
316
原创 算法之输入一个整数数组，判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则输出true,否则输出false。假设输入的数组的任意两个数字都互不相同。
function VerifySquenceOfBST(sequence){ // write code here /* 已知条件：后序序列最后一个值为root；二叉搜索树左子树值都比root小，右子树值都比root大。 1、确定root； 2、遍历序列（除去root结点），找到第一个大于root的位置，则该位置左边为左子树，右边为右子树； 3、遍...
2019-07-04 22:11:58
272
原创 算法之从上往下打印出二叉树的每个节点，同层节点从左至右打印。
例如：输入：[8, 6, 10, 5, 6, 9, 11]思路这是树的层次遍历。可以使用两个辅助数组模拟队列来缓存树的结构，首先判断根节点，然后是左右子树，如果存在依次压入队列，对队列中的树依次循环判断。依次从队列中取出一个元素 push 到输出的数组中。/* function TreeNode(x) { this.val = x; this.left = null; ...
2019-07-04 21:26:52
249
原创 算法之输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否可能为该栈的弹出顺序。
输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否可能为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列1,2,3,4,5是某栈的压入顺序，序列4,5,3,2,1是该压栈序列对应的一个弹出序列，但4,3,5,1,2就不可能是该压栈序列的弹出序列。（注意：这两个序列的长度是相等的）思路需要用到一个辅助栈来遍历压栈顺序，一个指数来记录弹出栈的位置，依次将数字压入栈，看压入的数...
2019-07-04 21:06:09
1634
1
原创 JavaScript之 sort 排序总结
sort() 方法是在对原数组的基础上进行排序，不生成副本。默认排序顺序是根据字符串Unicode码点进行排序，也就是说对数组排序时会根据数字出现的顺序而不是大小进行排序。MDNvar months = ['March', 'Jan', 'Feb', 'Dec'];months.sort();console.log(months);// expected output: Array ["D...
2019-07-04 18:04:24
333
原创 算法之定义栈的数据结构，请在该类型中实现一个能够得到栈中所含最小元素的min函数（时间复杂度应为O（1））
var stack = [];function push(node){ // write code here stack.push(node);}function pop(){ // write code here return stack.pop();}function top(){ // write code here retur...
2019-07-04 17:43:55
172
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人