分类：WEB开发

2019
01-03

2018 年浏览器混战：为什么技术救不了 Edge？

随着微软正式确认放弃Edge，并基于Chromium引擎重启新的浏览器，我想借此机会分享一些有关当前Web浏览器格局的想法。Edge：注定要失败在推出3年之后，从市场份额来看，Edge无疑是失败的。根据用户的使用数据来看，它的份额仅为4-5％。这个数字居然是来自一家半垄断运营桌面操作系统的公司，而它曾经拥有80-90％的市场份额，几乎是完全垄断的。更糟糕的是，如果再算上移动市场，市场份额急剧下降至2％... 继续阅读 >
2019
01-03

前端模块化详解(完整版)

前言在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS,AMD,... 继续阅读 >
2019
01-03

ES6核心特性

前言ES6虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效！一、开发环境配置这部分着重介绍：babel编译ES6语法，如何用webpack实现模块化。1.babel为啥需要babel？ES6提供了许多新特性，但并不是所有的浏览器都能够完美支持。下图是各个浏览器对ES6兼容性一览表(以export为例)由上图可知，有些浏览... 继续阅读 >
2019
01-03

浅探前端图片优化

性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿、网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。不同格式图片优劣对比有人可能会问说好的图片优化呢？怎么说到图片格式了，其实在不同的场景选择使用不同格式的图片就是对图片的一种优化，这是最直接最重要但是最容易... 继续阅读 >
2018
12-13

2018年值得期待11个Javascript动画库

在浏览网页寻找一个整洁的Javascript动画库时，我发现很多“recommended”的动画库一段时间都没有维护。经过一些研究，我收集了11个最好的库，在你的应用程序中使用。我还添加了一些，主要是非维护的，有用的库。使用UI组件时，您还可以使用Bit轻松地在不同应用程序之间共享这些组件，而不是复制粘贴它们，从不同项目进行更改并与其他项目协作。Bit-使用代码组件共享和构建_Bit可帮助您在项目和应... 继续阅读 >
2018
12-07

如何优雅处理前端异常？

前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。一、为什么要处理异常？异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。1.增强用户体验；2.远程定位问题；3.未雨绸缪，及早发现问题；4.无法复线问题，尤其是移动端，机型，系统都是问题；5.完善的前端方案，前端监控系统；对于JS而言，我们面对的仅仅只是异常，异常的出现... 继续阅读 >
2018
12-03

jQuery的没落和技术发展的一般规律

jQuery的成就jQuery是一个伟大的库，它解决了domapi兼容的问题，使得dom操作更简便它支持类似css选择器的方式来选择组件支持批量的操作数组中的元素，也叫隐式迭代支持链式操作，可以在一条语句中完成很复杂的逻辑有易于使用的插件扩展机制deffered的异步方案比promise更早。等等。jquery可以说在dom操作领域做的很棒了，几乎统治了一个时代，甚至影响了w3c，domapi中的querySelector就有j... 继续阅读 >
2018
11-16

JavaScript 箭头函数：适用与不适用场景

现代JavaScript中最引人注目的功能之一是引入了箭头函数，用 => 来标识。这种函数有两大优点–非常简洁的语法，和更直观的作用域和 this的绑定。这些优点有时导致箭头函数比其他形式的函数声明更受欢迎。例如，受欢迎的 airbnbeslint配置 会在您创建匿名函数时强制使用JavaScript箭头函数。然而，就像工程中的任何东西一样，箭头函数优点很明显，同时也带来了一些负面的东西。使用他们的时候... 继续阅读 >
2018
11-13

2018回顾前端技术清单

2018眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成体系、相互串联。最后有一种东懂一块，西了解一点的感觉。因此，我结合工作体会抽象出了一些前端基础技... 继续阅读 >
2018
10-13

JavaScript和JSON创建者对JavaScript未来的展望

近期在伦敦召开的FullStack大会上，BrendanEich和DouglasCrockford分别做演讲探讨了JavaScript的未来。Eich是JavaScript的创建者；Crockford是JSON的创建者，也是《JavaScript语言精粹》（“JavaScript:TheGoodParts”）一书的作者。Eich的大会演讲主要聚焦于一些需迭代改进的语言特性。Crockford引导听众聚焦于JavaScript软件工程的下一步发展，他称之为一种全球分布的、安全的异步编程模式。Crockford指出，包... 继续阅读 >
2018
09-13

JavaScript性能优化小窍门实例汇总

在众多语言中，JavaScript已经占有重要的一席之地，利用JavaScript我们可以做很多事情，应用广泛。在web应用项目中，需要大量JavaScript的代码，将来也会越来越多。但是由于JavaScript是一个作为解释执行的语言，而且它的单线程机制，决定了性能问题是JavaScript的弱点，也是开发者在写JavaScript的时候需注意的一个问题。因为经常会遇到Web2.0应用性能欠佳的问题，主因就是JavaScript性能不足，导致浏览器... 继续阅读 >
2018
08-30

漂在旧金山

旧金山是美国房价最高的城市，因为它就在硅谷旁边，有大量的科技公司。每年，无数年轻人涌向那里，寻找自己的梦想，结果形成了一个类似"北漂"的特殊群体。昨天，我读到美国Salon杂志的一篇文章，关于旧金山普通程序员的生活。读完很有感触，就把它翻译了出来。硅谷不仅仅是光鲜亮丽的科技巨头，更多的是努力奋斗的普通程序员。================================漂在旧金山原载salon.com译者... 继续阅读 >
2018
08-28

JavaScript 引擎基础：原型优化

本文就所有JavaScript引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于V8引擎。作为一名JavaScript开发者，深入了解JavaScript引擎是如何工作的将有助于你了解自己所写代码的性能特征。在前一篇文章中，我们讨论了JavaScript引擎是如何通过Shapes和InlineCaches来优化对象与数组的访问的。本文将介绍优化流程中的权衡与取舍，并对引擎在优化原型属性访问方面的工作进行介绍。原文JavaScript... 继续阅读 >
2018
08-28

小程序开发实践总结 - WEB前端

从微信发布小程序以来，各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。我司也不例外，我们整个前端团队这半年来基本上都是在开发小程序。前前后后也开发了四五个小程序了。总觉得要留下点什么，既是记录那些年我们踩过的坑，也是希望大家别再掉坑。那些年我们踩过的坑css样式不能引用本地图片资源，只能引用线上资源( background-image )，引用本地图片资源只能用 <image> 标签。{{}... 继续阅读 >
2018
08-21

JS传参技巧总结

1.隐式创建html标签<inputtype="hidden"name="tc_id"value="{{tc_id}}">这种方法一般配合ajax，上面的value使用了模板引擎2.window['data']window['name']="thewindowobject";3.使用localStorage，cookie等存储window.localStorage.setItem("name","xiaoyueyue");window.localStorage.getItem("name")特点：1、localStorage是持久存储，不主动删除一直存在sessionStorage是临时存储,关闭浏览... 继续阅读 >
2018
08-08

同样是晶体管，为什么寄存器比内存快呢？

计算机的存储层次（memoryhierarchy）之中，寄存器（register）最快，内存其次，最慢的是硬盘。同样都是晶体管存储设备，为什么寄存器比内存快呢？MikeAsh写了一篇很好的解释，非常通俗地回答了这个问题，有助于加深对硬件的理解。下面就是我的简单翻译。原因一：距离不同距离不是主要因素，但是最好懂，所以放在最前面说。内存离CPU比较远，所以要耗费更长的时间读取。以3GHz的CPU为例，电流每... 继续阅读 >
2018
08-08

SVG 图像入门教程

一、概述SVG是一种基于XML语法的图像格式，全称是可缩放矢量图（ScalableVectorGraphics）。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。SVG文件可以直接插入网页，成为DOM的一部分，然后用JavaScript和CSS进行操作。<!DOCTYPEhtml><html><head></head><body><svgid="mysvg"xmlns="http://www.w3.org/2000/sv... 继续阅读 >
2018
08-08

网上JS正则基础教程没有涉及的一些知识

正则起源最近看完了《精通正则表达式》，收获颇丰，略过了一些晦涩难懂的理论部分，主要看了实战和教程部分。下面引用一下百度百科里的内容。正则表达式的“鼻祖”或许可一直追溯到科学家对人类神经系统工作原理的早期研究。美国新泽西州的WarrenMcCulloch和出生在美国底特律的WalterPitts这两位神经生理方面的科学家，研究出了一种用数学方式来描述神经网络的新方法，他们创造性地将神经系统中的神经... 继续阅读 >
2018
08-08

重读 ES6 - async+await 同步/异步方案

异步编程一直是JavaScript编程的重大事项。关于异步方案，ES6先是出现了基于状态管理的Promise，然后出现了Generator函数+co函数，紧接着又出现了ES7的async+await方案。本文力求以最简明的方式来疏通async+await。异步编程的几个场景先从一个常见问题开始：一个for循环中，如何异步的打印迭代顺序？我们很容易想到用闭包，或者ES6规定的let块级作用域来回答这个问题。for(let... 继续阅读 >
2018
08-08

javascript引擎工作原理

1.什么是JavaScript解析引擎？简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 vara=1+1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。学过编译原理的人都知道，对于静态语言来说（如Java、C++、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样的... 继续阅读 >
2018
08-08

CSS 的空格处理

一、空格规则HTML代码的空格通常会被浏览器忽略。<p>◡◡hello◡◡world◡◡</p>上面是一行HTML代码，文字的前部、内部和后部各有两个空格。为了便于识别，这里使用半圆形符号◡表示空格。浏览器的输出结果如下。helloworld可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。如果希望空格原样输出，可以使用<pre>标签。<pre>◡◡hello◡◡world◡◡</pre>另... 继续阅读 >
2018
07-10

Web Worker 使用教程

一、概述JavaScript语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核CPU的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。WebWorker的作用，就是为JavaScript创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。在主线程运行的同时，Worker线程在后台运... 继续阅读 >
2018
06-20

JavaScript 的 this 原理

一、问题的由来学懂JavaScript语言，一个标志就是理解下面两种写法，可能有不一样的结果。varobj={foo:function(){}};varfoo=obj.foo;//写法一obj.foo()//写法二foo()上面代码中，虽然obj.foo和foo指向同一个函数，但是执行结果可能不一样。请看下面的例子。varobj={foo:function(){console.log(this.bar)},bar:1};varfoo=obj.foo;varbar=2;obj.foo()//1foo()//2这种差异的原因，就在于... 继续阅读 >