最后
小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!
- index.js 代码如下
const getList = () => {
return new Promise((resolve, reject) => {
// 创建请求
let ajax = new XMLHttpRequest();
// 这里请求的是本地服务器
ajax.open(‘get’, ‘http://127.0.0.1:8000’);
ajax.send();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
resolve(JSON.parse(ajax.responseText))
}
}
})
}
const container = document.getElementById(“container”)
const renderList = async () => {
console.time(‘列表时间’)
const list = await getList();
list.forEach( item => {
const div = document.createElement(‘div’)
div.className = ‘flex’
div.innerHTML = <img src="${item.src}" /><span>${item.text}</span>
container.appendChild(div)
});
console.timeEnd(‘列表时间’)
}
renderList()
-
这种方案就是简单粗暴的循环渲染
-
此方案耗时大概是 13s
-
这种做法当然是不可取的,等到天都黑了,用户可能会骂娘
const renderList = async () => {
console.time(‘列表时间’)
const list = await getList();
const total = list.length;
const page = 0;
const limit = 200;
// 总页数
const totalPage = Math.ceil(total / limit); // Math.ceil 1.1 => 2
const render = (page) => {
if(page >= totalPage) return
setTimeout(() => {
for(let i = page * limit; i < page * limit + limit; i++){
const item = list[i];
const div = document.createElement(‘div’)
div.className = ‘flex’
div.innerHTML = <img src="${item.src}" /><span>${item.text}</span>
container.appendChild(div)
}
render(page + 1)
}, 0)
}
render(page);
console.timeEnd(‘列表时间’)
}
renderList()
-
思路是把十万条数据分成 10w / 200页,再加上setTimeout,每次渲染一页,速度得到了大幅度提升。
-
方案耗时:不到 1s 搞定
const renderList = async () => {
console.time(‘列表时间’)
const list = await getList();
const total = list.length;
const page = 0;
const limit = 200;
// 总页数
const totalPage = Math.ceil(total / limit); // Math.ceil 1.1 => 2
const render = (page) => {
if(page >= totalPage) return
requestAnimationFrame(() => {
for(let i = page * limit; i < page * limit + limit; i++){
const item = list[i];
const div = document.createElement(‘div’)
div.className = ‘flex’
div.innerHTML = <img src="${item.src}" /><span>${item.text}</span>
container.appendChild(div)
}
render(page + 1)
})
}
render(page);
console.timeEnd(‘列表时间’)
}
renderList()
- 使用 requestAnimationFrame 代替 setTimeout,减少了重排的次数,极大提高了性能
const renderList = async () => {
console.time(‘列表时间’)
const list = await getList();
const total = list.length;
const page = 0;
const limit = 200;
// 总页数
const totalPage = Math.ceil(total / limit); // Math.ceil 1.1 => 2
const render = (page) => {
if(page >= totalPage) return
requestAnimationFrame(() => {
const fragment = document.createDocumentFragment()
// 文档碎片 => dom节点 不是在dom树上一部分
// N次追加 => 1次
for(let i = page * limit; i < page * limit + limit; i++){
const item = list[i];
const div = document.createElement(‘div’)
div.className = ‘flex’
div.innerHTML = <img src="${item.src}" /><span>${item.text}</span>
fragment.appendChild(div)
// container.appendChild(div)
}
container.appendChild(fragment)
render(page + 1)
})
}
render(page);
console.timeEnd(‘列表时间’)
}
renderList()
最后
小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!