大数据量加载的页面性能问题requestAnimationFrame

大数据量加载的页面性能问题requestAnimationFrame 大数据量加载页面渲染的性能比对 一、准备

先代码地址吧
代码地址

1、新建文件夹 mkdir bigdata
2、cd bigdata 进入文件夹
3、初始化package.json

npm init -y

{
  "name": "bigdata",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

二、后端模拟20w条数据

1、创建server.js文件

// server.js

const http = require('http')
const port = 8000;

http.createServer(function (req, res) {
  // 开启Cors
//   res.writeHead(200,{'Content-Type':'text/css;charset=UFT8'})
  res.writeHead(200, {
    //设置允许跨域的域名，也可设置*允许所有域名
    'Access-Control-Allow-Origin': '*',
    //跨域允许的请求方法，也可设置*允许所有方法
    "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
    //允许的header类型
    'Access-Control-Allow-Headers': 'Content-Type',
    'charset':'UFT8'
  })
  let list = []
  let num = 0

  // 生成10万条数据的list
  for (let i = 0; i < 200000; i++) {
    num++
    list.push({
      src: 'https://p3-passport.byteacctimg.com/img/user-avatar/d71c38d1682c543b33f8d716b3b734ca~300x300.image',
      text: `I am the ${num} number  man `,
      tid: num
    })
  }
  res.end(JSON.stringify(list));
}).listen(port, function () {
  console.log('server is listening on port ' + port);
})

二、前端页面

1、index.html文件

    
    
    
    
    



					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/zaji/5696492.html