直出是什么?到底是怎样的性能优化?本文将结合从在浏览器输入 url,到展示最终页面的过程来对其进行一步步分析,并将在手 Q web 中的实际应用实践进行总结。
原文地址
本文 start kit: steamer-react
就是为了“ 性能”!!!
按照经验来说,直出,能够减少 20% - 50% 不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。
除此之外,有些特定的业务做直出能够弥补前后端分离带来的 SEO 问题。像这次选取的腾讯新闻,大多数页面首屏其实都是直出的(但肯定不是 React 直出)。
上篇文章大概展示了 kmdjs0.1.x 时期的编程范式:
如下面所示,可以直接依赖注入到 function 里,
1 2 3 4 |
kmdjs.define('main',['util.bom','app.Ball','util.dom.test'], function(bom,Ball,test) { var ball = new Ball(0, 0, 28, 1, -2, 'kmdjs'); var vp = bom.getViewport(); }); |
也可以直接在代码里把 full namespace 加上来调用,如:
1 2 3 4 |
kmdjs.define('main',['util.bom','app.Ball','util.dom.test'], function() { var ball = new app.Ball(0, 0, 28, 1, -2, 'kmdjs'); var vp = util.bom.getViewport(); }); |
React 的实践从去年在 PC QQ 家校群开始,由于 PC 上的网络及环境都相当好,所以在使用时可谓一帆风顺,偶尔遇到点小磕绊,也能够快速地填补磨平。而最近一段时间,我们将手 Q 的家校群重构成 React,除了原有框架上存在明显问题的原因外,选择 React 也是因为它确实有足够的吸引力以及优势,加之在 PC 家校群上的实践经验,斟酌下便开始了,到现在已有页面在线上正常跑起。
循环依赖是非常必要的,有的程序写着写着就循环依赖了,可以提取出一个对象来共同依赖解决循环依赖,但是有时会破坏程序的逻辑自封闭和高内聚。所以没解决好循环依赖的模块化库、框架、编译器都不是一个好库、框架、编译器。
最近一个季度,我们都在为手 Q 家校群做重构优化,将原有那套问题不断的框架换掉。经过一些斟酌,决定使用 react 进行重构。选择 react,其实也主要是因为它具有下面的三大特性。
学习 React 的好处就是,学了一遍之后,能够写 web, node 直出,以及 native,能够适应各种纷繁复杂的业务。需要轻量快捷的,直接可以用 Reactjs;需要提升首屏时间的,可以结合 React Server Render;需要更好的性能的,可以上 React Native。
但是,这其实暗示学习的曲线非常陡峭。单单是 Webpack+ React + Redux 就已够一个入门者够呛,更何况还要兼顾直出和手机客户端。不是一般人能 hold 住所有端。
Virtual Dom(下称 vd)算是 React 的一个重大的特色,因为 Facebook 宣称由于 vd 的帮助,React 能够达到很好的性能。是的,Facebook 说的没错,但只说了一半,它说漏的一半是:“ 除非你能正确的采用一系列优化手段”。
另一个被大家所推崇的 React 优势在于,它能令到你的代码组织更清晰,维护起来更容易。我们在写的时候也有同感,但那是直到我们踩了一些坑,并且渐渐熟悉 React+ Redux 所推崇的那套代码组织规范之后。
前两天做了个需求需要 Unix 时间戳和北京时间的各种转换,其中 Date 对象用到的极多,今天就来讲讲我所了解到的 Date 对象。
hin 简单~
1 |
var date = new Date(); |
这时的时间是当前时间。
那么 Date 都可以用什么来作为参数呢?
1、Date 对象可以使用指定时间到 1970 年 1 月 1 日 00:00:00 UTC 的毫秒数做参数。
针对多点触控设备编程的 Web 手势组件,快速帮助你的 web 程序增加手势支持,也不用再担心 click 300ms 的延迟了。拥有两个版本,无依赖的独立版和 react 版本。除了 Dom 对象,也可监听 Canvas 内元素的手势(需要 Canvas 引擎内置对象支持 addEventListener 绑定 touch 相关事件)。
某天老板在群里反馈,英文单词为什么被截断了?
很显然,这是我们前端的锅,自行背锅。这个问题太简单了,css 里加两行属性,分分钟搞定。
1 2 |
word-break: keep-all; word-wrap: break-word; |
开心的提交代码,刷新页面。我擦,怎么还是没有断词?不可能啊!!! 难道这两个属性有什么兼容性问题或者有什么限制条件?为了不搬石头砸自己的脚,还是去深入了解一下。
腾讯 AlloyTeam 开始社会招聘啦,想加入 AlloyTeam 的工程师们请抓紧!欢迎前来应聘,机会难得,各种挑战等着你~~
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2