![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 75
Sheldon_Law
"If not fun, why do it?"
展开
-
浅谈图片加载:逐行扫描VS交错扫描
一,前言最近在不断地扩充自己web开发的知识面,看得比较泛,难得五一假期就在学习之余实践一下,毕竟纸上得来终觉浅,况且“纸上”的不一定都对,之前看了一篇博客讲图片加载的,博主大概是淘宝前端团队的吧,讲得很透彻,分享一下: 图片格式与设计那点事儿虽然是10年的文章了,但是鉴于图片格式近几年并没有大的改动,而且博主讲得比较透彻,所以很有参考价值。本篇博客只是对上面博客的验证以及在rails上的实践原创 2016-05-01 12:30:32 · 11757 阅读 · 0 评论 -
Vue.js组件开发从1到100
100 如果说从0到1是解决温饱的过程,那么从1到100就是实现共同富裕的漫漫长路。认真看过Vue.js官方文档和《Vue.js组件开发从0到1》的同学相信已经能胜任正常的业务开发了,但就像前文中提到的“实现同样一个小功能,可以有千万种写法”,作为一个积极向上的程序猿,我们始终在思考怎样才能写出优雅的代码,也就是更适合当前业务场景的代码。本文希望和大家共同探索学习如何从1到100优雅原创 2018-01-09 17:28:39 · 2927 阅读 · 0 评论 -
Vue.js组件开发从0到1
前言Vue.js凭借简洁高效易用的特点迅速被前端开源社区接受,并借助weex覆盖移动开发场景,逐步演变成一个完整的生态圈,未来充满想象。而组件化的出现是为了确保代码高内聚低耦合并实现高效复用,从而提升开发效率和降低维护成本。Vue.js提供了组件化解决方案,本篇文章将结合开发实践先从零开始探讨组件的意义以及设计组件需要考虑的问题,再向前迈一步,讲解Vue.js组件的各种开发方式及对比。原创 2018-01-05 20:55:03 · 841 阅读 · 0 评论 -
前端工程:apis接口封装实践
前言最近在学习Chromium内核blink部分的代码,感触比较深的是Chromium项目的代码组织实现,同样是C++代码,大二时候写的项目真是惨不忍睹,而Chromium的代码(blink部分,据说V8里面用了各种奇技淫巧)却清晰明了。印证了我同事的一句话: 语言、技术没有高低好坏之分,而写码水平却有高低好坏之别。“Talk is cheap, show me the code”,写码水平高原创 2017-01-10 18:06:53 · 4292 阅读 · 0 评论 -
asm.js:面向未来的开发
这是一个可深可浅的话题,会先简单介绍一下什么是asm.js,看看它长什么样子,再来聊聊asm.js为什么能带来高性能,会有一些简单的对比,然后再从工程的角度讲讲兼容性,如何打包使用等等。水平有限,肯定讲不透,就当是抛装引玉吧。What’s asm.js还记得前段时间的“围棋杀手”AlphaGo吧,设想一下,如果两台AlphaGo相遇,会擦出些什么火花?同样的算法,在同样的机器上跑,会是什么样的结果原创 2016-12-18 17:54:51 · 4017 阅读 · 0 评论 -
前端开发中Cookie那些事儿
前端开发中Cookie那些事儿转载声明之前对cookie只有基本的认识,直到今天遇到了cookie作用域的问题(前端写入的cookie在server端无法读取),才认真看了一下,其中看到这篇文章比较浅显易懂又算全面,作为学习资料转发一下,原文链接如下: 前端开发中Cookie那些事儿 作者:愚人码头原文前段时间做了项目,在前端实现中频繁的操作cookie,记录几点供大家参考!cookie转载 2016-11-25 00:01:36 · 879 阅读 · 0 评论 -
D3.js SVG绘图实践:波浪动画
效果图TALK IS CHEAP源码就50多行,比较好看懂。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>svg动画</title> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg i原创 2016-08-21 18:32:42 · 8115 阅读 · 1 评论 -
D3.js SVG绘图实践:趋势缩略图
前言写码,看书,思考,这周挺多感触的。因为手上的项目前端用了Angular,所以UI改版的时候考虑了Angular-material,学校的项目前端用了React,所以也想接入ant-design mobile的那套设计规范,这两个都是业界非常不错的UI库,看他们的文档都会让你觉得能使手上的web应用瞬间高大上起来。其实不然,即便是开源,也不是拿来就用那么美好,那晚尝试接入ant-design的轮播原创 2016-08-13 20:25:42 · 8907 阅读 · 0 评论 -
webpack + react 优化:缩小js包体积
一,前言学校这边的项目刚组建好开发团队,前一段时间都在考虑如何前后端分离,如何多人协作开发的问题,恰好上一周陪女朋友去承德写生,能暂时放下工作和学校的事物,有了更多的思考时间。假期期间学习了webpack,并将前端代码进行了迁移,实现了前后端分离。而最近上线的时候发现打包压缩后的js包达到了477k,首屏渲染时间高达4s,首屏渲染时间超过1.5s都是不能忍的,于是开始尝试研究一下webpack,毕竟原创 2016-06-04 12:07:47 · 29565 阅读 · 6 评论 -
前端性能优化:webpack分离 + LocalStorage缓存
一,优化背景上一篇关于webpack优化的文章webpack + react 优化:缩小js包体积谈到如何缩小webpack打包后的js代码体积,来减少网络请求数据量,这次尝试将第三方库(React,ajax等)从业务代码中分离出来,并且将分离出来的第三方库缓存在LocalStorage中。该次优化的出发点有下面两点: ①每次更改业务代码都会打包成新的bundle.js,前端需要抛弃以前的HTT原创 2016-09-16 18:18:11 · 7086 阅读 · 1 评论 -
前端性能优化利器:Chrome Timeline学习及实践
TimelineChrome相信是绝大部分前端工程师的基础开发调试环境,正所谓,工欲善其事必先利其器,当然这里说的不是打磨Chrome,说的是怎么用好Chrome。基础介绍在Chrome里打开(鼠标右键选择检查/Mac下CMD+option+i)开发界面,如上图。简单介绍一下各个tab对应的作用:Element:页面元素的选定,实时修改css样式。Console:查看程序输出信息。Source原创 2016-09-11 11:29:15 · 10183 阅读 · 0 评论 -
ReactJS修炼之路(四):组件的性能优化及开发思路
少年,加油昨天周五,那个喊我“少年”的朋友离职了去新加坡了,我的实习生涯又错过了一位大神,不过短短一个月还是被影响不少,例如入坑happy hacking keybord同时学习各类软件的快捷键,例如开始用sass,例如初次使用 flexbox…人生何处不相逢,谢谢你的指导,我会更加努力,也祝你更进一步,加油。回看,事情总有千丝万缕的联系,但是往前,都是迷雾,保持迷茫,保持思考,做好现在,是我最大原创 2016-08-06 22:09:03 · 2565 阅读 · 3 评论 -
基于svg mask实现的tab切换效果
效果第一次看到这个效果是在阿里妈妈MUX的博客:UI动效—细微交互,极致体验,里面搜集的一些微交互都让人眼前一亮,恰好自己最近要做一个按钮组,就参考了里面Sergey Valiukh的一个设计。源码和上两篇博客一样,相对简单,为了节省你的阅读时间,直接上源码: 上两篇博客: D3.js SVG绘图实践:趋势缩略图 D3.js SVG绘图实践:波浪动画<!DOCTYPE html>原创 2016-08-27 20:29:09 · 1385 阅读 · 0 评论 -
动画学习之Animate.css的使用与解析
近况近期生活比较单一。 const 提升自己 = true; while( 提升自己 ) { 写码 ... 看书 ... 思考 ... 睡觉 }既单一也充实,单一使我平静,充实使我保持向上的感觉,希望自己真难做到“持续学习,保持思考,不断进步”。最近看到腾讯ISUX团原创 2016-07-30 21:16:35 · 33168 阅读 · 5 评论 -
Safari不能正确解析yyyy-mm-dd
一,困惑昨天写代码遇到的一个bug,在chrome上显示得好好的时间,一到Safari就提示 “invalid date”,于是回来看代码(为了一目了然,进行一些处理):var deadline = new Date("2016-06-10 23:59");这行代码是将数据库中存的日期“2016-06-10”字符串转成Date对象。二,分析当看到日期格式是yyyy-mm-dd,我联想到了yyyy/m原创 2016-06-04 11:15:15 · 3119 阅读 · 0 评论 -
改进:js修改iOS微信浏览器的title
问题简介前端入门没多久,可能连入门也不算,最近网上流行各自书籍改名,什么《前端开发,从入门到放弃》,《Android开发,从入门到改行》之类的,程序员真是个爱自嘲的群体,但我们一定是积极而向上的。说到web前端,浏览器差异是不可回避的问题,这次的问题(知乎上的讨论)如下: 单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制ti原创 2016-04-20 00:44:15 · 6675 阅读 · 1 评论 -
Grunt: 监听文件修改及重启node服务器
Grunt简介Grunt官网Grunt中文Grunt是一个基于node.js的自动化构建工具,合理的设置grunt能帮助前端开发人员轻松完成诸如less、coffeescript编译,css、JavaScript压缩等基础而繁琐的工作,更多高级用法请自行探究。因为公司这边用的是基于百度fis3开发的自动化构建工具,所以没仔细研究Grunt,今天做项目的时候,因为每次修改完文件都要重启服务器才能原创 2016-04-20 00:05:44 · 2052 阅读 · 1 评论 -
简单A/BTest验证图片懒加载效果
视频等youku审核完后更新&amp;amp;amp;lt;iframe height=498 width=510 src=&amp;amp;quot;http://player.youku.com/player.php/sid/XMjc4ODUzNzE0NA==/v.swf&amp;amp;quot;&amp;amp;amp;gt;文章结构文章基本思路:“目的 =&amp;amp;amp;gt; 方案 =&原创 2018-11-08 19:53:05 · 431 阅读 · 0 评论