浅谈 100vh 在移动端中的差异及解决方案

前言

在做活动页的时候,第一页需要整屏显示,使用了 100vh 来作为第一页的高度,但在 ios safari 中效果却不是我所期望的那样。遂写篇博文来记录下问题的产生和解决及原因。


浅谈 vue 前端同构框架 nuxt 及其性能优化

前言

使用 nuxt.js 做项目也接近快一年了,从立项到内测、公测、再到正式上线,还有后面的不断维护,也陆陆续续的踩了很多坑,其中最大的问题就是 node 的渲染性能问题了。模板转换是 cpu 密集型的操作,node 又是单线程的,并发一高,cpu 就会飙到 100% 。为了提升 nuxt.js 的渲染性能,也陆陆续续的查找了很多资料,发现网上针对 nuxt.js 的性能优化的文章比较少,比较杂。所以我写下这篇文章记录下自己对 nuxt.js 做性能优化的时候采取的一些方法,算是篇总结吧,也希望能给从谷歌搜到这的朋友一些帮助。本文着重于性能优化,对概念类的东西会一概而过。


浅谈 vue 在 created 和 mounted 请求异步数据的一些谣言

前言

今天下班,日常在公交车上用手机浏览技术社区,刷文章。偶然看到一篇文章,其中一部分内容如下图:
浅谈 vue 在 created 和 mounted 请求异步数据的区别
其大意是在 created 这个生命周期请求异步数据的话,请求过多,页面会长时间处于白屏。看到这我就不淡定了,请求不是异步的?怎么会影响到渲染呢?EventLoop 白学了?之后我将这张截图发给朋友讨论了一波,发现还是有挺多人搞不清楚其中的关键,都说在 mounted 阶段请求数据会比较好,在 created 请求可能会找不到需要渲染的元素之类的。于是就有了这篇文章的诞生。


浅谈浏览器缓存机制

前言

在前端性能优化这一块上,利用好浏览器缓存可以说是最为简单高效的一中方式了,当然不只是在浏览器,不管是什么,利用好缓存都极大的提高性能。浏览器缓存机制也就是HTTP缓存机制,可以有效的减少网络传输所消耗的流量和时间,若所请求的资源在浏览器中存在缓存,那么则可以直接使用缓存而不发生请求,或者是发送请求但服务器上和客户端上的数据完全一致,不存在更新,那就不必再将数据回传给客户端,而是直接使用浏览器缓存,大大的减少了响应的数据,提高了性能。


构建自己的前端知识体系

前言

在金庸的武侠世界中,习武之人讲究的是融汇贯通,打通自身经脉,才能达到内力生生不息。我虽非习武之人,但却是一名计算机从业者,需要足够扎实的理论基础才能撑得起各种实践。前端的知识太多太多,零零散散,需要从点到面去扩展,再由面到点的去深入,将这些知识联系起来构建自己的知识体系,加深理解,以便做到融会贯通。构建自己的知识体系的时候,用自己的话,将这些知识讲出来,讲清楚,以达到加深理解,整个过程中逐渐融汇贯通,业精于勤荒于嬉,行成于思毁于随。


关于 Vue2.0 的生命周期

前言

Vue实例从创建开始到结束销毁的一系列过程,在这个过程中会有特定阶段的钩子函数,这些钩子函数会在 Vue 的各个状态中执行。
总体上分为 8 个阶段:创建前/创建后;挂载前/挂载后;更新前/更新后;销毁前/销毁后。


从 JavaScript 看函数式编程之美

先占个坑,这阵子实习,忙着忙着项目的混合app开发,有空再更……

ES6 Promise 对象

前言

ES6 都出来三年了,在 ES6 中将 Promise 正式列为标准,这也就意味着 JavaScript 的异步编程又有一种新的写法,且这种写法更加的优雅,更易于维护。毕竟,Node.js 中大部分都是异步的。我写这篇文章主要对 Promise 对象进行系统的叙述讨论,并以此展开 JavaScriot 的运行机制。从而提高自己的知识水平,毕竟,人总是在积累、总结中成长的。


谈谈原生 Ajax

前言

之前写 Ajax 交互,都是使用已经封装好的库,今天就来聊聊原生的 Ajax。 Ajax 就是 Asynchronous JavaScript + XML 的简写,这一技术能向服务器请求额外的数据而无需重载页面。也就是用户无需刷新页面,便能从服务器获取数据的更新,这样能使用户得到更好的体验。比如有时候,会有这样的一个需求:只想要改变页面的某个区域。而以前的技术只能通过刷新页面来实现,向服务器重新请求页面,这样会增加多余的一些请求,从而影响性能。而 Ajax 则是为了解决这一问题诞生的,是网页无需刷新页面,使用 JavaScript 与服务器进行交互的一种技术。


JavaScript 中的继承总结

前言

由于 JavaScript 并不是那些“传统意义上”的面向对象的语言, 它在 ES5 中并没有类的概念, 没有真正意义上的继承, 但我们去可以进行模拟, 来实现所谓的继承。
在 JavaScript 中, 实现继承的过程中总感觉很有趣, 至少在 ES5 中是这样的, ES5 中自己亲自要通过原型链去实现继承, 而在 ES6 中则将这些需要自己写的封装成了一个接口, 其本质上还是一样, 都是通过原型链实现继承。



Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×