Article 一月 15, 2021

你好, 请你解释一下浏览器缓存策略

Words count 8.4k Reading time 8 mins.

前段时间, 被面试官问了一个之前完全没有留意的问题, 你知道什么是浏览器的缓存策略吗?知道的话,能不能解释一下缓存策略的内容, 这下可把我问懵了, 毕竟那会对于浏览器缓存只是一知半解, 更别说浏览器缓...

Read article

Article 十二月 22, 2020

一文带你知晓HTTP/2

Words count 12k Reading time 11 mins.

作为一个经常跟web 打交道的程序员,了解HTTP协议是必须的, 通过本文, 希望能够让你了解到一些关于HTTP协议和HTTP/2的基本概念和优劣势,如有不对的地方请指出。

HTTP的全称是超文本传输协议 (HyperText Transfer Protocol) ,伴随着计算机网络和浏览器的诞生,HTTP1.0 也随之而来,处于计算机网络中的应用层,HTTP 是建立在 TCP 协议之上,所以 HTTP协议的瓶颈及其优化技巧都是基于TCP 协议本身的特性,例如 TCP建立连接的 3 次握手和断开...

Read article

Article 五月 19, 2020

教你通过利用ssh编写前端一键部署脚本

Words count 15k Reading time 14 mins.

今天来介绍一下, 如何利用node编写部署脚本, 来实现一键部署的功能

因为我司的开发流程比较特殊, 开发环境的服务器ip会经常变化, 并不固定, 所以在前端部署代码的时候十分麻烦,

部署流程如下:

可以看出, 这种方式存在一些缺点:

  • 每次部署都需要打开xshellwinSCP软件
  • 部署多个服务器ip,十分麻烦, 需要来回切换, 容易替换错误
  • 每次都需要手动复制代码或执行上传命令

全自动化的部署其实首推jenkins实现,jenkins可以根据gitlab push或者merge事件自...

Read article

Article 五月 11, 2020

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

Words count 4.2k Reading time 4 mins.


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

  • 在国内访问github仓库的图片太慢了, 而且还经常容易...
Read article

Article 五月 09, 2020

团队项目优化之路

Words count 13k Reading time 12 mins.

背景

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

项目中存在的问题:

  1. 使用 vuex, 但不使用 vuex 的组件化通信,只是将 vuex 作为一个存储全局变量的作用,事实上 vuex 还有很多功能可以用到,例如 action 等,此外 vuex 没有分模块管...
Read article

Article 五月 09, 2020

教你如何做一个表白神器

Words count 7.4k Reading time 7 mins.


初衷

前段时间发现微信群里有人天天准时准点的在发咨询或者消息, 身为程序员的我一眼就发现这是机器人所为, 于是萌生了利用机器人每天向女票定时发消息的想法, 那么开始我的折腾之旅吧。

关于微信机器人的开源项目, github一搜也是有一大堆了, 身为前端, 自然是拥抱node啦, 于是我找到了wechaty, 于是正当我满心欢喜的clone 下来,扫码登录后,却报了这个错误:

<error><ret>1203</ret><message>当前登录环境...
Read article

Article 九月 05, 2019

浏览器渲染与Virtual DOM相关

Words count 15k Reading time 14 mins.


作为一名web前端码农,每天都在接触着浏览器.长此以往我们都会有疑惑,浏览器是怎么解析我们的代码然后渲染的呢?弄明白浏览器的渲染原理,对于我们日常前端开发中的性能优化有重要意义。

所以今天我们来给大家详细说说浏览器是怎么渲染DOM的。

浏览器渲染大致流程

首先,浏览器会通过请求的 URL 进行域名解析,向服务器发起请求,接收资源(HTMLCSSJSImages)等等,那么之后浏览器又会进行以下解析:

  1. 解析HTML文档,生成DOM Tree

  2. CSS 样式文件加载后,开始解析和构建 CSS...

Read article

Article 三月 08, 2019

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

Words count 2.8k Reading time 3 mins.

在网页中使用链接时,如果想要让浏览器自动在新的标签页打开指定的地址,通常的做法就是在 a 标签上添加 target等于”_blank” 属性。

然而,就是这个属性,为钓鱼攻击者带来了可乘之机。

parent 与 opener

在说 opener 之前,可以先聊聊 <iframe> 中的 parent
我们知道,在 <iframe>中提供了一个用于父子页面交互的对象,叫做 window.parent,我们可以通过 window.parent 对象来从框架中的页面访问父...

Read article

Article 一月 24, 2019

来聊聊优雅的Icon

Words count 7.1k Reading time 6 mins.

在做前端后台项目的时候经常会用到很多 icon 图标,刚开始还好,但随着项目的不断迭代,每次修改添加图标会变得很麻烦,而且总觉得不够优雅,就开始琢磨着有啥简单方便的工作流呢?

雪碧图

在我刚开始实习时,大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分,所以为了优化有了image sprite 就是所谓的雪碧图,就是将多个图片合成一个图片,然后利用 css 的 background-position 定位显示不同的 icon 图标。

制作雪碧图

1.photoShop...

Read article

Article 十月 27, 2018

前端性能优化之图片

Words count 4.1k Reading time 4 mins.

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

目前在项目开发中常见的图片格式,包括有:

  • jpg
  • png
  • gif
  • svg
  • WebP

jpg格式

jpg 全称叫做jpeg,.jpg.jpeg这两种扩展名的实质是相同的,但因为DOS时代的8.3文件名命名原则是:拓展名不能超过三位,...

Read article
Load more
0%