北冥有一鲲-CSDN博客

原创 Web 前端力荐书目

作为一名前端开发人员，读书其实是一件不算太好的选择。因为前端技术发展的太快，很多书出版时可能有些内容已经过时。再加上技术书一般国外写的比较好，如果翻译成中文在发行，那过期的内容可能更多。虽然如此，但是有一些书个人觉得还是值得一读，尤其是读其中的思想。接下来，我会推荐一些自己读过，并且感觉还不错的书籍。...

2021-01-04 20:46:31 333

前言任何研究都不是凭空产生，至少博主是这样的。在手机端拍照后图片很大，有的甚至有 10M 多。这个时候再去上传图片，可想而知，速度是很慢的。正因如此，便有了前端图片压缩这个需求。图片格式传统的图片格式有 git、jpg/jpeg、png 等，谷歌后来推出了另一种压缩比更高的格式 webp。在介绍这几种图片格式前，先说下图片的一些特性。有损和无损有损：指在图片压缩过程中，会丢失一部分图片信息，并且这种丢失是不可逆的。无损：指在图片压缩过程中，图片质量没有损失，任何时候都可以从无损压缩过的

2021-06-03 06:09:37 3620

原创 Vue Router 源码之 hash 与 history 模式

相信用过 Vue 框架的朋友，一定听过 Vue Router。要想写一个复杂的单页应用，没有路由可不行。Vue Router 默认开启的是 hash 模式，如果我们不想让浏览器中的 URL 包含影响美观的 #，我们可以开启 history 模式。不过这种 history 的模式稍微复杂一点，需要后端服务器配合。学东西，最好是知其然，知其所以然。本文将从源码的角度分析 hash 与 history 这两种模式的实现，本文基于 Vue Router 3.5.1 版本。单页应用当我们在浏览器地址栏输入一个

2021-03-11 23:16:28 463

原创 Vue 源码之 nextTick

前言为什么要写一篇关于 nextTick 的源码分析呢？主要是因为 nextTick 与 JS 的事件循环（Event Loop）有关，这块知识还是比较重要的，尤其当我们的程序复杂了，很可能就会遇到因为 JS 顺序顺序导致的问题。事件循环JS 执行是单线程的，它是基于事件循环的。事件循环大致分为以下几个步骤：所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"

2021-03-09 00:09:57 219

原创 Vue 源码之 computed 和 watch

学如逆水行舟，不进则退！当今社会，很美好，也很残酷。一般软件或互联网公司，大多数的业务其实是没有很高的难度，所以员工也没有什么机会去提升自己。不过值得庆幸的是，编程界开源风气盛行，功夫秘籍随手可得，而代价仅是你的时间。本次文章的主题是 computed（计算属性）和 watch（侦听器），代码基于 Vue 2.6.11 版本，和 2.5 还是有一些区别。用法回顾我们先来简单回顾下 computed 和 watch 的用法。computedexport default { name: .

2021-03-07 01:55:51 414

原创算法系列之链表

链表和数组有点类似，都是线性表的一种，但是它们又有很大的不同。数组需要一块连续的内存空间来存储，而链表恰恰相反，它并不需要一块连续的内存空间，它通过“指针”将一组零散的内存块串联起来使用。

2021-02-09 10:01:21 175

原创 Web 性能优化之渲染层

在上一篇《Web 性能优化之传输层》介绍了传输层浏览器和网络所做的事情，以及根据这期间的情况我们可以做出的优化。这一篇，我将介绍浏览器的渲染流程，以及根据渲染流程我们可以做出的优化。浏览器渲染流程浏览器架构在介绍浏览器渲染流程之前，我们先来简单看一看浏览器的架构。这里我主要介绍 Chrome 的架构，毕竟它目前全球占有率第一。现代浏览器采用的多进程架构，避免单进程导致的不稳定、不流畅、不安全的问题。当我们打开浏览器时，浏览器至少会开启 4 个进程。其中浏览器主进程、网络进程、GPU 进程是所有

2020-12-15 01:00:15 577 1

原创 Web 性能优化之传输层

Web 性能优化是一个老生常谈的问题，以前看了很多零碎的知识，所以一直想找个机会好好总结一下。Web 性能优化涉及的面很广，这里我从前端的视角讲一讲优化点，主要分为传输层和渲染层。这篇文章，我讲述的是传输层。渲染层的优化会另外写一篇进行讲解。输入网址到页面呈现，中间发生了什么“输入网址到页面呈现，中间发生了什么”这个是很多面试官喜欢问的一个问题。为什么喜欢问呢？因为这个问题覆盖了很多计算机网络的问题，如果你答得好，那么可以表明你的计算机网络基础还不错。很多性能问题就发生在这个过程中，如果你想很好

2020-12-07 20:55:39 402 1

原创算法系列之二叉树

二叉树相关概念由于本篇博文主要介绍二叉树的面试题，所以关于其相关概念只做简单的描述。二叉树简介数据结构中有一种结构是树，不过一般我们常见的是树中的一种特殊类型——二叉树。二叉树简单来说就是每个节点最多有两个子节点。如果每个节点都有两个子节点，那么我们称这种二叉树为满二叉树。还有一种二叉树，其叶子节点都在最底下两层，最后一层叶子节点都靠左排列，并且除了最后一层，其他层的叶子节点都要达到最大，这种二叉树叫作完全二叉树。除了上面那些，这里还需要特别提到一种树，二叉搜索树。二叉搜索树要求，在树中的任意

2020-09-09 22:48:11 229

原创算法系列之动态规划算法

动态规划比较适合用来求解最优问题，比如求最大值、最小值等等。它可以非常显著地降低时间复杂度，提高代码的执行效率。不过，它也是出了名的难学。它的主要学习难点跟递归类似，那就是，求解问题的过程不太符合人类常规的思维方式。对于新手来说，要想入门确实不容易。不过，等你掌握了之后，你会发现，实际上并没有想象中那么难。

2020-05-16 00:47:18 5541

原创算法系列之经典排序算法

说到算法，入门级的算是排序算法了。还记得读大学时，学的第一个是冒泡排序。初次接触算法，觉得很神秘，一个冒泡竟然搞了很久。这边文章主要介绍一些经典的排序算法，由于博主现在做 web 前端方面的工作，所以编程语言就使用 JavaScript 了。不过，如果是学其他语言的人，读懂大致的思路是没问题的，完全可以仿照文章中 JavaScript 版的代码进行重写。概述排序算法是非常基础的算法之一，在...

2020-05-05 12:37:43 267

原创算法系列之回溯算法

回溯法简介回溯法（Backtrack）其实是基于递归来实现的。但是它的思考逻辑很有意思，和走迷宫一样。比如我们走到一个分叉口，我们不知道哪一个路口是正确的，但是我们可以先随便选择一个路口。如果最后走不通，我们可以原地返回，在之前的分叉口重新抉择。正是因为这种回溯的思考方式，所以这种算法称之为回溯法。笼统地讲，回溯算法很多时候都应用在“搜索”这类问题上。不过这里说的搜索，并不是狭义的指我们前...

2020-05-03 23:34:04 727

原创算法系列之哈希表

相信刷过leetcode的同学都对“两数之和”、“三数之和”以及“四数之和”的问题有所印象，因为力扣的第一题就是两数之和。注意：本文所有的代码都采用 JavaScript。所有题目来自 leetcode。两数之和我们先来看一看题目：给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案...

2020-05-02 00:48:27 560

原创 WebApp 首屏优化

背景在进行webapp开发时，如果使用vue或者react类似的框架，并且采用的单页应用的模式，那首屏加载肯定会遇到白屏时间过长的问题。如果我们只是自己写个demo，那么等待一会没有任何关系。但是如果是一个商业应用，那你可能会因此流失一批客户。一般来说如果3秒钟，网页没有打开，20%的新用户会直接离开。剩下的会进行刷新操作，如果还是没有打开，60%的新用户会离开。其实这个时候你的应用曝光的机...

2020-04-30 22:35:32 373

原创 Hybrid App 开发浅谈

缘起智能手机兴起，移动端开发火热起来。起初只有Android和IOS应用，随着H5的问世，以及手机性能的提升，Web App开始斩露头角。一份代码，多端运行。这预示着开发成本的降低，同时也能减少因开发者实现的差异导致Android和IOS应用出现不同的表示。发展如果某一块的功能简单，仅仅是一些页面的展示，那么无用质疑，使用Web App技术现实更优，通过WebView嵌入到原生应用中。...

2019-11-16 20:38:53 429

原创 CSS 深入 3D 动画

Web 技术飞速发展，但是绝大数技术人员并没有跟上其脚步，博主就是其中一员。当我们还在琢磨上一代技术时，那些技术前沿的弄潮儿开始打造新一代技术。这里聊一聊非高频却十分炫酷的 3D 技术，使用 CSS3 即可实现。二维与三维在说到三维之前，我们先聊一聊二维。二维很好理解，即平面。我们使用 x 轴和 y 轴就可以轻松表示。三维是在二维的基础上增加了一个维度。这个稍微有点难理解，可以参考下图：...

2019-08-18 23:50:49 208

原创一文搞懂 Cordova 开发

古人有云“活到老，学到老”。果不其然，在学校里我们一直在学习，步入社会开始工作后学习也不会停止。需求是不断变化的，能够解决问题才是王道。故唯有不断学习新的技能才能不被时代拉下。Cordova简介Cordova 是一款老牌的基于 HTML，CSS 和 JavaScript 的移动端跨平台框架，它的前身是 PhoneGap。后者在被 Adobe 公司收购之后，将其核心剥离出来，移交给了Apach...

2019-08-05 23:28:22 341

原创 JavaScript 实现滚动内容自动切换 Tab

原生 js 实现滚动内容自动切换 Tab

2019-05-06 23:54:10 6117 1

原创 CSS 实现块级元素垂直居中

如果是文本，我们可以使用 line-height 将其垂直居中。但如果是块级元素，就不能这么做了。尽管如此，我们还是有很多方法可以将一个块级元素垂直居中。绝对定位2D 转换弹性盒子布局绝对定位如果块级元素高度和宽度已知，利用绝对定位和负边距，就可以实现垂直居中。<div class="container"> <div class="content"&gt...

2019-03-24 00:31:45 2597

原创深入浅出 TypeScript

什么是 TypeScriptTypeScript 是 JavaScript 类型的超集，它可以编译为纯 JavaScript。TypeScript 可以在任何浏览器、任何计算机和操作系统上运行，并且是开源的。TypeScript 由微软开发，截至到目前，最新的 TypeScript 版本为 3.3。TypeScript = ES6 + TypeTypeScript 用于解决什么问题...

2019-03-09 22:32:30 1675

原创性能优化之 CDN

CDN 简介CDN 全称是 Content Delivery Network，内容分发网络。尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快、更稳定。CDN 原理在网络各处放置节点服务器，构成在现有的互联网基础之上的一层智能虚拟网络。CDN 系统能实时的根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的节点上...

2018-11-17 21:05:23 2340

原创深入浅出 RequireJS

简介一个复杂的应用，其编程语言也必须要有模块机制，方能更好的组织代码。在前端 js 模块中，RequireJS 是一个非常小巧的 JavaScript 模块载入框架，是 AMD 规范最好的实现者之一。特点异步加载模块当我们引入 js 文件时，不会阻塞浏览器对 html 文档的渲染。按依赖顺序加载我们不用在当心 js 文件的引入顺序，RequireJS 会自动帮我们处理依赖关系。模块依...

2018-10-28 22:49:55 22732

原创 HTTPS 原理及部署

HTTP 和 HTTPS如果你之前了解过计算机网络，那么你一定听说过 HTTP 协议。HTTP 协议的全称为 HyperText Transfer Protocol，即超文本传输协议。HTTP 协议位于 OSI 七层网络模型中的第七层——应用层。Web 服务器上的所有资源的传输都遵守该协议，用户通过浏览器进行资源的查看和下载。RFC 2616 定义了 HTTP 1.1。简单回顾一下 HTT...

2018-10-10 23:49:05 277

原创 Web 兼容性指南

毫无疑问，随着微信的崛起，移动端网页开发又进一步，需求量不断攀升。但是智能手机市场的丰富多彩，百花齐放，导致移动端的网页开发和传统的 PC 端网页开发有所不同。很多人可能正迈向手机端网页开发，但又听说手机端网页开发有着这样或那样的，所以有些忐忑。这里，博主用近年来开发手机端页面的经历，来告诉大家手机端应该注意哪些问题，同时也会讲一讲这些问题产生的原因以及解决的方法。问题清单&amp;amp;amp;lt;met...

2018-09-29 00:06:32 2956

原创 PHP 并发编程基础和实践

随着互联网的普及，网民越来越多，这就会造成随便的一个活动，就有可能面临高并发带来的性能问题。而 PHP 是单进程的，很容易造成性能瓶颈，所以 PHP 的并发编程实践显得格外重要。如果想要真正理解并发，我们需要一些基础的理论知识。进程、线程与协程进程是计算机中程序关于某数据集合上的一次运行活动是系统进行资源分配和调度的基本单位是操作系统结构的基础是一个“执行中的程序”进...

2018-07-26 23:52:10 4850 1

原创性能优化之浏览器缓存

谈到前端性能优化，就不得不提浏览器缓存，它是很重要也很常见的一种方式。但是很多同学仅有缓存的意识，对缓存并没有一个比较清晰的认识。浏览器缓存分类HTTP 状态码 200 from memory cache 说明：直接从本地缓存中获取响应特点：最快速、最省流量，因为根本没有向服务器发送请求HTTP 状态码 304 not modified 说明：协商缓存，浏览器在本地没有命中的...

2018-07-20 23:33:01 300

原创 CSS 块级格式化上下文 BFC

BFC 全称是 block formatting context，翻译成中文就是块级格式化上下文。在很多 CSS 教程中，很少有直接提到 BFC 的。那这是不是说明 BFC 不重要呢？其实不是的，BFC 在有些地方有着很大的作用。

2018-06-03 17:53:29 288

原创 CSS 三栏布局

三栏布局算是网页中最常见的布局之一了。尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧固定宽度，中间自适应。如果现在让你去实现这么一个三栏布局，你会怎么做呢？利用绝对定位我觉得这是比较古老和容易想到的方式。当初上大学刚接触 CSS 的时候，看到过一个网页，整站都是用绝对定位布局的。当时，觉得理所当然，布局就该这么做…效果如下代码如下&amp;lt;div c...

2018-05-16 00:02:58 4097

原创 CSS 负边距

老实说，个人从来没有重视过 CSS，觉得很简单，没有可学之处。但随着使用和认识的深入，才发现 CSS 也博大精深。加上 CSS3 的出现，以前需要 JavaScript 的地方，现在用 CSS 亦可以轻松实现。相信未来，CSS 一定能大放异彩！这次一起和大家聊一聊 CSS 中的负边距。负边距的特点在正式介绍负边距之前，我们先回顾一下文档流。所谓的文档流，指的是元素排版布局过程中，元...

2018-05-04 00:27:23 2302

原创 Web 防盗链

什么是防盗链防止别人盗用自己服务器资源，如图片、音乐以及视频。一般是小站盗用大站。防盗链工作原理通过referer或者签名，服务器可以检测请求的来源网页，如果是资源文件，则可以跟踪到显示它的网页地址。一旦检测到来源不是本站，则进行阻止。怎么防盗链referer方式Nginx 模块 ngx_http_referer_module 用于阻挡来源非法的域名请求，Ngi...

2018-04-09 23:27:53 1505

原创 PHP 发展史

就像搞对象一样，如果你想要快速的追到对方，前提是你一定要了解对方的过去种种，这样方能得心应手。请吃饭，不会没胃口；送礼物，不会没感觉；聊天时，不会没话题……编程一样，工欲善其事必先利其器。假使你和我一样，都是一个 PHP 程序员，那你的武器便是 PHP。倘若你要使用好这把武器，了解它的前世今生必不可少。知道了它的历史，便能更准确的知道它的定位、优势以及劣势。问世1994年，拉斯...

2018-04-03 23:23:04 3001

原创 JavaScript 模块化介绍

js 是一种脚本语言，与 PHP 类似。但是如今 PHP 不再仅仅构建一个简单的web 系统，它也在向 Java 看齐，也能够支撑起一个庞大的 web 系统。国外非常有名的脸书网就是一个典型的例子。一门语言，要构建出庞大复杂的系统的基础之一就是语言文件的相互引用。毕竟一个单文件直接实现一个庞大复杂的系统是十分吃力的。后端模块化CommonJs在互联网早期，JavaScript 一直在前端发光发热，但在后端基本上没有什么建树。并且 JavaScript 官方的一些规范也仅仅只是对于前端做了很多要求，.

2018-03-26 22:55:46 428

空空如也

空空如也