提高 JavaScript 性能【从URL解析到DOM点操作】

本文探讨了JavaScript性能优化,重点关注页面加载与运行过程,包括DNS解析、TCP连接、HTTP请求等。强调了JavaScript和CSS的放置位置对页面渲染的影响,建议将关键样式和脚本放在head中,非必需的JavaScript放于body底部。同时,讨论了JavaScript的按序加载和拆分载入的权衡,推荐使用Promise进行链式调用来确保执行顺序,但也要注意避免过多导致页面卡顿。最后提出了耗时代码拆分、同业务代码整合以及DOM操作预加载的策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前公司创业公司创业还没成功,新制度倒是层出不穷,纷纷扰扰。心里不快,干脆裸辞跑回广州。面试了两天就确定了新公司,从小程序又转战Vue。

许久没碰Vue,手生得很啊!很感谢新公司CTO杰哥给我机会让我快速了解公司业务,上手项目。虽然刚进公司不到一个月,但是得到机会见识了架构好的代码,一个月内多次刷新对前端的认知。难得本月业务写完大半,遂抽空开始学JavaScript性能相关,于是有此文。

本文是我学习Web性能所整理的文章。主要读物:《高性能JavaScript》、《你不知道的JS》、MDN网站以及网络上一些解读文章。

页面加载与运行过程

1、DNS解析:将URL解析为IP地址

2、TCP连接:三次握手与四次分手

3、各种HTTP请求:接口请求、JavaScript加载等

4、服务端的响应:服务端响应请求并返回数据

5、浏览器解析:浏览器对数据进行解析

6、页面渲染:解析的数据通过DOM树、CSS树与JavaScript生命周期渲染过程生成最终的页面

7、定时任务与后置JavaScript加载:JavaScript会在特定生命周期/业务期间被调用,影响页面

通过上面的过程我们了解了 从发送URL请求到页面渲染完成/事件触发 期间发生的事情,而 1-4 是涉及服务端和客户端双方合作部分,我们先关注 5-7 ,也就是我们前端工程师能独立优化性能的部分

首先,我们在加载页面到渲染页面之前,页面呈现出来的是一片空白。我们要做的第一件事,就是尽可能压缩这段空白页面出现的时间。而我们知道浏览器读取页面代码是自顶向下按顺序执行的。那么我们就得先搞清楚一件事。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值