教你快速拥有一个免费的图床且快捷上传

经常写博客的人都知道, 找图床是个很令人头疼的问题, 特别是我们这种没钱的, 总得找一些免费的图床, 一开始选择还比较多, 有微博图床、七牛云图床等等可供选择, 可是到了 2020年, 可选择且稳定还免费的图床, 越来越少了,于是无奈之下, 只能选择把图片手动上传到 github仓库, 然后通过https:/...

团队项目优化之路

背景公司的前端项目是基于Vue技术栈为核心的前端项目,不得不说, 我花了接近将近一个多星期, 才对它有一定的了解, 在不包含引入库和依赖的情况下, 接近 43.3M, src文件下的.vue文件 接近700个, 这么大的项目, 可是让我疑惑的点是, 在优化的方面, 却有很多不足之处。 项目中存在的问题: 使用...

教你如何做一个表白神器

初衷前段时间发现微信群里有人天天准时准点的在发咨询或者消息, 身为程序员的我一眼就发现这是机器人所为, 于是萌生了利用机器人每天向女票定时发消息的想法, 那么开始我的折腾之旅吧。 关于微信机器人的开源项目, github一搜也是有一大堆了, 身为前端, 自然是拥抱node啦, 于是我找到了wechaty, 于是...

浏览器渲染与Virtual DOM相关

浏览器如何渲染页面作为一名web前端码农,每天都在接触着浏览器.长此以往我们都会有疑惑,浏览器是怎么解析我们的代码然后渲染的呢?弄明白浏览器的渲染原理,对于我们日常前端开发中的性能优化有重要意义。 所以今天我们来给大家详细说说浏览器是怎么渲染DOM的。 浏览器渲染大致流程首先,浏览器会通过请求的 URL 进行域...

被严重低估的target='_blank'漏洞问题

在网页中使用链接时,如果想要让浏览器自动在新的标签页打开指定的地址,通常的做法就是在 a 标签上添加 target等于”_blank” 属性。 然而,就是这个属性,为钓鱼攻击者带来了可乘之机。 parent 与 opener在说 opener 之前,可以先聊聊 <iframe> 中的 pare...

来聊聊优雅的Icon

前言在做前端后台项目的时候经常会用到很多 icon 图标,刚开始还好,但随着项目的不断迭代,每次修改添加图标会变得很麻烦,而且总觉得不够优雅,就开始琢磨着有啥简单方便的工作流呢? Icon发展史雪碧图在我刚开始实习时,大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分,所以为...

前端性能优化之图片

前端优化中图片优化必要性在我们前端优化的种种方案中,包括js、html、css文件的打包压缩合并到极致,我们节省的空间至多也就是几十K的大小,但是在图片领域能够优化的空间,往往能够达到几百k到几M的范畴,这对于一个页面而言,优化力度可是极大的.所以在前端优化中,图片的优化是至关重要的. 图片格式认知目前在项目开发...

JavaScript的高级运用之节流与防抖

概念与目的首先还是得先来讲讲概念,节流和防抖的目的都十分的简单,就是为了性能优化而出现的,目的是为了解决一些短时间内连续执行导致性能不佳或者内存消耗巨大的情况。这类事件有:scroll keyup mousemove resize事件等,短时间内会不断的触发,在性能上消耗是非常大的,尤其是一些改变DOM结构的操作...

初探PWA的Service Worker

Progressive Web App, 简称 PWA,是提升Web App的体验的一种新方法,能给用户原生应用的体验,致力于用前沿的技术开发,让网页使用如同原生App般的体验的一系列方案。 用来自Google Developers的解答Progressive Web Apps: 渐进式 - 适用于所有现代浏...

移动设备引发的一像素边框问题

熟悉移动web开发的同学一定对1像素边框问题不陌生,随着移动端web项目越来越多,要求也越来越高,好多设计师都发现了,你们前端实现的边线为什么这么粗的,根本不是1像素,好吗?一句很普通的border: 1px solid white;在PC端浏览器上会正常显示1px的边框,然而放在移动端时就不是1px的大小了,可...