分类：WEB开发

2018
02-21

前端性能优化小纪

天下武功，无坚不破，唯快不破。对前端而言，快意味着要求资源体量更小、数量更精简、内容更早呈现、交互更加人性化。当项目做到一定程度，就应该考虑性能的问题，前端的性能优化有诸多有迹可循的理论和方法，比如Yahoo！性能军规、GooglePageSpeedInsightsRules。我们团队一个比较老的项目首屏加载大概需要20多秒，这严重影响了用户体验，于是进行了一次首屏加载的性能优化。浏览器渲染过程首先，稍微了解一下... 继续阅读 >
2018
02-05

2018 Web 开发者路线图

如果你还是一个学生，或者一个入门的Web开发者，也许踌躇满志，想做一番事业，只是对这个职业略感迷茫，新技术层出不穷，何去何从，希望下面这个四个路线图能够为你所用。Web开发者的3个方向Web开发者的三方方向分别为前端开发、后端开发和运维。黄色：推荐；灰色：尽可能学习；橙色：任选其一。可以看到，作为Web开发者，不管从事什么职位，下面这些技能点是必须掌握的：... 继续阅读 >
2018
01-31

用不到 50 行的 Python 代码构建最小的区块链

尽管一些人认为区块链是一个等待问题的解决方案，但毫无疑问，这种新技术是计算机的奇迹。但是，区块链到底是什么呢?区块链它是比特币或其他加密货币进行交易的数字账本，账本按时间顺序记录并对外公开。在更一般的术语中，它是一个公共数据库，新数据存储在一个名为块的容器中，并被添加到一个不可变链（后来的区块链）中添加了过去的数据。在比特币和其他加密货币的情况下，这些数据是一组交易记录。当然，数据可... 继续阅读 >
2018
01-23

WebSocket 详解

WebSocket出现前构建网络应用的过程中，我们经常需要与服务器进行持续的通讯以保持双方信息的同步。通常这种持久通讯在不刷新页面的情况下进行，消耗一定的内存资源常驻后台，并且对于用户不可见。在WebSocket出现之前，我们有一下解决方案：传统轮询(TraditionalPolling)当前Web应用中较常见的一种持续通信方式，通常采取setInterval或者setTimeout实现。例如如果我们想要定时获取并刷新页面上的数据，可... 继续阅读 >
2018
01-23

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。———-超长文+多图预警，需要花费不少时间。———-如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。———-正文开始———-最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识... 继续阅读 >
2018
01-19

CSS3系列-css3之线性渐变初探

CSS3系列-css3之线性渐变初探1.写在前面入行前端一年多的时间，想提高自己的css技术水平，于是在网上看了些关于css的书籍，想买几本比较好的css书籍啃啃，找来找去，终于找到了《CSS揭秘》这本书。入手这本书后，从开始看到后面，发现书中的很多效果都可以使用渐变来实现，于是，我对渐变产生了兴趣，决定好好掌握css3中的这个属性。结合《CSS揭秘》、张鑫旭大神的深入理解CSS3gradient斜向线性渐变和CSS3radi... 继续阅读 >
2018
01-16

JS设计模式入门和框架中的实践

在编写JS代码的过程中，运用一定的设计模式可以让我们的代码更加优雅、灵活。下面笔者就结合诸如redux的subscribe、ES6的class、vue里面的$dispatch、jquery里面的on/off来给大家简单介绍下设计模式在这些库、语法和框架中的使用。设计模式解决的问题设计模式并不是很玄乎的知识，很多同学在编写JS代码的时候已经在不经意间用了不少设计模式了。笔者认为把设计模式单独抽象出来探讨，就和算法中抽象出来冒泡、... 继续阅读 >
2017
12-28

深入浅出 JS 异步处理技术方案

为什么要异步"当我们在星巴克买咖啡时，假设有100个人在排队，也许咖啡的下单只要10S，但是咖啡的制作到客人领取咖啡要1000S。如果在同步的场景下，第一个客人下单到领取完咖啡要1010S才能轮到下一个客人，这在效率（某些场景）上来说会比较低下。如果我们异步处理这个流程，客人下单10S拿到凭证，客人就可以去做别的事情，并且10S后下一个客人可以继续下单，并不阻碍流程。反而可以通过凭证，让客人拿到自己的咖啡，也许时... 继续阅读 >
2017
12-20

2018 年你应该知道的 Vue.js 的 11 个组件库

2018年来临之际，继最热的React组件库和Angular组件库之后，这里有11个流行和实用的Vue.js组件库完善你的下一个用Vue.JS编写UI界面的应用程序。与React和Angular不同的是，Vue.js是EvanYou通过众包（ crowd-sourcing）来维护的一个开源项目。这也是Vue.js最好的一部分，因为会鼓励你写出更好的代码和更好的文档。Vue.js项目在得到8万多个star的时候，Adobe，Gitlab和其他公司... 继续阅读 >
2017
12-20

CSS工程化演进

CSS技术的演进CSS是Web开发中不可或缺的一部分，在前端工程化的不断进步的今天，一方面在CSS特性随着规范的升级越来越丰富，另一方面，前端业务复杂性的增加带来的工程愈加庞大，驱使者开发者不断寻找CSS工程化的最佳实践。Web开发模块化趋势不可否认，无论从现代前端框架（React，Vue，Angular，Polymer等），还是从W3C的WebComponents草案看来，组件化已经是前端开发的主流之选和未来的发展方向，正... 继续阅读 >
2017
12-20

老司机常用的几个JavaScript调试技巧

1.debugger除了console.log,debugger是我们最喜欢、快速且肮脏的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。if(thisThing){debugger;}2.用表格显示对象有时，有一组复杂的对象要查看。可以通过console.log查看并滚动浏览，亦或者使用console.table展开，更容易看到正在处理的内容！varanimals=[{animal:'Horse',name:'Henry',ag... 继续阅读 >
2017
12-17

Github分享：精心收集的48个JavaScript代码片段，仅需30秒就可理解！

该项目来自于Github用户Chalarangelo（文末有项目完整地址，原版为英文），目前已在Github上获得了3000多Star，精心收集了多达48个有用的JavaScript代码片段，该用户的代码可以让程序员在30秒甚至更少的时间内理解这些经常用到的基础算法，来看看这些JavaScript代码都传达出了什么吧！Anagramsofstring（带有重复项）使用递归。对于给定字符串中的每个字母，为字母创建字谜。使用map（）将字母与每部分字谜组合，... 继续阅读 >
2017
12-17

解读 JavaScript 之 V8 引擎及优化代码的 5 个技巧

几个星期前，我们开始了一系列旨在深入研究JavaScript及其实际工作方式的系列文章：我们认为通过了解JavaScript的构建块以及它们如何一起协作的，你将能够编写更好的代码和应用程序。本系列的第一篇文章重点介绍了引擎，运行时和调用堆栈的概述。第二篇文章将深入到GoogleV8JavaScript引擎的内部。我们还将提供一些关于如何编写更好的JavaScript代码的快速技巧-我们的 SessionStack开发团队在构建产品时... 继续阅读 >
2017
12-13

67 个拯救前端开发者的工具、库和资源 - SDK.CN - 中国领先的开发者服务平台

67个拯救前端开发者的工具、库和资源摘要：在本文中，我不会去谈React、Angular、Vue等等这些大的前端框架，也不会谈Atom、VScode、Sublime等等这些已经很出名的代码编辑器，我只是想简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过，也可能没见过，如果有哪个/些让你眼前一亮，那么我的分享就很值了。本文由myvin在众成翻译平台翻译。在本文中，我不会去谈React... 继续阅读 >
2017
12-08

ES6和Babel你不知道的事儿

因babel的版本从5升级到6有很多改动，比如babel本身不再提供任何transform的工作，都需要借助插件来完成，本文的所有讨论都是建立在babel6之上的。如果只想看结论，直接跳到文章最后。---写在前面ES6即ECMAScript6，是前端开发的JS最新规范，现在大家的开发都在使用ES6，对此并不陌生了。只是浏览器对ES6的支持并不完整，想要更好让ES6在各个平台完美运行还需一番折腾，特此一叙。下图是ES6的浏览器兼容性一览表（已ES6... 继续阅读 >
2017
12-08

WebSocket探秘

首先长连接：一个连接上可以连续发送多个数据包，在连接期间，如果没有数据包发送，需要双方发链路检查包。TCP/IP：TCP/IP属于传输层，主要解决数据在网络中的传输问题，只管传输数据。但是那样对传输的数据没有一个规范的封装、解析等处理，使得传输的数据就很难识别，所以才有了应用层协议对数据的封装、解析等，如HTTP协议。HTTP：HTTP是应用层协议，封装解析传输的数据。从HTTP1.1开始其实就默认开启了... 继续阅读 >
2017
12-06

四种常见的 POST 提交数据方式

HTTP/1.1协议规定的HTTP请求方法有OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT这几种。其中POST一般用来向服务端提交数据，本文主要讨论POST提交数据的几种方式。我们知道，HTTP协议是以ASCII码传输，建立在TCP/IP协议之上的应用层规范。规范把HTTP请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：BASH<method><request-URL><version><headers><entity-body>协议规定... 继续阅读 >
2017
12-06

这么多前端优化点你都记得住吗？

围绕前端的性能多如牛毛，涉及到方方面面，以下我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列。注意，是罗列不是展开，遇到不会不懂的点还请站外扩展。开车速度有点快，坐稳了。tips:这么多前端优化点你都记得住吗？反正我是收藏起来备查的。PC浏览器前端优化策略PC端优化的策略很多，如YSlow（YSlow是Yahoo发布的一款Firefox插件，现Chrome也可安装，可以对网站的页面性能进行分析，提... 继续阅读 >
2017
12-04

开发更好用的 JavaScript 模块

不少人都曾经在 npm 上发布过自己开发的JavaScript模块，而在使用一些模块的过程中，我经常产生“这个模块很有用，但如果能xxx就更好了”的想法。所以，本文将站在模块使用者的角度总结一下，如何能让模块变得更好用。提供ES6模块的入口webpack和rollup都支持对ES6模块做一些静态优化（例如 TreeShaking 和ScopeHoisting），它们都会优先读取package.json中的 module ... 继续阅读 >
2017
11-30

Lens: 从入门到再次入门

类型补全计画从上一篇我们可以看出，Lens就是整合在一起的 Getter 和 Setter ，借助 set , over , view 这三个函数，我们可以分别使用Lens的 Getter 和 Setter 。但是我们目前的Lens类型定义并不是完整的，因此我们首先对Lens的类型进行补全。typeLenssa=Functorf=>(a->fa)->(s->fs)首先让我们看这样一个例子：... 继续阅读 >
2017
11-30

Vue 升级小记

Vue升级小记最近接手了一个Vue1.0的陈年老项目，需要将其升级到Vue2.0。下面记录一下升级过程：安装迁移工具首先需要安装 vue-migration-helper CLI工具：控制台运行命令： npminstall--globalvue-migration-helper CLI工具来帮助项目从Vue1.x迁移到2.x。它扫描文件以查找特定于Vue的代码，并对需要升级的代码提供详细的警告。 vue-migration-helper ... 继续阅读 >
2017
11-29

10个有趣的Javascript和CSS库-2017年11月

TailwindCSSTailwind是用于构建自定义用户界面的实用CSS框架。每个Tailwind小应用都有多种尺寸，这使得创建响应式界面变得非常简单。您可以自定义颜色，边框尺寸，字体，阴影等等，没有任何限制。PrettyCheckbox这是一个纯CSS库，用于创建漂亮的复选框和单选按钮。它提供了不同的形状（正方形，曲线，圆形），选择方式（默认，填充，thick），颜色（主要，成功，信息），颜色类型（实心，轮廓）和动画。... 继续阅读 >