如何加快首屏渲染，一秒后执行变两秒后执行、链式调用、深度打印Dom节点tagName,后端返回大数的解决方法

已于 2022-03-31 20:46:02 修改
阅读量1k 收藏 1
点赞数
文章标签： 前端
于 2022-03-31 13:49:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36582776/article/details/123848535
版权
本文探讨了首屏渲染速度慢的问题及其影响因素，如资源请求过多、文件体积大和脚本阻塞渲染。提出了解决方案，包括减小入口文件体积、本地缓存静态资源、按需加载UI框架、压缩图片资源、实现图片和组件懒加载等。此外，还讨论了如何调整setTimeout以延迟执行，并展示了遍历DOM节点的方法。对于后端返回的大数，建议使用字符串处理或利用ES6特性避免精度丢失。
摘要由CSDN通过智能技术生成

白屏时浏览器在做什么？

解析 HTML、下载 CSS、下载 JavaScript、生成 CSSOM、执行 JavaScript、生成布局树、绘制页面一系列操作

1.影响首屏渲染的因素

请求资源过多、资源文件体积过大、脚本的加载和解析阻塞渲染

2.加快首屏渲染的方法

面试官：首屏加载速度慢怎么解决？_豆子前端的博客-CSDN博客_首屏加载慢

  • 减小入口文件体积
  • 静态资源本地缓存
  • UI框架按需加载
  • 图片资源的压缩
  • 图片懒加载、路由懒加载、组件懒加载
  • 组件重复打包
  • 开启GZip压缩
  • 使用SSR，在服务端渲染好一部分数据

settimeout(() => {console.log(1)}，

最低0.47元/天 解锁文章
七彩冰淇淋与藕汤
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解如何在webpack中做预渲染降低首屏空白时间
10-18
在现代Web开发中，由于JavaScript框架如React、Vue的广泛应用，首屏空白时间往往较长，因为页面的主要内容依赖于JavaScript执行来构建DOM。预渲染（Prerendering）是一种有效的优化策略，它可以在构建阶段预先生成...
解决vue页面渲染但dom没渲染的操作
10-15
这是因为直接在数据变更后操作DOM可能会遇到未更新的DOM节点，导致操作无效。正确的做法是等待Vue完成DOM更新： ```javascript this.$nextTick(() => { $("select[name='ddlCostCenter']").select2({ language:...
前端如何加快首屏渲染
m0_59070120的博客
08-14 391
4，静态资源本地缓存（灵活使用前端本地存储和http存储，http存储分为强缓存和协商缓存，强缓存由Cache-Control里面的max-age和exprie来控制，max-age优先级高于expire，是相对时间；如果强缓存失效则请求头携带If-None-Match的值为上次响应头的Etage（资源每次更新生成的唯一哈希值，优先级高），If-Modified-Since的值为上次响应头的Last-Modified），成功304，失败200。1，路由懒加载（只加载当前页面的路由）3，ui框架按需加载。..
详解 CRP：如何最大化提升首屏渲染速度
weixin_34337381的博客
01-07 782
在前端性能优化树上有很多值得展开的话题，从输入 URL 到页面加载完成发生了什么 这一道经典的面试题就涉及到很多内容，但前端主要关注的部分还是 浏览器解析响应的内容并渲染展示给用户 这一步，本文将会详细分析这一步的具体过程并在分析的过程中理解该如何做性能优化。 首先介绍一个名词 CRP，即 关键渲染路径 (Critical Rendering Path)（后文统一以 CRP 指代）: 关键渲染路...
2024年Web前端最新面试官 ： 首屏加载速度慢怎么优化？_资源大屏加载慢优化，科学技术协会面试个人经历
最新发布
2401_84437095的博客
05-12 727
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**[外链图片转存中…(img-zSCIM0DO-1715470980934)]
加快首屏渲染速度（一）——抽取critical CSS
hao像飘在外太空的博客
11-25 2117
核心思路： 一、抽取出首页需要的css 二、用行内css形式 加载这部分css(critical css) 三、等到页面加载完之后，再加载整个css，会有一部分css与critical css重叠 示例 内嵌关键的CSS，具体方法如下： 注意 放在了后面             .blue{color:blue;}              class="blue"
vue优化之加快首屏加载速度
Wangdr的博客
07-15 1285
一、依赖优化之 CDN 加速 减少app.js和vender.js的体积，加快加载速度 二、gzip暴力压缩 1.npm安装 npm i compression-webpack-plugin@1.1.12 --save-dev 2.配置，config里的index.js文件 build: { // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all sta
首屏渲染加速和首屏优化
Iforencos的博客
08-14 314
【代码】首屏渲染加速和首屏优化。
VUE渲染后端返回含有script标签的html字符串示例
10-16
在现代Web开发中，前端与后端的交互日益频繁，特别是在构建动态富客户端应用时，如使用Vue.js这样的JavaScript框架。Vue.js允许开发者通过它的模板语法来构建用户界面，但有时候，后端可能会返回包含HTML和...
Vue监听数据渲染DOM完以后执行某个函数详解
10-18
今天小编就为大家分享一篇Vue监听数据渲染DOM完以后执行某个函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈React前后端同构防止重复渲染
08-28
首屏渲染是指在浏览器加载React应用时，首次调用ReactDOM.render()方法生成的虚拟DOM树。在这个过程中，React会遍历所有组件，执行构造函数（对于ES6类组件）以及每个组件的render()方法，最终构建出一个虚拟DOM树。...
影响网页渲染的关键！
wangpeng198688的专栏
05-22 1175
张超 — MAY 21, 2015 经常有站长、开发者、运维疑惑：为什么我们的后台服务器很快，但是用户要看网页里面的内容却需要很长时间？我们在上一篇文章《怪兽大作战: 解析网站打开慢的原因》[http://news.yesky.com/prnews/420/58034920.shtml]中简单介绍了影响网站打开速度的几个指标，感兴趣的同学可以再读一下。今天我们主要讲一下，是哪些因素拖慢了我们的首屏
【包真】我的第一次webpack优化，首屏渲染从9s到1s
程序员成长指北
03-20 257
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群大家好，我是考拉????，本文基于vue2(虽然vue3已出，但是本文也很实用)谈到webp...
首屏渲染优化性能优化
u012963112的博客
01-28 845
登录 首屏加载优化 webpack-bundle-analyzer 分析 优化前，加载时间15s，vendor.js 900k app.js 400k 背景图片900k 背景图片png改为jpg从400k变为40k 开启gzip压缩 vue.config.js中设置plugins gzip vendor.js和app.js缩小三分之一（nginx开启gzip gzip_static on;） config.plugins.push(new CompressionWebpackPlugi
前端如何做极致的首屏渲染速度优化
SAHADEV的专栏
12-24 2506
这里说的极致是技术上可以达到最优的性能。 首先为了降低白屏时间，可以加一个loading效果。 但拿vue项目来说，尤其是以vue-cli创建的项目来说，能做到极致并不容易。 默认vue-cli会在生成的文件头部增加很多的link，而这些link会阻碍后面脚本的处理，等这些脚本处理完才会有dom的生成以及动画的执行。所以，我们的极致目标就是让loading动画尽可能的早。 为了看出优化前优化后的效果差异，一切在浏览器的3G慢速情况下验证。 未完待续。。。 ...
首屏渲染性能优化
weixin_44241773的博客
02-25 1621
前端首屏性能优化综述，能快速了解首屏性能优化的主要方法和内容。
SPA单页面应用首屏加载速度提升方法
moxunjinmu的博客
03-10 941
SPA单页面应用首屏加载速度提升方法
SPA(单页面应用)首屏加载速度该如何优化
油墨香^-^的博客
05-09 215
SPA（单页面应用）是一种Web应用程序架构，它通过在加载应用程序时将所有必需的HTML、JavaScript和CSS资源一次性加载到浏览器，然后通过JavaScript动态地更新页面内容，而不是在用户与应用程序交互时重新加载整个页面。"首屏加载"（首屏渲染）是指在用户第一次访问网页时，浏览器加载并显示的页面内容。在SPA中，由于所有必需的资源在首次加载时被请求并传输到客户端，因此首屏加载通常包括应用程序的整个骨架和初始数据。
javascript2秒后再执行_一个提高执行力的可怕方法
weixin_33119123的博客
12-08 760
今天我想背500个单词。我一定要完成！！！为了有力气背单词，先吃一顿丰盛的早餐鼓劲。哎，有点困了，可能是吃了太多肉，需要睡回笼觉。睡起来有力气背单词。刚睡醒，有点迷糊，清醒的时候背单词更好。先看几个搞笑视频清醒一下。哎呀看多了，是清醒了，怎么感觉脑子有点懵呢，这个时候背单词效率不高。应该出门转转。中午了，要不睡个午觉吧。下午了，先看比赛，如果比赛不看完，背单词心里不踏实。晚上狐朋狗友叫开黑了。睡前...
jq 渲染dom后获取dom节点
03-29
在使用 jq 渲染 DOM 后，可以通过以下方式获取 DOM 节点： 1.通过标签名获取节点： ```javascript $('标签名') ``` 例如： ```javascript var divList = $('div'); ``` 2.通过类名获取节点： ```javascript $('.类名') ``` 例如： ```javascript var boxList = $('.box'); ``` 3.通过 ID 获取节点： ```javascript $('#ID') ``` 例如： ```javascript var logo = $('#logo'); ``` 4.通过属性获取节点： ```javascript $('[属性]') ``` 例如： ```javascript var links = $('[href]'); ``` 注意：以上方法获取到的节点是一个 jQuery 对象，可以通过下标获取到其中的具体 DOM 元素。 例如： ```javascript var div1 = $('div')[0]; // 获取第一个 div 元素 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值