让Web站点优化变得容易:GoogleI/O 2018(译)

减肥前VS减肥后
减肥前VS减肥后

原文地址Web Performance Made Easy: Goodle I/O 2018 edition

一直以来,我们都在竭尽全力的优化web站点,为了是web站点加载更快,性能更好。在这篇文章中,我们想要向大家分享新的工具,方法,库来优化web站点性能。首先,我们会展示在开发Oodles Theater App 的过程,我们用到的一些优化手段,然后我们将会谈论预测加载以及使用guess.js的计划。阅读 “让Web站点优化变得容易:GoogleI/O 2018(译)”

html5优化指南

web前端发展到2018年的现在,技术已日新月异,从以前的table布局,到利用position + float+盒模型布局flex弹性布局,到grid布局,前端技术从JqueryMVVM,到Google提出的PWA,以及现在的webassembly 人类对于更好的体验,更快的速度的追求,是无止境的,前端页面优化一直是个永恒的话题。那么到现在,我们针对前端的优化有哪些方案呢?

页面加载速度

页面加载速度慢是造成用户体验差的最致命的因素,这个是我们首先需要考虑的一个因素。
从下面的研究数据我们可以看出一些端倪

  • 53%的用户会放弃一个加载超过3s网站 —SOASTA Google study report
  • 当一个网站的加载变快,用户停留的时间就越长的,用户更愿意在加载快的网站上购买东西。 —WPO Stats
  • 加载速度慢的网站,对SEO优化是有害的,这个会降低网站的排名,导致网站访问的频率降低。 —Search Engine Land

阅读 “html5优化指南”

Javascript响应式的最通俗易懂的解释(译)

许多javascript框架(比如:Angular,React,以及Vue)都有它们自己的响应式引擎。我们如果理解了响应式的原理,搞清楚它们是怎么工作的,我们可以提高自己的编程技巧,更有效的使用JavaScript框架。下面的视频和内容,将会帮助我们实现一个与Vue一样的响应式引擎。

响应式系统

 

当我们第一次看见Vue响应式系统工作的时候,感觉它就像充满了魔法一样。 现在我们举一个简单的例子

<div id="app">
    <div> Price :${{price}} </div>
    <div> Total:${{price * quantity}} </div>
    <div> Taxes: ${{totalPriceWithTax}} </div>
</div>

 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var vm = new Vue({
     el:"#app",
    data:{
       price:5.00,
       quantity:2
    },
    computed:{
        totalPriceWithTax(){
              return this.price * this.quantity * 1.03
        }
    }
  })
</script>

不知道为什么,当price 发生变化的时候,Vue就知道自己需要做三件事情:阅读 “Javascript响应式的最通俗易懂的解释(译)”

密码学学习笔记- 消息认证码

密码学的工具箱里有六大工具 :分别是对称密码公钥密码单向散列函数消息认证码数字签名,和伪随机数生成器。

我们从Alice 和Bob的故事开始讲起。我们假设Alice 和 Bob 分别是两家银行。Alice 银行通过网络向Bob银行发送了一个汇款请求。Bob接受的请求是 从账号A向账号B汇款100万元。

这个时候,Bob怎么去确定这条线消息是Alice 发送的,怎么去确定该消息没有别人修改。如汇款请求的原意是“从账号A向账号C汇款100万元”,就是在消息传递的过程,怎么去保证该消息没有被篡改,是否有人伪装发送者发送该消息

其实这问题,我们要关注的问题是消息的“完整性”和“认证”这两个性质。阅读 “密码学学习笔记- 消息认证码”

更新webpack4记录

webpack4发布到现在3个多月的时间,webpack的配置正在向parcelljs靠齐,尽量让用户少配置,不要把时间浪费到配置工具上来。废话不多说,我们一步步来使用webpack4来构建vue2.x 应用。

目标

利用webpack4 打包 vue+ vue-router 应用

1.实现缓存常驻(基本库能够在每次打包没有变化)。

2. 基于路由进行代码分割,实行代码基于路由懒加载

3. 在每次提交代码的时候 利用eslint进行代码的检查,

4. 在编写过程中,能够实现热更新,能够自动打开浏览器。

5.在开发过程中,利用开发服务对api请求使用代理,解决跨域问题

6. 利用jest + vue-test-utils测试框架进行测试

7. 部分UI单元测试采用puppteer测试,如用户的登录注册,各个端的模拟

8. 将每个文件分割成小于200kB的文件(在HTTP2协议中,多个小文件比大文件传输速度快,而且只有一个tcp连接)

本次开发,vue-template 我们使用 pug 模板,css的编写使用stylus预处理语言。现在让我们Let’s rock it.项目地址是https://gitee.com/lmz2423/vue-webpack4/

阅读 “更新webpack4记录”

vipkid学习中心页面优化记录

学习中心首页

来vipkid半年多,一直参与学习中心项目的开发,学习中心是一个复杂的项目,项目包含积分商城,激励活动,学生图书馆,学生预习视频,而每个小项目包含带的内容又挺多,采取开发框架是vue2.x框架。随着项目的进行,项目的优化也在进行之中。

对于前端应用来说,最重要的就是网络延时,页面的显示时间越快。我们从协议层,页面加载资源,域名预解析,代码分割层面对前端应用进行了优化,至于图片压缩,代码压缩这些基本手段,不在本文考虑的范围之内.

阅读 “vipkid学习中心页面优化记录”

闭包

上图代码是go语言闭包的写法,当一种编程语言引入了闭包的思想,那么我们就知道

  • 该编程语言函数肯定是一等公民(就是函数可以作为参数,可以作为返回值)
  • 函数内部可以定义函数 

什么是闭包

我们从上面得知,闭包肯定与函数有关,一种说法是,闭包是引用了自由变量的函数,这个自由变量将和该函数一同存在,即使离开创建它的环境也还存在。这种说法是指明闭包是一个函数。还有一种说法:闭包是由函数和与其相关的引用环境组合而成的实体  。这两种各有各的说法 。但是闭包保证能够在函数内部调用自由变量,而函数外部无法访问到该自由变量。

阅读 “闭包”

HTTP2协议之TCP协议1 -学习笔记二

上一篇文章说起http1.1协议并没有效利用tcp协议,而且tcp协议的连接耗时,接下来,我们来瞧一瞧tcp协议。上图是建立tcp协议的过程以及传输文件的过程。这篇文章带领大家使用抓包工具来分析tcp协议

下载抓包分析工具wireshark

wireshark是一款强大的抓包分析工具,下载地址自行google,度娘。使用教程自行google,度娘。启动wireshark 如下所示

阅读 “HTTP2协议之TCP协议1 -学习笔记二”