返回对象所有可枚举的键值对,不会追寻原型链上的 key
let obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3',
}
Object.entries(obj).forEach(entry => {
let key = entry[0]
let value = entry[1]
// entry 会是这样 ["key1", "value1"]
})
返回对象所有可枚举的键
let obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3',
}
Object.keys(obj).forEach(key => {
let value = obj[key]
})
返回对象所有可枚举的值
let obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3',
}
Object.values(obj).forEach(value => {
// 只能使用 value
})
迭代可枚举属性,会顺着原型链找下去
let obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3',
}
for (const key in obj) {
let value = obj[key]
if (obj.hasOwnProperty(key)) {
// 本身的
} else {
// 来自原型链的
}
}
返回对象所有(包括不可枚举)的键(原文说会找原型链是错的)
let obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3',
}
Object.getOwnPropertyNames(obj).forEach(key => {
let value = obj[key]
})
下面的代码用上面的几种方法遍历有 1000000 个属性的对象,循环 10 次
const { PerformanceObserver, performance } = require('perf_hooks')
let objectSize = 1000000
let iterations = 10
console.log(
'Starting performance test with %d object size and %d iterations',
objectSize,
iterations
)
let values = {
ENTRIES: 0,
KEYS: 0,
VALUES: 0,
FORIN: 0,
GETOWP: 0,
}
const obs = new PerformanceObserver(items => {
let entry = items.getEntries()[0]
console.log(entry.name, entry.duration)
values[entry.name] += entry.duration
performance.clearMarks()
})
obs.observe({ entryTypes: ['measure'] })
function generateObject() {
let obj = {}
for (let i = 0; i < objectSize; i++) {
obj['key' + Math.random()] = 'val' + Math.random()
}
return obj
}
for (let i = 0; i < iterations; i++) {
let obj = generateObject()
//Object.entries
performance.mark('A')
Object.entries(obj).forEach(entry => {
let key = entry[0]
let value = entry[1]
})
performance.mark('B')
performance.measure('ENTRIES', 'A', 'B')
//Object.Keys
performance.mark('A')
Object.keys(obj).forEach(key => {
let value = obj[key]
})
performance.mark('B')
performance.measure('KEYS', 'A', 'B')
//Object.Values
performance.mark('A')
Object.values(obj).forEach(value => {})
performance.mark('B')
performance.measure('VALUES', 'A', 'B')
//For In
performance.mark('A')
for (const key in obj) {
let value = obj[key]
}
performance.mark('B')
performance.measure('FORIN', 'A', 'B')
//Object.getOwnPropertyNames
performance.mark('A')
Object.getOwnPropertyNames(obj).forEach(key => {
let value = obj[key]
})
performance.mark('B')
performance.measure('GETOWP', 'A', 'B')
}
console.log(
Object.entries(values).sort((a, b) => {
return a[1] - b[1]
})
)
下面的结果是我自己跑的,顺序的是指赋值的时候直接用 index,随机则是键值对都插入随机数,得到的性能排序是和作者一样的,也因为 node.js 和 chrome 都是 V8,所以这个应该也是代表在浏览器上的性能排序。
// 顺序
;[
['FORIN', 4677.321499],
['KEYS', 4812.776572],
['GETOWP', 8610.906197],
['VALUES', 9914.674390999999],
['ENTRIES', 19338.083694],
]
// 随机
;[
['KEYS', 4502.579589],
['FORIN', 4678.013548000001],
['GETOWP', 8880.325031999999],
['VALUES', 10104.106962],
['ENTRIES', 17089.637588999998],
]
之前听说引擎会猜测下一个值让运行速度更快,看数据似乎没有太大影响。
也算是一点干货,快点来原文给作者鼓鼓掌吧
为解决JS加载速度慢,采用js的延时加载,和动态加载。由于js的堵塞特性,当浏览器在加载javascript代码时,不能同时做其他任何事情,如果javascript执行时间越久,浏览器等待响应的时间就越久。
如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要表现为: 加载性能 (主要是从减少文件体积,减少阻塞加载,提高并发方面入手),选择器性能,渲染性能,可维护性。
css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。
性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting)
Js高性能总结:加载和运行、数据访问、DOM编程、算法和流程控制、响应接口、Ajax 异步JavaScript和XML、编程实践...
前端网站性能优化规则:网络加载类、页面渲染类。包括:减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等
性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多,浏览器能力被无限放大和利用:从 web 游戏到复杂单页面应用,从 NodeJS 服务到 web VR/AR 和数据可视化,前端工程师总是在突破极限
BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程:多重指令管线通过不同的处理器执行单元,以达到性能的最佳。
你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。
像淘宝网站等,页面中有着大量图片,一次性全部加载这些图片会使浏览器发送大量请求和造成浪费。采用懒加载技术,即用户浏览到哪儿,就加载该处的图片。这样节省网络资源、提升用户体验、减少服务器压力。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!