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

最新推荐文章于 2022-09-04 19:12:34 发布

XXR_

最新推荐文章于 2022-09-04 19:12:34 发布

阅读量308

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript HTML CSS Web性能 JavaScript性能

本文链接：https://blog.youkuaiyun.com/qq_36024963/article/details/99705616

本文探讨了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 ，也就是我们前端工程师能独立优化性能的部分

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