Web开发
文章平均质量分 55
前端搬运工
2020年毕业于吉林大学,一直想摆脱前端小白~
展开
-
一文讲透HTTP缓存之ETag
无论是前端、后端或者运维同学,在平时的开发工作中,都会和HTTP缓存打交道,大家或多或少都了解HTTP缓存中的ETag字段,它是资源的特定版本的标识符,可以让缓存更高效,并节省带宽。本文系统性的阐述了ETag的起源、生成原理及使用。看完本文后,对于不了解ETag的同学能够知道ETag的来龙去脉,并能马上上手使用;对于熟悉ETag的同学也能做到温故而知新。ETag定义及起源ETag(Entity-Tag,下文简称:ETag)是万维网协议HTTP的一部分,它是 HTTP 为Web 缓存验证提供的多种机..原创 2022-03-23 20:59:07 · 14555 阅读 · 1 评论 -
【前端性能优化实践】手把手教你实现webpack图片压缩插件
手把手教你实现一个webpack图片压缩插件,提升页面加载速度原创 2022-02-25 14:08:58 · 1657 阅读 · 0 评论 -
前端H5 video视频在360浏览器、微信内置浏览器层级提升(太高)问题
我们在对页面进行浏览器兼容性测试的时候会发现页面中的视频在部分浏览器中(QQ浏览器、360浏览器、搜狗浏览器等)会被提升,这属于浏览器自身优化行为,无法通过CSS的z-index属性改变其层级关系。目前找到了360浏览器、微信内置浏览器的解决方案:<video controls360=no // 360浏览器 webkit-playsinline playsinline x5-playsinline // 针对腾讯原创 2021-09-06 13:08:02 · 888 阅读 · 0 评论 -
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 · 1448 阅读 · 0 评论 -
修改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 · 1367 阅读 · 0 评论 -
元素增加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 · 1944 阅读 · 0 评论 -
web前端布局方式总结
本文主要介绍了前端布局方案的实现以及存在的问题,涉及到的布局方案包括:流体布局float布局table布局定位布局flex布局响应式布局grid布局前端布局从最开始的:Table布局 => DIV+CSS布局 => Flex布局 => Grid布局 经历了以上一系列变化,这些变化伴随着前端技术的发展和程序猿对布局方案便利性的追求,最终的结果就是让我们的网页设计变得越来越方便、快捷、高效,我们看到的网页也越来越多样化和人性化。互联网从诞生到至今也就二十年的时光,因此,让我原创 2020-08-16 23:31:25 · 2066 阅读 · 0 评论 -
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 · 10983 阅读 · 1 评论 -
史上最全垂直居中方法(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 · 390 阅读 · 0 评论 -
20小时
今天的学习内容如下:看公司项目代码、完成任务学习CSS布局方法(浮动布局、flex布局、position布局,近期将会对此进行总结,先占坑)学习计算机操作系统第二章-进程管理原创 2020-08-04 23:25:11 · 102 阅读 · 0 评论 -
10小时
今天的学习内容如下:看了计算机操作系统第一章内容学习快应用开发中的图片、背景图片内容(工作需要)了解了H5 手机 App 开发入门HTTP Referer 教程原创 2020-08-03 23:36:27 · 168 阅读 · 0 评论 -
前端工程师的自我修养
为什么写这篇文章首先自我介绍一下:我叫薛小科,2020年毕业于吉林大学,本科专业是电路系统,研究生学的是材料相关专业。以上是我的个人基本信息,从信息中你应该可以看出我并没有任何计算机相关的背景。但毕业找工作的时候找了前端开发岗位,现在也刚入职一个月(会HTML、CSS、JavaScript、Vue基础),想写这篇文章的契机是因为今天看了阮一峰老师的未来世界的幸存者一书,里面有提到有个叫 Dan McLaughlin 的人为了验证一万小时定律从零开始训练自己,虽然他由于背伤和难以取得突破,Dan 在201.原创 2020-08-02 22:51:20 · 186 阅读 · 0 评论 -
JavaScript 中 trim() 方法原理及简单实现
ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。我们用函数的形式来实现以上方法:/**str:传入的字符串direct:表示具体从哪边trim*/function trim(str, direct...原创 2020-03-07 16:52:40 · 1663 阅读 · 0 评论 -
git 提交时忽略某些文件或者目录
git 提交时如果想忽略某些文件或者目录:1.在根目录下创建 .gitignore 文件2.在该文件中直接添加内容,如:#忽略.mdb、.sln、.sln,.config 文件,不忽视 .txt 文件*.mdb*.ldb*.sln.config!.txt#忽略Debug目录及文件,忽视obj目录Debugobj/...原创 2020-03-03 20:26:08 · 838 阅读 · 0 评论 -
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 · 1468 阅读 · 0 评论 -
算法之在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。
用例:1,[[1,2,8,9],[2,4,9,12],[4,7,10,13],[6,8,11,15]]对应输出应该为: true思路:因为输入的数组是从左到右、从上到下递增的规律,只需要将输入的整数和某一行(这里选择最后一行)的第一位(该行的最小值)进行对比,如果目标值大于该值,则向右移一位再进行比较,如果小于该值,则上移一行进行比较,如此反复…首先将输入的整数和数组进行分割进行对比...原创 2019-07-03 22:11:13 · 891 阅读 · 0 评论 -
算法之操作给定的二叉树,将其变换为源二叉树的镜像。
思路:将根节点的左右子树互换,递归左右子树/* function TreeNode(x) { this.val = x; this.left = null; this.right = null;} */function MIrror(root) { // 递归出口 if (root === null) { return; } var temp = ...原创 2019-07-04 15:03:59 · 245 阅读 · 0 评论 -
算法之输入两棵二叉树A,B,判断B是不是A的子结构。(ps:我们约定空树不是任意一个树的子结构)
思路首先判断两棵树是否为空,如果其中一颗为空,直接返回false,如果不为空,继续判断 A 树根节点和 B 树跟节点是否相同,如果相同,判断 B 是否有孩子,如果没有孩子,直接返回 true;如果有孩子,判断其左右子树与 A 是否相同,如果左右子树相同,返回true,如果不同,返回false;如果跟节点不同,判断 A 的左右子树是否有和 B 根节点相同的结点,如果有,递归判断,如果没有,返回...原创 2019-07-04 11:25:07 · 687 阅读 · 0 评论 -
HTTP1.0 1.1 2.0 的区别
推荐:HTTP协议:HTTP1.0、HTTP1.1、HTTP2.0对比HTTP2 协议转载 2019-06-28 17:05:09 · 148 阅读 · 0 评论 -
算法之输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则。
思路首先判断有没有空链表,如果其中一个为空,直接返回另一个。如果都不为空,创建一个新链表,比较传入两个节点的大小,小的直接放到新链表中,大的递归比较。function Merge(pHead1, pHead2) { let list = {}; if (pHead1 === null) { return pHead2; } else if (pHead2 === null) { ...原创 2019-07-04 10:18:29 · 305 阅读 · 0 评论 -
算法之输入一个链表,反转链表后,输出新链表的表头。
思路首先遍历整个链表,将节点中的值 push 进一个数组,再次遍历该链表,将数组中的值 pop 出来给节点,最后返回表头即可。function reverseList(pHead) { // 缓存传入的 pHead,创建一个空数组接收链表的值 var node = pHead, arr = []; // 当节点不为空时,依次将节点值传入数组 while(node != null) {...原创 2019-07-04 09:32:47 · 1009 阅读 · 0 评论 -
高性能JavaScript之 Web Workers
大多数浏览器让一个单线程共用于执行 JavaScript 和更新用户界面。每个时刻只能执行其中一种操作,这意味着当 JavaScript 代码正在执行时页面无法响应输入,反之亦然。当 JavaScript 代码执行时,用户界面处于 ‘锁死’ 状态。用于执行 JavaScript 和更新用户界面的进程通常被称为 ‘浏览器UI线程’。UI 线程的工作基于一个简单的队列系统,任务会被保存到队列中知道进...原创 2019-06-28 16:23:12 · 162 阅读 · 0 评论 -
高性能JavaScript之事件委托
当页面中存在大量元素,而且每一个都要多次绑定事件处理器(比如 onclick)时,可能会影响性能。事件委托的基础:事件的冒泡:事件逐层冒泡并能被父级元素捕获。DOM 的遍历:一个父级元素包含的子元素过多,那么当一个事件被触发时,是否触发了某一类型的元素?某些不支持冒泡的元素不能使用事件委托。...原创 2019-06-28 13:03:04 · 112 阅读 · 0 评论 -
算法之输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字
输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2,3,4,8,12,16,15,14,13,9,5,6,7,11,10.思路设置一个左上和右下坐标,循环打印一圈后左上坐标加 1, 右下坐标减 1,只要左上坐标小于等于右下坐标,循环functio...原创 2019-07-04 16:08:20 · 1385 阅读 · 0 评论 -
算法之定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的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 · 180 阅读 · 0 评论 -
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 · 377 阅读 · 0 评论 -
floyd 算法:多源最短路径算法
该算法用于解决多源最短路径问题,时间复杂度为 O(n^3)。核心算法只有以下几行:for (int k = 0; k < n; k ++) for (int i = 0; i < n; i++) for (int j = 0; j < n; j++) if( D[i][k] + D[k][j] < D[i][j] ) { ...原创 2019-04-16 18:19:28 · 317 阅读 · 0 评论 -
HTML中不支持冒泡的事件
UI事件loadunloadresizeaborterror焦点事件blurfocus鼠标事件mouseleavemouseenter有一个比较特殊:scroll 事件:element的scroll事件不冒泡, 但是document的defaultView的scroll事件冒泡参考:W3C MDN...原创 2019-09-05 16:33:51 · 726 阅读 · 0 评论 -
一次搞懂 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 · 18957 阅读 · 5 评论 -
彻底搞懂负载均衡的原理及其常见方法
负载均衡(百度百科)定义:负载均衡(Load Balance)建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。(一脸懵逼的进来又一脸懵逼的出去)以下是我查阅相关内容后的总结和理解:1. 负载均衡的由来了解计算机网网络的同学(不了解也没关系)都知道我们客户端和服务端通信(发送请求和接收相应)的时候,服...原创 2019-07-21 17:32:54 · 1510 阅读 · 0 评论 -
算法之深度优先搜素(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 · 329 阅读 · 0 评论 -
算法之输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则输出true,否则输出false。假设输入的数组的任意两个数字都互不相同。
function VerifySquenceOfBST(sequence){ // write code here /* 已知条件:后序序列最后一个值为root;二叉搜索树左子树值都比root小,右子树值都比root大。 1、确定root; 2、遍历序列(除去root结点),找到第一个大于root的位置,则该位置左边为左子树,右边为右子树; 3、遍...原创 2019-07-04 22:11:58 · 288 阅读 · 0 评论 -
算法之从上往下打印出二叉树的每个节点,同层节点从左至右打印。
例如:输入:[8, 6, 10, 5, 6, 9, 11]思路这是树的层次遍历。可以使用两个辅助数组模拟队列来缓存树的结构,首先判断根节点,然后是左右子树,如果存在依次压入队列,对队列中的树依次循环判断。依次从队列中取出一个元素 push 到输出的数组中。/* function TreeNode(x) { this.val = x; this.left = null; ...原创 2019-07-04 21:26:52 · 278 阅读 · 0 评论 -
算法之输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序。
输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序列对应的一个弹出序列,但4,3,5,1,2就不可能是该压栈序列的弹出序列。(注意:这两个序列的长度是相等的)思路需要用到一个辅助栈来遍历压栈顺序,一个指数来记录弹出栈的位置,依次将数字压入栈,看压入的数...原创 2019-07-04 21:06:09 · 1690 阅读 · 1 评论 -
算法之请实现一个函数,将一个字符串中的每个空格替换成指定字符。
使用正则直接替换例如,当字符串为“We Are Happy”,则经过替换之后的字符串为“We%20Are%20Happy”。function replaceStr(str) { return str.replace(/\s/g, '%20');}扩展:当字符串为“We Are HaPpy”,替换 p ,则经过替换之后的字符串为“We Are Ha%20%20y”。function ...原创 2019-07-03 21:37:50 · 294 阅读 · 0 评论 -
高性能JavaScript之重绘和重排
浏览器下载完页面所需的所有组件后就开始解析并生成两个内部数据结构:DOM树:表示页面结构渲染树:表示 DOM 节点如何展示DOM 树中的每个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM 元素没有)。渲染树中的节点被称为“帧”或“盒”,符合 CSS 模型的定义(盒子模型是一个具有内边距,外边距,边框和位置的盒子)。一旦 DOM 和渲染树构建完成,浏览器就开始显示页面元素。...原创 2019-06-28 11:12:04 · 420 阅读 · 0 评论 -
HTML 之 DocumentFragment
DocumentFragment(文档片段)接口表示一个没有父级文件的最小文档对象。它被作为一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的 XML 片段。它和 Document 最大的区别是它不是真实 DOM 树的一部分,它的改变不会触发浏览器的重绘和重排(回流),不会导致性能问题。使用方法:可以使用 document.createDocumentFragment 方...原创 2019-06-28 10:37:41 · 1852 阅读 · 0 评论 -
HTML的position详解
HTML的position详解转载 2019-04-25 11:45:55 · 799 阅读 · 0 评论 -
中国大学MOOC-陈越、何钦铭-数据结构-2019春期中考试
1-1在具有N个结点的单链表中,访问结点和增加结点的时间复杂度分别对应为O(1)和O(N)。 (3分)答案:F1-2若一棵平衡二叉树的所有非叶结点的平衡因子都是0,则其必为完美二叉树。(3分)答案:T1-3在用数组表示的循环队列中,front值一定小于等于rear值。 (2分)答案:F1-4一棵有124个结点的完全二叉树,其叶结点个数是确定的。 (3分)答案:T1-5如果...原创 2019-04-19 22:02:24 · 1057 阅读 · 0 评论 -
POST 和 PUT 的区别
1.什么是幂等性幂等性概念:幂等通俗来说是指不管进行多少次重复操作,都是实现相同的结果。2.REST请求中哪些是幂等操作GET,PUT,DELETE都是幂等操作,而POST不是,以下进行分析:首先GET请求很好理解,对资源做查询多次,此实现的结果都是一样的。PUT请求的幂等性可以这样理解,将A修改为B,它第一次请求值变为了B,再进行多次此操作,最终的结果还是B,与一次执行的结果是一样的,...转载 2019-05-04 18:20:49 · 2319 阅读 · 0 评论