分类目录归档：WEB开发

2018
04-03

前端静态资源缓存最优解以及max-age的陷阱

合理的使用缓存可以极大地提高网站的性能优势，还可以节约带宽从而降低服务器成本。但是很多站点有只弄对了一半或者一半都没有，如果是这样，就完全没有发挥出缓存的优势。很大程度上产生会由于静态资源的竞争关系而导致依赖的静态资源不同步。以下为两个最佳静态资源缓存实践的例子。一、资源内容不变+设置长时间max-age//设置缓存时间为1年Cache-Control:max-age=31536000资源的内容不会更改，所以。。。... 继续阅读 >
2018
03-28

JavaScript：面试频繁出现的几个易错点

1.前言这段时间，金三银四，很多人面试，很多人分享面试题。在前段时间，我也临时担任面试官，为了大概了解面试者的水平，我也写了一份题目，面试了几个前端开发者。在这段时间里面，我在学，在写设计模式的一些知识，想不到的设计模式的这些知识，就是面试题里面，频繁让人掉坑的考点。所以，今天就总结一下，那些让人掉坑的考点。2.面向对象编程关于面向对象和面向过程，个人觉得这两者不是绝对独立的，而是相互... 继续阅读 >
2018
03-26

Nerv - 京东高性能前端框架

Nerv是一款由京东凹凸实验室打造的类React前端框架。目前已广泛运用在京东商城（JD.COM）核心业务及TOPLIFE全站。Nerv基于React标准，使用VirtualDom技术，拥有和React一致的API与生命周期，如果你已经对React使用非常熟悉，那么使用Nerv开发对你来说绝对是零学习成本。与此同时，相比于React以及市面其他同类型框架，Nerv更具体积轻量，性能高效的特点。并且，它符合当下国情，可以完美兼容IE8及... 继续阅读 >
2018
03-23

200行 JS 代码实现区块链

原文Ablockchainin200linesofcode译者：若愚，来自饥人谷,更多好文，关注“饥人谷”公众号区块链的基本概念非常简单：一个分布式数据库维持不断增长的有序记录列表。然而当我们谈论区块链时，我们也会谈论我们用区块链所要解决的问题，这二者通常很容易弄混淆。流行的基于区块链的项目如比特币和以太坊就是这种情况。术语“区块链”通常与交易、智能合约或加密货币等概念紧密相关。这使得理解区块链... 继续阅读 >
2018
03-23

手拉手，用Vue开发动态刷新Echarts组件

需求背景：dashboard作为目前企业中后台产品的“门面”，如何更加实时、高效、炫酷的对统计数据进行展示，是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始，封装一个动态渲染数据的Echarts折线图组件，抛砖引玉，一起来思考更多有意思的组件。准备工作项目结构搭建因为生产需要（其实是懒），所以本教程使用了==vue-cli==进行了项目的基础结构搭建。npminstall-gvue-clivueinitwebpack... 继续阅读 >
2018
03-12

面试分享：2018阿里巴巴前端面试总结(题目+答案)

1、使用css实现一个持续的动画效果animation:mymove5sinfinite;@keyframesmymove{from{top:0px;}to{top:200px;}}主要考：animation用法值描述animation-name规定需要绑定到选择器的keyframe名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count... 继续阅读 >
2018
03-12

React 是怎样炼成的

本文主要讲述React的诞生过程和优化思路。内容整理自2014年的OSCON-ReactArchitecturebyvjeux，虽然从今天（2018）来看可能会有点历史感，但仍然值得学习了解。以史为鉴，从中也可以管窥Facebook优秀的工程管理文化。字符拼接时代-2004时间回到2004年，MarkZuckerberg当时还在宿舍捣鼓最初版的Facebook。这一年，大家都在用PHP的字符串拼接（StringConcatenation）功能来开发网站。... 继续阅读 >
2018
03-12

面试的信心来源于过硬的基础

在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等，想着在开年来换一份工作来重新开始自己，那么你准备好了吗？下面是本人整理的一份面试材料，本想自己用的，但是新年第一天公司突然给了我个惊喜，涨工资了！！！1、viewport<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>//width设置view... 继续阅读 >
2018
03-12

JavaScript中this的运行机制及爬坑指南

在JavaScript中，this这个特殊的变量是相对比较复杂的，因为this不仅仅用在面向对象环境中，在其他任何地方也是可用的。本篇博文中会解释this是如何工作的以及使用中可能导致问题的地方，最后奉上最佳实践。为了更好理解this，将this使用的场景分成三类：在函数内部this一个额外的，通常是隐含的参数。在函数外部（顶级作用域中）：这指的是浏览器中的全局对象或者Node.js中一个模块的输... 继续阅读 >
2018
02-27

2018 年 Web 开发者路线图：最全的教程、资源和在线课程

编者按：WEB开发是一个非常热门的职业。该工作的技术性很强,它需要你必须不停地提高、不断地加强,才不会被别人比下去,才能保住饭碗。看了以下文章，希望对你提高技能能有一些帮助。本文编译自BrandonMorelli在Medium上发表的文章The2018WebDeveloperRoadmap。想学习代码？没有比现在更好的时候了。下面是一个关于在2018年如何成为一名网络（Web）开发人员的路线图。不要让这些图片吓倒你。要想成为一位优秀的开发... 继续阅读 >
2018
02-22

来自1000多个项目的10大JavaScript错误浅析

作为对社区开发者的回馈，我们从我们的数据库里选出了10大来自数千个项目的JavaScript错误。我们将会给出产生这些错误的根源，以及如何避免再发生这些错误。如果能够避免这些错误，就可以成为更好的开发者。数据才是王道，我们通过收集和分析大量数据才选出了这10大JavaScript错误。我们收集每一个项目中出现的错误，并统计每一个错误发生的次数。我们根据错误代码的指纹（fingerprint）对它们进行分组，也就是说，如果第二... 继续阅读 >
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草案看来，组件化已经是前端开发的主流之选和未来的发展方向，正... 继续阅读 >