数组方法对比,2017前端性能优化清单

2017前端性能优化清单

2017/04/10 · 基础技术 ·
性能

原文出处: Xsu Edwan   

你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shakingcode-splitting两个工具?有没有用过Brotli、Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS
containment一类的技术?了解IPv6,HTTP/2和Service Worker这些协议吗?

回想那些年,大家往往在完成了产品之后才会去考虑性能。常常把与性能相关的事情拖到项目的最后来做,所做的也不过是对服务器上的config文件进行一些微调、串联、优化以及部分特别小的调整。而现在,技术已经有了翻天覆地的变化。

一个项目的性能是非常重要的,除了要在技术层面上注意,更要在项目的设计之初就开始考虑,这样才可以使性能的各种隐形需求完美的整合到项目中,随着项目一起推进。性能最好具有可量化、可监测以及可改动的特性。网络越来越复杂,对网络的监控也变得越来越难,因为监测的过程会受到包括设备、浏览器、协议、网络类型以及其他技术(CDN,ISP,缓存,代理服务器,防火墙,负载均衡器和服务器对性能的影响都很大)的很大影响。

下文是一份2017年的前端性能优化清单,阐述了作为前端开发人员,为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。

(你也可以下载checklist
PDF或者check
in Apple
Pages。优化万岁!)

客户端(浏览器端)数据存储技术概览

2017/03/09 · 基础技术 ·
2 评论 ·
存储

原文出处: dwqs   

在客户端(浏览器端)存储数据有诸多益处,最主要的一点是能快速访问(网页)数据。(以往)在客户端有五种数据存储方法,而目前就只有四种常用方法了(其中一种被废弃了):

  • Cookies
  • Local Storage
  • Session Storage
  • IndexedDB
  • WebSQL (被废弃)

JavaScript 数组方法对比

2017/02/15 · JavaScript
· 数组

本文由 伯乐在线 –
涂鸦码龙
翻译。未经许可,禁止转载!
英文出处:Loren
Stewart。欢迎加入翻译组。

JavaScript
提供了多种新增,移除,替换数组元素的方法,但是有些会影响原来的数组;有些则不会,它是新建了一个数组。

注意:区分以下两个方法的不同点:

  1. array.splice() 影响原来的数组
  2. array.slice() 不影响原来的数组

正文

微优化是保持性能最好的办法,但是又不能有太过明确的优化目标,因为过于明确的目标会影响在项目中做的每一个决定。以下是一些不同的模型,请按照自己舒服的顺序阅读。

Cookies

Cookies 是一种在文档内存储字符串数据最典型的方式。一般而言,cookies
会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端。这可以用于诸如管理用户会话,追踪用户信息等事情。

此外,客户端也用使用 cookies 存储数据。因而,cookies
常被用于存储一些通用的数据,如用户的首选项设置。

I. 新增:影响原数组

使用 array.push()array.ushift() 新增元素会影响原来的数组。

JavaScript

let mutatingAdd = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; mutatingAdd.push(‘f’); //
[‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’] mutatingAdd.unshift(‘z’); // [‘z’,
‘b’, ‘c’, ‘d’, ‘e’ ‘f’]

1
2
3
let mutatingAdd = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
mutatingAdd.push(‘f’); // [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]
mutatingAdd.unshift(‘z’); // [‘z’, ‘b’, ‘c’, ‘d’, ‘e’ ‘f’]

请准备好然后定下目标!

Cookies 的 基本CRUD 操作

通过下面的语法,我们可以创建,读取,更新和删除 cookies:

JavaScript

// Create document.cookie = “user_name=Ire Aderinokun”; document.cookie
= “user_age=25;max-age=31536000;secure”; // Read (All) console.log(
document.cookie ); // Update document.cookie =
“user_age=24;max-age=31536000;secure”; // Delete document.cookie =
“user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT”;

1
2
3
4
5
6
7
8
9
10
11
12
// Create
document.cookie = "user_name=Ire Aderinokun";  
document.cookie = "user_age=25;max-age=31536000;secure";
 
// Read (All)
console.log( document.cookie );
 
// Update
document.cookie = "user_age=24;max-age=31536000;secure";
 
// Delete
document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";

II. 新增:不影响原数组

两种方式新增元素不会影响原数组,第一种是 array.concat()

JavaScript

const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; const arr2 = arr1.concat(‘f’);
// [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’] (注:原文有误,我做了修改 “.”
—> “,”) console.log(arr1); // [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]

1
2
3
const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
const arr2 = arr1.concat(‘f’); // [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]  (注:原文有误,我做了修改 “.” —> “,”)
console.log(arr1); // [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]

第二种方法是使用 JavaScript
的展开(spread)操作符,展开操作符是三个点(…)

JavaScript

const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; const arr2 = […arr1, ‘f’];
// [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’] const arr3 = [‘z’, …arr1]; //
[‘z’, ‘a’, ‘b’, ‘c’, ‘d’, ‘e’]

1
2
3
const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
const arr2 = […arr1, ‘f’]; // [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]  
const arr3 = [‘z’, …arr1]; // [‘z’, ‘a’, ‘b’, ‘c’, ‘d’, ‘e’]

展开操作符会复制原来的数组,从原数组取出所有元素,然后存入新的环境。

1. 比你最强的竞争对手快20%

根据一个心理学研究,你的网站最少在速度上比别人快20%,才能让用户感觉到你的网站比别人的更快。这个速度说的不是整个页面的加载时间,而是开始加载渲染的时间,首次有效渲染时间(例如页面需要加载主要内容的时间),或者交互时间(指的是页面或者应用中主要的页面加载完成,并主备好与用户进行交互的时间)。

在Moto G(或中端三星设备)和Nexus
4(比较主流的设备)上衡量开始渲染时间(用WebPagetest)以及首页有效渲染时间(用Lighthouse),最好是在一个开放的实验室中,使用规范的3G,4G和Wi-Fi链接。

图片 1
Lighthouse,一个Google开发的新的性能审查工具

你可以通过你的分析报告看看你的用户处在哪个阶段,选取其中前90%的用户体验来做测试。接着收集数据,建一个表格,筛去20%的数据并预设一个目标(如:性能预算)。现在你可以将上述两个值进行对比检测。如果你始终维持着你的目标并且通过一点一点改变脚本去加快交互时间,那么上述方法就是合理可行的。

图片 2
由Brad Frost创建的性能分析

和你的同事分享这份清单。首先要确保团队中的每个人都熟悉这份清单。项目中每一个决定都会影响性能,如果前端工程师们都在积极的参与项目概念,UX以及视觉设计的决定,这将会给整个项目带来巨大收益。地图设计的决定违背了性能理念,所以他在这份清单内的顺序有待考虑。

Cookies 的优点

  • 能用于和服务端通信
  • 当 cookie 快要自动过期时,我们可以重新设置而不是删除

III. 移除:影响原数组

使用 array.pop()array.shift() 移除数组元素时,会影响原来的数组。

JavaScript

let mutatingRemove = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; mutatingRemove.pop();
// [‘a’, ‘b’, ‘c’, ‘d’] mutatingRemove.shift(); // [‘b’, ‘c’, ‘d’]

1
2
3
let mutatingRemove = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];  
mutatingRemove.pop(); // [‘a’, ‘b’, ‘c’, ‘d’]  
mutatingRemove.shift(); // [‘b’, ‘c’, ‘d’]

array.pop()array.shift()
返回被移除的元素,你可以通过一个变量获取被移除的元素。

JavaScript

let mutatingRemove = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; const returnedValue1 =
mutatingRemove.pop(); console.log(mutatingRemove); // [‘a’, ‘b’, ‘c’,
‘d’] console.log(returnedValue1); // ‘e’ const returnedValue2 =
mutatingRemove.shift(); console.log(mutatingRemove); // [‘b’, ‘c’,
‘d’] console.log(returnedValue2); // ‘a’

1
2
3
4
5
6
7
let mutatingRemove = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
const returnedValue1 = mutatingRemove.pop();  
console.log(mutatingRemove); // [‘a’, ‘b’, ‘c’, ‘d’]  
console.log(returnedValue1); // ‘e’
const returnedValue2 = mutatingRemove.shift();  
console.log(mutatingRemove); // [‘b’, ‘c’, ‘d’]  
console.log(returnedValue2); // ‘a’

array.splice() 也可以删除数组的元素。

JavaScript

let mutatingRemove = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
mutatingRemove.splice(0, 2); // [‘c’, ‘d’, ‘e’]

1
2
let mutatingRemove = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];  
mutatingRemove.splice(0, 2); // [‘c’, ‘d’, ‘e’]

array.pop()array.shift() 一样,array.splice()
同样返回移除的元素。

JavaScript

let mutatingRemove = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; let returnedItems =
mutatingRemove.splice(0, 2); console.log(mutatingRemove); // [‘c’, ‘d’,
‘e’] console.log(returnedItems) // [‘a’, ‘b’]

1
2
3
4
let mutatingRemove = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];  
let returnedItems = mutatingRemove.splice(0, 2);  
console.log(mutatingRemove); // [‘c’, ‘d’, ‘e’]  
console.log(returnedItems) // [‘a’, ‘b’]

2. 反应时间为100毫秒,帧数是每秒60帧

RAIL性能模型会为你提供一个优秀的目标,既尽最大的努力在用户初始操作后的100毫秒内提供反馈。为了达到这个目标,页面需要放弃权限,并将权限在50毫秒内交回给主线程。对于像动画一样的高压点,最好的方法就是什么都不做,因为你永远无法达到最小绝对值。
同理,动画的每一帧都需要在16毫秒内完成,这样才能保证每秒60帧(一秒/60=16.6毫秒),如果可以的话最好能在10毫秒内完成。因为浏览器需要一定的时间去在屏幕上渲染新的帧,而且你的代码需要在16.6毫秒内完成执行。要注意,上述目标应用于衡量项目的运行性能,而非加载性能。

Cookies 的缺点

  • 增加了文档传输的负载
  • 只能存储少量的数据
  • 只能存储字符串
  • 潜在的
    安全问题
  • 自从有 Web Storage
    API
    (Local and Session Storage),cookies 就不再被推荐用于存储数据了

IV. 移除:不影响原数组

JavaScript 的 array.filter()
方法基于原数组创建一个新数组,新数组仅包含匹配特定条件的元素。

JavaScript

const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; const arr2 = arr1.filter(a
=> a !== ‘e’); // [‘a’, ‘b’, ‘c’, ‘d’](注:原文有误,我做了修改)
// 或者 const arr2 = arr1.filter(a => { return a !== ‘e’; }); //
[‘a’, ‘b’, ‘c’, ‘d’](注:原文有误,我做了修改)

1
2
3
4
5
6
const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
const arr2 = arr1.filter(a => a !== ‘e’); // [‘a’, ‘b’, ‘c’, ‘d’](注:原文有误,我做了修改)  
// 或者
const arr2 = arr1.filter(a => {  
  return a !== ‘e’;
}); // [‘a’, ‘b’, ‘c’, ‘d’](注:原文有误,我做了修改)

以上代码的条件是“不等于 ‘e’ ”,因此新数组(arr2)里面没有包含 ‘e’。


箭头函数的独特性

单行箭头函数,’return’ 关键字是默认自带的,不需要手动书写。

可是,多行箭头函数就需要明确地返回一个值。


另一种不影响原数组的方式是 array.slice()(不要与 array.splice()
混淆)。

JavaScript

const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; const arr2 = arr1.slice(1, 5)
// [‘b’, ‘c’, ‘d’, ‘e’] const arr3 = arr1.slice(2) // [‘c’, ‘d’,
‘e’]

1
2
3
const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];  
const arr2 = arr1.slice(1, 5) // [‘b’, ‘c’, ‘d’, ‘e’]  
const arr3 = arr1.slice(2) // [‘c’, ‘d’, ‘e’]

3. 首次有效渲染时间要低于1.25秒,速度指数要低于1000

纵使这个目标实现起来非常困难,你的最终目标也应该是让开始渲染时间低于1秒且速度指数低于1000(在网速快的地方)。对于首次有效渲染时间,上限最好是1250毫秒。对于移动端,3G下移动设备首次渲染时间低于3秒都是可以接受的。稍微高一点也没关系,但千万别高太多。

浏览器支持

所有主流浏览器均支持 Cookies.

V. 替换:影响原数组

如果知道替换哪一个元素,可以使用 array.splice()

JavaScript

let mutatingReplace = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
mutatingReplace.splice(2, 1, 30); // [‘a’, ‘b’, 30, ‘d’, ‘e’] // 或者
mutatingReplace.splice(2, 1, 30, 31); // [‘a’, ‘b’, 30, 31, ‘d’, ‘e’]

1
2
3
4
let mutatingReplace = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];  
mutatingReplace.splice(2, 1, 30); // [‘a’, ‘b’, 30, ‘d’, ‘e’]  
// 或者
mutatingReplace.splice(2, 1, 30, 31); // [‘a’, ‘b’, 30, 31, ‘d’, ‘e’]

定义你所需要的环境

Local Storage

Local Storage 是 Web Storage
API
的一种类型,能在浏览器端存储键值对数据。Local Storage
因提供了更直观和安全的API来存储简单的数据,被视为替代 Cookies
的一种解决方案。

从技术上说,尽管 Local Storage
只能存储字符串,但是它也是可以存储字符串化的JSON数据。这就意味着,Local
Storage 能比 Cookies 存储更复杂的数据。

VI. 替换:不影响原数组

可以使用 array.map()
创建一个新数组,并且可以检查每一个元素,根据特定的条件替换它们。

JavaScript

const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’] const arr2 = arr1.map(item
=> { if(item === ‘c’) { item = ‘CAT’; } return item; }); // [‘a’,
‘b’, ‘CAT’, ‘d’, ‘e’]

1
2
3
4
5
6
7
const arr1 = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]  
const arr2 = arr1.map(item => {  
  if(item === ‘c’) {
    item = ‘CAT’;
  }
  return item;
}); // [‘a’, ‘b’, ‘CAT’, ‘d’, ‘e’]

使用 array.map() 转换数据

array.map() 是个强力方法,可以用于转换数据,而不污染原先的数据源。

JavaScript

const origArr = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; const transformedArr =
origArr.map(n => n + ‘Hi!’); // [‘aHi!’, ‘bHi!’, ‘cHi!’, ‘dHi!’,
‘eHi!’] console.log(origArr); // [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; //
原数组毫发无损

1
2
3
const origArr = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];  
const transformedArr = origArr.map(n => n + ‘Hi!’); // [‘aHi!’, ‘bHi!’, ‘cHi!’, ‘dHi!’, ‘eHi!’]  
console.log(origArr); // [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]; // 原数组毫发无损

打赏支持我翻译更多好文章,谢谢!

打赏译者

4. 选择和安装你的开发环境

不要过多的关注当下最流行的工具,坚持选择适合自己开发环境的工具,例如Grunt、Gulp、Webpack、PostCSS,或者组合起来的工具。只要这个工具运行的速度够快,而且没有给你的维护带来太大问题,这就够了。

Local Storage 的 基本CRUD 操作

通过下面的语法,我们可以创建,读取,更新和删除 Local Storage:

JavaScript

// Create const user = { name: ‘Ire Aderinokun’, age: 25 }
localStorage.setItem(‘user’, JSON.stringify(user)); // Read (Single)
console.log( JSON.parse(localStorage.getItem(‘user’)) ) // Update const
updatedUser = { name: ‘Ire Aderinokun’, age: 24 }
localStorage.setItem(‘user’, JSON.stringify(updatedUser)); // Delete
localStorage.removeItem(‘user’);

1
2
3
4
5
6
7
8
9
10
11
12
13
// Create
const user = { name: ‘Ire Aderinokun’, age: 25 }  
localStorage.setItem(‘user’, JSON.stringify(user));
 
// Read (Single)
console.log( JSON.parse(localStorage.getItem(‘user’)) )
 
// Update
const updatedUser = { name: ‘Ire Aderinokun’, age: 24 }  
localStorage.setItem(‘user’, JSON.stringify(updatedUser));
 
// Delete
localStorage.removeItem(‘user’);

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 3
图片 4

1 赞 4 收藏
评论

5. 渐进增强(progressive enhancement)

在构建前端结构的时候,应始终将渐进增强作为你的指导原则。首先设计并且构建核心体验,随后再完善那些为高性能浏览器设计的高级特性的相关体验,创建弹性体验。如果你的网页可以在使用低速网络、老旧显示器的很慢的电脑上运行飞快,那么在光纤高配电脑上它只会运行的更快。

Local Storage 的优点

相比于Cookies:

  • 其提供了更直观地接口来存储数据
  • 更安全
  • 能存储更多数据

关于作者:涂鸦码龙

图片 5

不高级前端攻城狮,原名金龙,不姓郭。【忙时码代码,无事乱涂鸦】

个人主页 ·
我的文章 ·
3 ·
   

图片 6

6. Angular,React,Ember等

最好使用那些支持服务器端渲染的框架。在使用某个框架钱,先记录服务器和客户端的引导时间,记得要在移动设备上测试,最终才能使用某个框架(因为面对的是性能问题,如果在使用某个框架后,再做修改是非常困难的)。如果你使用JavaScript框架,要保证你的选择是被广泛使用并且经过考验的。不同框架对性能有着不同程度的影响,同时对应着不同的优化策略,所以最好可以清楚的了解你要用的框架的每个方面。在写网页应用时可以先看看PRPL
pattern和application
shell
architecture。

图片 7
本图描述了PRPL pattern

图片 8
上图是application
shell,是一个小型的、由HTML,CSS和JavaScript构成的用户界面

Local Storage 的缺点

  • 只能存储字符串数据(直接存储复合数据类型如数组/对象等,都会转化成字符串,会存在存取数据不一致的情况):

JavaScript

localStorage.setItem(‘test’,1); console.log(typeof
localStorage.getItem(‘test’)) //”string”
localStorage.setItem(‘test2’,[1,2,3]); console.log(typeof
localStorage.getItem(‘test2’)) //”string”
console.log(localStorage.getItem(‘test2’)) //”1,2,3″
localStorage.setItem(‘test3’,{a:1,b:2}); console.log(typeof
localStorage.getItem(‘test3’)) //”string”
console.log(localStorage.getItem(‘test3’)) //”[object object]”
//为避免存取数据不一致的情形,存储复合数据类型时进行序列化,读取时进行反序列化
localStorage.setItem(‘test4’, JSON.stringify({a:1,b:2}));
console.log(typeof localStorage.getItem(‘test4’)) //”string”
console.log(JSON.parse(localStorage.getItem(‘test4’))) //{a:1,b:2}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
localStorage.setItem(‘test’,1);
console.log(typeof localStorage.getItem(‘test’))  //"string"
 
localStorage.setItem(‘test2’,[1,2,3]);
console.log(typeof localStorage.getItem(‘test2’))  //"string"
console.log(localStorage.getItem(‘test2’))  //"1,2,3"
 
localStorage.setItem(‘test3’,{a:1,b:2});
console.log(typeof localStorage.getItem(‘test3’))  //"string"
console.log(localStorage.getItem(‘test3’))  //"[object object]"
 
//为避免存取数据不一致的情形,存储复合数据类型时进行序列化,读取时进行反序列化
localStorage.setItem(‘test4’, JSON.stringify({a:1,b:2}));
console.log(typeof localStorage.getItem(‘test4’))  //"string"
console.log(JSON.parse(localStorage.getItem(‘test4’)))  //{a:1,b:2}

7. AMP还是Instant Articles?

根据你整体组织结构的优先顺序和策略,你可以考虑使用Google的AMP或Facebook的Instant
Articles。要知道没有这些你也可以达到不错的性能,但是AMP可以提供一个性能不错的免费的内容分发网络框架(CDN),Instant
Articles可以在Facebook上促进你的性能。你也可以建立progressive web
AMP。

浏览器支持

IE8+/Edge/Firefox 2+/Chrome/Safari 4+/Opera
11.5+(caniuse)

8. 选择适合你的CDN

根据你的动态数据量,可以将一部分内容外包给静态网站生成工具,将它置于CDN上,从中生成一个静态版本,从而避免那些数据库的请求。也可以选择基于CDN的静态主机平台,通过交互组件丰富你的页面(JAMStack)。

注意CDN是否可以很好的处理(或分流)动态内容。没必要单纯的将你的CDN限制为静态。反复检查CDN是否执行了内容的压缩和转化,检查智能HTTP/2传输和缓存服务器(ESI),注意哪些静态或动态的部分处在CDN的边缘(最接近用户的服务器)。

Session Storage

Session Storage 是 Web Storage
API
的另一种类型。和 Local Storage 非常类似,区别是 Session Storage
只存储当前会话页(tab页)的数据,一旦用户关闭当前页或者浏览器,数据就自动被清除掉了。

开始优化

Session Storage 的 基本CRUD 操作

通过下面的语法,我们可以创建,读取,更新和删除 Session Storage:

JavaScript

// Create const user = { name: ‘Ire Aderinokun’, age: 25 }
sessionStorage.setItem(‘user’, JSON.stringify(user)); // Read (Single)
console.log( JSON.parse(sessionStorage.getItem(‘user’)) ) // Update
const updatedUser = { name: ‘Ire Aderinokun’, age: 24 }
sessionStorage.setItem(‘user’, JSON.stringify(updatedUser)); // Delete
sessionStorage.removeItem(‘user’);

1
2
3
4
5
6
7
8
9
10
11
12
13
// Create
const user = { name: ‘Ire Aderinokun’, age: 25 }  
sessionStorage.setItem(‘user’, JSON.stringify(user));
 
// Read (Single)
console.log( JSON.parse(sessionStorage.getItem(‘user’)) )
 
// Update
const updatedUser = { name: ‘Ire Aderinokun’, age: 24 }  
sessionStorage.setItem(‘user’, JSON.stringify(updatedUser));
 
// Delete
sessionStorage.removeItem(‘user’);

9. 直接确定优化顺序

首先应该弄清楚你想解决的问题是什么。检查一遍你所有的文件(JavaScript,图片,字体,第三方script文件以及页面中重要的模块,例如轮播,复杂信息图标和多媒体内容),并将他们分类。
列一个表格。明确浏览器上应该有的基础核心内容,哪些部分属于为高性能浏览器设计的升级体验,哪些是附加内容(那些不必要或者可以被延时加载的部分,例如字体,不必要的样式,轮播组件,播放器,社交网站入口,很大的图片)。更详细的细节请参考文章”Improving
Smashing Magazine’s
Performance‘’。

优点,缺点和浏览器支持

和 Local Storage 一样

发表评论

电子邮件地址不会被公开。 必填项已用*标注