TAT.Johnny HTTP/2 Server Push 详解(下)
In Web开发 on 2017年04月20日 by view: 335
0

==============接上篇 HTTP/2 Server Push 详解(上)=================

译者注:上文介绍了 HTTP/2 Server Push 的基本概念和用法,下面继续深入实际使用的性能和考量。

如何分辨 Server Push 是否生效

目前,我们已经通过 Link 首部来告诉服务器推送一些资源。剩下的问题是,我们怎么知道是否生效了呢?

这还要看不同浏览器的情况。最新版本Chrome将在开发者工具的网络发起栏中展示推送的资源。

Chrome显示服务器推送的资源(大图

TAT.Johnny HTTP/2 Server Push 详解(上)
In Web开发 on 2017年04月18日 by view: 496
0

原文:https://www.smashingmagazine.com/2017/04/guide-http2-server-push/

作者:

译者按:网络优化一直是译者长期研究的方向,HTTP/2 的理论学习也已做了不少,随着这项标准的推进,越来越多特性被大家开始使用。作为 HTTP/2 最激动人心的特性,Server Push 在性能提升的效果被寄予了很高期望,却因其对传统 B/S 架构的开发模式影响较大未能广泛实践。如何更好地使用这项能力,让我们跟着作者深入探索~

========================译文分割线===========================

在过去的一年时间,HTTP/2 的出现为关注性能的开发者带来了显著的变化。HTTP/2 已经不再是我们期待中的特性,而是伴着 Server Push(服务端推送)能力已然到来。

除了解决常见的 HTTP/1 性能问题(比如,首部阻塞和未压缩的报头),HTTP/2 还提供了 Server Push 能力!服务端推送允许我们向用户发送一些还没有被访问的资源。这是一种获得 HTTP/1 优化实践(例如内联)所带来性能提升的优雅方式,同时也避免了原先实践的一些缺点。

本文中,你将了解什么是 Server Push,它的工作原理与解决了哪些问题。同时你也将学习如何使用它,判断它是否正常运作,以及它对性能的影响。让我们开始吧!

原文链接

—— 以webpack文档部署为例子

Overview

Some friends and I have been running webpack-china for a few months.
After a few months effort, most doc translation job have also been done. We keep tracking the master and you will see Chinese version does not lag behind too much.

pretty much the same and http2 is also applied

(pretty much the same and http2 is also applied)

TAT.yana Alloy周刊,你值得拥有
In Web 前端资讯,Web开发 on 2017年04月15日 by view: 927
5

在现在这样一个前端技术迅速发展的时代,一不留神就出现了许多新的技术知识。
为了能够让大家更加系统的学习前端的精华知识,经过了一段时间的研究和精心准备,
AlloyTeam决定发行Alloy周刊

TAT.tennylv 移动web之滚动篇
In Web开发 on 2017年04月14日 by view: 1,535
0

知识点1:移动web滚动问题

在移动端,使用滚动来处理业务逻辑的情况有很多,例如列表的滚动加载数据,下拉刷新等等都需要利用滚动的相关知识,但是滚动事件在不同的移动端机型却又有不同的表现,下面就来一一总结一下。

TAT.dorsywang 剖析Babel——Babel总览
In JavaScript,Web开发 on 2017年04月06日 by view: 3,589
0

名词解释

AST:Abstract Syntax Tree, 抽象语法树

DI: Dependency Injection, 依赖注入

===============================================================

Babel的解析引擎

Babel使用的引擎是babylon,babylon并非由babel团队自己开发的,而是fork的acorn项目,acorn的项目本人在很早之前在兴趣部落1.0在构建中使用,为了是做一些代码的转换,是很不错的一款引擎,不过acorn引擎只提供基本的解析ast的能力,遍历还需要配套的acorn-travesal, 替换节点需要使用acorn-,而这些开发,在Babel的插件体系开发下,变得一体化了

TAT.dnt Omi框架Store体系的前世今生
In Web开发 on 2017年03月30日 by view: 948
1

原文链接

写在前面

先说说Store系统是干什么的!为什么要造这样一个东西?能够给系统架构带来什么?

当我们组件之间,拥有共享的数据的时候,经常需要进行组件通讯。在Omi框架里,父组件传递数据给子组件非常方便:

  • 通过在组件上声明 data-* 或者 :data-* 传递给子节点
  • 通过在组件上声明 data 或者 :data 传递给子节点 (支持复杂数据类型的映射)
  • 声明 group-data 把数组里的data传给一堆组件传递(支持复杂数据类型的映射)

注:上面带有冒号的是传递javascript表达式

原文链接

写在前面

Omi框架可以通过在组件上声明 data-* 把属性传递给子节点。
Omi从设计之初,就是往标准的DOM标签的标准传递方式靠齐。比如:

  • 下划线自动转驼峰, data-page-index传到子组件就变成this.data.pageIndex
  • data-xx 传递到子节点全都变成字符串,如data-page-index=”1″到子节点中this.data.pageIndex就是字符串”1″
TAT.yana 移动端输入框填坑系列(一)
In Web开发 on 2017年03月21日 by view: 4,659
19

输入在移动端是一个很常用的功能,那么输入框必然是一个很重要的部分。然而,移动端输入框总会遇到各种各样的问题,无论是样式还是ios和android两端体验不一致都是很让我们头疼的问题,那么如何使移动web的输入框体验更贴近原生也成了一个需要我们多多思考和研究的问题。

原文地址

在前端开发工作中,除了项目开发保质保量上线以外,项目的数据监控也应该配套起来,确保线上的正常运转。如上报 pv 监控项目是否正常运转;测速上报反应项目质量;脚本错误监控作为监控中重要一环,当页面发生报错的时候,通过上报错误信息,能及时发现存在问题,修复优化、减少损失。

本文基于在手Q家校群前端脚本错误量优化的方案,致力于打造极致的脚本错误优化。