-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
12 lines (12 loc) · 9.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><title> Boelroy</title><meta name="description" content="A Blog Powered By Hexo"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/favicon.png"><link rel="stylesheet" href="/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="http://blog.boelroy.com/atom.xml" title="Boelroy"></head><body><div class="wrap"><header><a href="/" class="logo-link"><img src="/favicon.png" alt="logo"></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/" target="_self" class="nav-list-link active">BLOG</a></li><li class="nav-list-item"><a href="/archives/" target="_self" class="nav-list-link">ARCHIVE</a></li><li class="nav-list-item"><a href="https://www.instagram.com/boelroy/" target="_blank" class="nav-list-link">INSTAGRAM</a></li><li class="nav-list-item"><a href="https://github.com/Boelroy" target="_blank" class="nav-list-link">GITHUB</a></li><li class="nav-list-item"><a href="/atom.xml" target="_self" class="nav-list-link">RSS</a></li></ul></header><main class="container"><ul class="home post-list"><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2018/02/25/javascript-array-init-performance/" class="post-title-link">数组初始化为0体位的性能测试</a></h2><div class="post-info">Feb 25, 2018</div><div class="post-content"><p>数组应该是在JavaScript最常用的数据结构之一，我们有很多种方式来初始化一个数组。但是 JavaScript 怎样把一个数组的所有元素初始化为0 最有效率？为了得出答案，我们做了一下测试：</p>
<p>我们将在 Node 下(Node.js 版本 v8.4.0)初始化一个长度为 100 万的数组，来对比他们的性能。<br></div><a href="/2018/02/25/javascript-array-init-performance/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2016/10/15/javascript/介绍/" class="post-title-link">Flex Spec 翻译</a></h2><div class="post-info">Oct 15, 2016</div><div class="post-content"><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>CSS 2.1 已经定义了四种布局模式：</p>
<blockquote>
<p>block 布局，是为了布局文档设计的（design for laying out document）<br>inline 布局， 是为了布局文本设计的<br>table 布局，以为了以表格的形式展示 2D 数据设计的<br>positioned 布局，是为了显示在文档中完成元素的定位而设计的，这种布局不用顾忌其他元素在文档中的位置。</p>
</blockquote>
<p>这个W3C的文档介绍了一种新的布局模式，flex layout, 这种布局模式是为了更加复杂的web应用和网页设计的。<br></div><a href="/2016/10/15/javascript/介绍/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2016/04/18/javascript/2016-04-18-network-optimise/" class="post-title-link">那些前端优化技术背后的原理1</a></h2><div class="post-info">Apr 18, 2016</div><div class="post-content"><h3 id=""><a href="#" class="headerlink" title=""></a><a href="/pics/Speed-up.png"><img src="/pics/Speed-up.png" alt="speed-up"></a></h3><p>现在我们在开发一个网页的时候有很多的优化的最佳实践，诸如将Javascript放在文档的底部。很多时候我们已经将这个最佳实践当成了习惯，其实探究这些方法背后的原理还是挺好玩的一件事。当然在这里Google给出了很详细的文章<a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=en" target="_blank" rel="noopener">说明</a></p>
<p>前端页面的优化其实需要从很多地方来考虑，但是优化的基础就是先弄清楚浏览器是如何展现一个页面的。明白了整个过程，当然知道了性能的瓶颈在哪里，当然也自然知道该如何针对性的去优化。</p>
<h2 id="Critical-Rendering-Path"><a href="#Critical-Rendering-Path" class="headerlink" title="Critical Rendering Path"></a>Critical Rendering Path</h2><p>当然<code>当你在浏览器中按下回车键到页面展现的整个过程</code>是一个很远古的面试问题，这个 <a href="https://github.com/alex/what-happens-when" target="_blank" rel="noopener">github repo</a> 很清楚而且详细的探究了整个过程。这里重点强调一下整个页面渲染的过程。<br></div><a href="/2016/04/18/javascript/2016-04-18-network-optimise/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2016/03/15/javascript/2015-03-15-promise/" class="post-title-link">给我一个承诺，还你一个未来</a></h2><div class="post-info">Mar 15, 2016</div><div class="post-content"><h3 id=""><a href="#" class="headerlink" title=""></a><a href="/pics/promise.png"><img src="/pics/promise.png" alt="qing"></a></h3><p>二次元中有一个词叫做立flag，暗示的剧情的发展。比如如果那个角色说了一句“我保证会活着回来”，基本上这个角色就离死不远了。Javascript 最近几年也发展出类似的玩意儿，表示将来的某种状态，叫做 Promises (当然这里没有死这么严重)，早期 jQuery 的 Deferred 就是类似于 Promises 的实现（当然jQuery的Deferred不完全符合Promises现在的标准）。</p>
<h2 id="聊聊-Promises-的历史"><a href="#聊聊-Promises-的历史" class="headerlink" title="聊聊 Promises 的历史"></a>聊聊 Promises 的历史</h2><p>所以，为什么Promises会出现？Promises最原始的是由 Daniel P. Friedman 和 David Wise 提出的。后来有出现了类似的概念叫做Futures。Futures和Promises的出现是为了解决并行编程中同步的问题。有关他们的介绍可以看这里 <a href="https://en.wikipedia.org/wiki/Futures_and_promises" target="_blank" rel="noopener">Futures and Promises</a>。</p>
<p>虽然是搬运 wikipedia 的，还是要说一下一般我们会看到几个词 future, promise, deferred, delay 一般来说这几个词可以等价。但是按照原始的定义，或者更确切的从原始的意义上来解释 Futures 和 Promises 还是有细微的不同的。Futures 指的一个只读的变量的占位符，意思就是说 Futures 作为一个异步操作的符号表示，表示这个地方会有一个异步操作的返回。而 Promises 指一个可以对 Futures 进行设置或者操作的容器。 这在单词的字面的意思也能理解，未来是一种代指之后的某一时刻，而承诺本身就隐性地包含了未来。<br></div><a href="/2016/03/15/javascript/2015-03-15-promise/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2016/03/10/life/plan/" class="post-title-link">我的2015</a></h2><div class="post-info">Mar 10, 2016</div><div class="post-content"><h3 id=""><a href="#" class="headerlink" title=""></a><a href="/assets/pics/2016plan.jpeg"><img src="/pics/2016plan.jpeg" alt="qing"></a></h3><p>对于现在已经过去了四分之一的2016年来说，现在才开始写2015年的总结似乎有点嘲讽。啊啊啊啊啊啊！可恶的拖延症( ゜- ゜)</p>
<h2 id="幸运的2015"><a href="#幸运的2015" class="headerlink" title="幸运的2015"></a>幸运的2015</h2><p>记得18岁时候进大学的时候，少不更事，满是铿锵抱负，但是到最后只是平淡失意的过完了四年。过去五年中的前面四年，在印象中没有交到过什么好运。至少心里想做成的事，似乎也没完成啥。所以2015年，至少和前四年比起来是有那么一点小幸运。</p>
<p>这一年总结下来也就几件事，考上研，完成了生涯中最大一个项目，开始经济自给，体验了完全不同的大学生活。<br></div><a href="/2016/03/10/life/plan/" class="read-more">...more</a></article></li><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/2014/07/14/life/2014-07-14-graduaction/" class="post-title-link">若没有离别，成长也无所附丽</a></h2><div class="post-info">Jul 14, 2014</div><div class="post-content"><p>再过几个小时就是世界杯决赛，于是在这空白的几个小时中，我决定一边吹着冷气一边码字。其实我也不知道为什么会决定码字来打发时光，因为我很清晰地记得距我上次码字已经过去了两年，估计就是心血来潮了吧。<br></div><a href="/2014/07/14/life/2014-07-14-graduaction/" class="read-more">...more</a></article></li></ul></main><footer><div class="paginator"></div><div class="copyright"><p>© 2015 - 2018 <a href="http://blog.boelroy.com">Boelroy</a>, powered by <a href="https://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/pinggod/hexo-theme-apollo" target="_blank">hexo-theme-apollo</a>.</p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML" integrity="sha384-crwIf/BuaWM9rM65iM+dWFldgQ1Un8jWZMuh3puxb8TOY9+linwLoI7ZHZT+aekW" crossorigin="anonymous"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-41473417-2",'auto');ga('send','pageview');</script></body></html>