20170909 前端开发周报-前端开发博客

最全前端性能优化秘籍（二）；最全前端性能优化秘籍（一）；5分钟极速上手 CSS Grid；JS高级技巧；JavaScript 专题之函数记忆；你真的需要一个CSS实用工具集吗？；一篇文章讲清楚React的基础概念；不仅仅是面试，JavaScript 开发者都应该知道的十个概念

最全前端性能优化秘籍（二）上一章节中，我们提到了页面级别的优化前端性能，本章节，我们会继续详细介绍另外两类的优化：服务端优化和代码级优化。本文从页面级、服务器以及代码级三个粒度对前端优化的各种方式做了一个总结，这些方法基本上都是前端开发人员在开发的过程中可以借鉴和实践的，除此之外，完整的前端优化还应该包括很多其他的途径，例如 CDN、 Gzip、多域名、无 Cookie服务器等等。
最全前端性能优化秘籍（一）很多人通常在完成了产品之后才会去考虑性能。把与性能相关的事情拖到项目的最后来做，所做的也不过是对服务器上的config文件进行一些微调、串联、优化以及部分特别小的调整。而现在，技术已经有了翻天覆地的变化。一个项目的性能是非常重要的，除了要在技术层面上注意，更要在项目的设计之初就开始考虑，这样才可以使性能的各种隐形需求完美的整合到项目中，随着项目一起推进。
5分钟极速上手 CSS Grid 不少人开始对 CSS Grid 感兴趣并准备学习它。但许多人又忙的不行。我教你一点 CSS Grid 的基础知识，让你能5分钟就上手。

和我们以前使用的 Bootstrap 或其它布局框架不同，CSS Grid 不会应用在页面的所有元素上。

将一个指定的元素定义为 Grid。这个元素的所有子元素就会被放到 Grid 中。而页面中其它元素不会受到影响。

快想想把什么设置成 Grid 容器 (container) ，怎么布局 HTML 文档好让一些元素成为容器中的项目 (item) 吧。
JS高级技巧本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。
JavaScript 专题之函数记忆 JavaScript 专题系列第十七篇，讲解函数记忆与菲波那切数列的实现。函数记忆是指将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据。
你真的需要一个CSS实用工具集吗？让我们先来定义：一个CSS工具集库是一个拥有许多可用于做许多一次性小事的样式表。如调整margin和padding的类。设置颜色的类。设置具体样式属性的类。设置尺寸的类。工具集库会用不同的方式来实现这些东西,但更像是分享这种理念。
一篇文章讲清楚React的基础概念这篇文章不是讲什么是React，也不是为什么学习React。而是一篇介绍React的一些基本概念和原理，我假定你们都熟悉js也了解基本的DOM API。1: React皆组件 2: JSX的 “flux” 是多少? 3: 你可以在 JSX任何位置使用JS表达式 4: 你可以用JS class 来写React组件 5: React的事件: 两大不同 6: 每个组件都有一个生命周期 7: 每个组件都有一个私有状态state 8: React 将会响应你的变化 9: React是你的代理人
不仅仅是面试，JavaScript 开发者都应该知道的十个概念自学现在学习 JavaScript 和 Web 开发的人很多，他们都希望能凭此获得一份工作。然而，自学常常会使学习者对 JavaScript 语言本身的理解存在知识盲点。实际上，令人感到惊讶的是，他们只需要掌握很少的语言知识就能制作复杂的网页，然而这样通常不能很好掌握 JavaScript 的基础知识。使用基本的技能来实现功能…
jquery === 面条式代码？自从React/Vue等框架流行之后，jQuery被打上了面条式代码的标签，甚至成了“过街老鼠”，好像谁还在用jQuery，谁就还活在旧时代，很多人都争先恐后地拥抱新框架，各大博客网站有很大一部分的博客都在介绍新的框架，争当时代的“弄潮儿”。新框架带来的新的理念，新的开发方式不可否认带来了生产效率，但是jQuery等就应该被打…
js 深拷贝 vs 浅拷贝本文思维导图如下：本文思维导图本文首发于我的个人博客：cherryblog.site/ 前言最近在读 zepto 的源码，深有感触，感觉随便一段代码都可以延伸出一大堆的知识点，在看到深拷贝和浅拷贝的时候，之前只是了解过什么是深拷贝什么是浅拷贝，并没有对齐实现进行探索，所以本文主要讲一下什…
Angular vs React：谁更适合前端开发 Angular vs React：谁更适合前端开发大家总在写文章争论，Angular 与 React 哪一个才是前端开发的更好选择（译者：在中国还要加上 vue :P）。我们还需要另一个吗？我之所以写这篇文章，是因为这些发表的文章 —— 虽然它们包含不错的观点 —— 并没有深入讨论作为一个实际的前端开发者应该选取哪种框架来满足自己的…
20张详解前端开发工程师思维导图谱
67 个拯救前端开发者的工具、库和资源在本文中，我不会去谈 React、Angular、Vue 等等这些大的前端框架，也不会谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器，我只是想简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过，也
【CSS布局方案】我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！全文=> 　　我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！　居中布局　　以下居中布局均以不定宽为前提，定宽情况包含其中　　1、水平居中　　a) inline-block + text-align .parent{ text-align: center; } .child{ display: inline-bloc…
巧妙利用CSS3实现太阳系行星公转运动轨迹巧妙利用CSS3实现太阳系行星公转运动轨迹前段时间在博客园看到一篇很不错的文章，就是介绍如何用CSS3来实现太阳系中行星的运动。本小姐处于好奇心从头到完整的看完了。突然发现好奇不仅仅害死猫，也可以增长知识嘛（你这
vue-easytable ——强大的 vuejs table 组件 vue-easytable 是基于 vue2.x 的 table 组件。主要功能自适应，可以随着浏览器窗口改变自动适应固定列，表头固定列宽拖动（默认支持）排序，支持单个、多个字段排序自定义列、自定义单元格样式、loading效果等自带分页组件安装 npm install vue-easytable –save-dev…
CSS3 常见的动画效果前言由于 CSS3 的推出，让有些动画不在以 JS 来实现，仅仅依靠 CSS 就可以实现许多动画效果。提高了性能同时，又增加了很多趣味性。接下来我会持续更新大家常用到的CSS效果，供大
Riot 3.7.0 发布，JavaScript 的 MVP 框架 Riot 3.7.0 已发布，Riot.js 是一个客户端模型-视图-呈现(MVP)框架并且它非常轻量级甚至小于 1kb。尽管他的大小令人难以置信，所有它能构建的有如下：一个模板引擎，路由，甚至是库和一个严格的并具有组织的 MVP 模式。当模型数据变化时视图也会自动更新。本次更新如下： riot 3.7.0 September 2, 2017 …
Web 开发者需要知道的 12 个终端命令终端是开发人员的军火库中最重要的生产力工具之一。把它掌握好了可以对你的工作产生非常积极的影响，比如许多的日常任务就可以简化到只需要编写简单的命令然后按一下 Enter 就可以了。本文我们会为你奉上一系列的 Unix 命令，它们可以帮助你充分地利用好终
使用 Vue2.js + Node.js 搭建一个小型的全栈项目由于最近公司业务不是很忙，空闲时间比较多，于是就在纠结Vue.js（之前就学习过）和Node.js先专研哪个比较好，最终选择了先玩玩Node.js。经过一段时间的学习，就有了教程 Node+Koa2+Mysql 搭建简易博客 GitHub地址，想要了解的可以先由于最近公司业务不是很忙，空闲时间比较多，于是就在纠结Vue.js（之前就学习过）和Node.js先专研哪个比较好，最终选择了先玩玩Node.js。经过一段时间的学习，就有了教程 Node+Koa2+Mysql 搭建简易博客 GitHub地址，想要了解的可以先
【整理】CSS布局方案我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！以下所有demo的源码github：https://github.com/zwwill/css-layout/tree/master/demo-1链接: http://pan.baidu.com/s/1cHBH…
html2canvas html截图插件图片放大清晰度解决方案，支持任意放大倍数，解决原插件图片偏移问题 html2canvas html截图插件图片放大清晰度解决方案，支持任意放大倍数，解决原插件图片偏移问题 Author:youzebin (2016.12.6)插件下载地址：https://github.com/
JavaScript 运算符规则与隐式类型转换详解 JavaScript 运算符规则与隐式类型转换详解从属于笔者的现代 JavaScript 开发：语法基础与工程实践系列文章，主要探讨 JavaScript 中令人迷惑的加减乘除与比较等常见运算中的规则与隐式类型转换；本文中涉及的参考资料全部声明在了 JavaScript 数据结构学习与实践资料索引。隐式类型转换在 JavaScript…
Javascript基础算法：入门篇好久不见：这是一份常用的javascript简易算法作为一个曾经的ruby后端，我在学习javascript时经历了不少挫折。像merge,flatten,uniq这些基础方法貌似都从我的视线中消失了。然后我发现了loadsh, 嗯，它非常
Vue 进阶教程之：非父子组件通信方法（非Vuex）一提到两个非父子组件通信方法，有经验的 coder 肯定会说用 Vuex 啊，我个人建议不要为了用 Vuex 而用 Vuex，除非你的项目很大，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。当然还是要根据自己的业务场景的来决定，总之还是那句话，不
前端每周清单半年盘点之 CSS 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前
开源项目 Node.js 再次社交分裂，原因是领导层不当言论这年头开放原始码软件越来越受到大家瞩目，各开源社交也蓬勃发展，然而如何维系一大群志愿者就是学问了，有的社交做得很成功，有的社交则否。Node.js 社交近年来一直有领导与治理的难题，继 3 年前技术选择的分裂（Io.js）再复合以后，8 月底又发生第二次大分裂，缘由为是否遵守社交行为守则。 Node.js 是近几年开…
如何学习Vue2源码近期我们把微信公众平台管理端的前端框架切成 MVVM 架构，框架层面最终我们选择了 Vue ，为了更了解 Vue，阅读Vue源码是必要的。我参考的 Vue 版本是 2.2.0 ，整个项目的代码1万2千行，如果不搞清楚原理，直接每一行看下来肯定会漏掉不少细节，或者对作者为什么这样写代码感到莫名其妙。如此庞大的项目…
2018阿里前端校招分享(笔试篇)| 掘金技术征文阿里的招聘相比较于其他公司来说真的算早的，据说社招基本不招前端，招也是P6水平级别的，有幸赶上研究生的校招，算是体会了阿里的高水准 1笔试简历投了之后，就是笔试了，收到笔试的邮件通知的时候在敲代码，平时一直在做项目，基本没有复习什么题目，心里还是很紧张的。
聊聊用 Git 协同合作的事儿说起来在来到公司之前一直没有好好用 Git 来管理分支。之前做一些课程设计和玩具项目的时候虽然有用到 Git，但是也仅限于本地仓库的提交而已。这样做更多的只是留下一个可供追寻的路径（ History ），没有太多的“管理”职能。在多人协同合作的项目中，Git 终于发挥出它强大的优势。所以我猜想，是不是有不少像…
#CSS#【css专题学习-浏览器兼容性问题目录】此帖是我所分享的浏览器兼容性问题相关的所有目录。【分享】浏览器兼容性问题综述 — 正确的认识浏览器兼容性问题【分享】你的元素居中对齐了吗？ — 关于 ‘text-align：cen…请戳→ #前端开发博客#
个人小结–javascript实用技巧和写法建议 1.前言从大学到现在，接触前端已经有几年了，感想方面，就是对于程序员而言，想要提高自己的技术水平和编写易于阅读和维护的代码，我觉得不能每天都是平庸的写代码，更要去推敲，去摸索和优化代码，总结当中的技巧，积极听取别人的建议，这样自己的技术水平会提高的更快。那么今天，我在这里就分享一下关于javascript…
JS 遇上 IOT 1995年，当工作于 Netscape 的 Brendan Eich着手为Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言时，没有人会想到avascript将在今天的互联网软件开发中发挥重要作用。如今，Javasc 1995年，当工作于 Netscape 的 Brendan Eich着手为Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言时，没有人会想到avascript将在今天的互联网软件开发中发挥重要作用。如今，Javasc
从Vue.js源码角度再看数据绑定写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址： github.com/answershuto… 。在学习过程中，为Vue加上了中文的注释 github.com/answershuto… ，希望可以对其他想学习Vue源码的小伙伴有所帮助。可能会有…
通过JS判断网络状态调研及实例demo说明官方文档 English Document demo地址 http://mjs.sinaimg.cn/wap/online/cm
算法实践（JS 实现）目录一、排序冒泡排序选择排序插入排序希尔排序归并排序快速排序堆排序二、查找二分查找三、其他求区间问题求第K大元素寻找两数之和为sum的元素 …
深究 JavaScript 数组 —— 演进&性能深究 JavaScript 数组 —— 演进&性能作者：Paul Shan 原文：Diving deep into JavaScript array – evolution & performa