【性能优化】作为一名前端工程师,网页白屏了该怎么做

2023-11-13

上周面试被问到这个问题,磕磕绊绊地答了一点,写个博客记录一下解决的主要思路

检查网络连接

首先检查网络连接是否正常,如果网络不稳定或者中断了,可能会导致网页无法加载

F12开发者工具

查看控制台输出

查看错误与警告信息判断问题所在

检查网页代码

查看代码中是否有明显的语法、逻辑错误等,进行优化

检查资源加载

通过查看网络请求和响应信息分析资源加载情况

优化页面性能

前端优化

  1. 减少打包体积:通过路由懒加载、静态CDN、大图片压缩

  1. 异步化加载资源:未在视口中显示的图片懒加载,js资源加载放在页面底部或加defer、async属性,css加载用link标签而不是@import

  1. 减少请求次数:如使用雪碧图、小图片转base64

服务端优化

  1. CDN加速:使用 CDN 将网站资源缓存到全球各地的服务器上,从而减少网络传输时间,提高资源加载速度。常见的有阿里云、腾讯云CDN

  1. Gzip压缩:压缩资源减少传输的数据量。服务器端开启 Gzip 压缩。

  1. 设置缓存策略:Nginx中进行缓存配置。

  1. 开启HTTP2:在配置了https后可开启http2。

  1. 提升服务器性能:如负载均衡、反向代理等。

使用工具检测页面性能

Lighthouse、PageSpeed Insights等工具可以帮助开发者分析页面性能,并提出优化建议。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【性能优化】作为一名前端工程师,网页白屏了该怎么做 的相关文章

  • 事件委托Tab栏切换

  • Typecho 最新XC主题 去除域名授权全解密源码

    简介 Typecho 最新XC主题 去除域名授权全解密源码 这是一款多样式主题 首页支持六种主题样式 支持Pjax优化访问速度 多种单页 如友链 说说等 评论支持表情 自定义编辑器 支持其他样式功能 该主题功能性挺高 比较花里胡哨 感觉有一
  • CMAKE_MAKE_PROGRAM is not set 解读

    目录 CMAKE MAKE PROGRAM 未设置 错误原因 解决方案 示例1 GNU Make 示例2 Ninja CMakeLists txt 的结构 示例 CMakeLists txt 文件 总结 CMAKE MAKE PROGRAM
  • 【面试】 前端竞争压力大?揭秘让你们学后端的真实动机!

    前端开发属于程序员吗 网友是这样回答的 看完前端同学的评论 我悟了 你们让人都去学后端卷 然后减小前端竞争压力是吧 哈哈哈 你们这帮老6 于是我去拿出了我收藏的 某前端招聘JD来盘一盘 那些觉得 是个人都能干前端 的同学们想必已经熟练掌握了
  • Element-Puls中el-upload组件结合vue-draggable-plus实现上传支持拖拽排序(并保留el-upload原有样式、预览、删除)等功能

    展示效果 需求 需求想要一个可拖拽排序的图片列表 但是发现el upload虽然可以实现照片墙 但是没办法拖拽 实现思路 使用 vue draggable plus 拖拽插件 隐藏Upload原有的已上传文件列表 自定义上传后文件列表的样式
  • JS特效第74弹:旅游城市图片百叶窗切换React特效

    全屏的旅游城市景点图片滑动百叶窗轮播切换效果 先来看看效果 一部分关键的代码如下 div div
  • 每天10个前端小知识 <Day 8>

    1 Javascript中如何实现函数缓存 函数缓存有哪些应用场景 函数缓存 就是将函数运算过的结果进行缓存 本质上就是用空间 缓存存储 换时间 计算过程 常用于缓存数据计算结果和缓存对象 缓存只是一个临时的数据存储 它保存数据 以便将来对
  • 每天10个前端小知识 <Day 6>

    前端面试基础知识题 1 使用js实现二分查找 二分查找 也称为折半查找 是指在有序的数组里找出指定的值 返回该值在数组中的索引 查找步骤如下 从有序数组的最中间元素开始查找 如果该元素正好是指定查找的值 则查找过程结束 否则进行下一步 如果
  • Android SDK开发艺术探索(五)安全与校验

    一 前言 本篇是Android SDK开发艺术探索系列的第五篇文章 介绍了一些SDK开发中安全方面的知识 包括资源完整性 存储安全 权限校验 传输安全 代码混淆等知识 通过基础的安全配置为SDK保驾护航 探索SDK开发在安全方面的最佳实践
  • 基于Loadrunner的性能分析及调优经验分享

    公司某个系统的微信端计划将开放给几百上千的人员登录查询 并且登录账号为同一账号多人使用 后台服务能够支撑起多用户的并发操作以及成百上千人登录微信端对生产数据库或者登录查询的性能效率高成为交付可靠生产环境的必要条件 因此 项目组决定提交测试
  • 课设:NFA确定化和最小化程序的设计与实现(html+css+js实现)

    文章目录 问题描述 待解决问题 1 如何存储NFA或者是DFA 2 NFA多初态问题 3 子集化过程思路 4 分割法过程思路 使用方法 下载链接 问题描述
  • JVM优化之 -Xss -Xms -Xmx -Xmn 参数设置

    JVM优化之 Xss Xms Xmx Xmn 参数设置 XmnXmsXmxXss有什么区别 Xmn Xms Xmx Xss都是JVM对内存的配置参数 我们可以根据不同需要区修改这些参数 以达到运行程序的最好效果 Xms 堆内存的初始大小 默
  • vue实现 marquee(走马灯)

    样式 代码 div class marquee prompt div class list prompt span class prompt item span div div data return listPrompt xxx xxxx
  • 程序员找工作难!拿到外包公司的 offer 我应该去么?

    引言 前一阵子有一个帖子引起了非常广泛的讨论 描述的就是一个公司的外包工作人员 加班的时候因为吃了公司给员工准备的零食 被公司的HR当场批评 这个帖子一发出来 让现在测试行业日益新增的外包公司备受关注 那么外包公司和非外包公司有什么样的不一
  • Synchronized 锁机制

    为了避免临界区的竞态条件发生 可以用非阻塞式的原子变量 也可以用阻塞式的锁 Java 多线程的锁都是 对象锁 采用互斥的方式让同一时刻只有一个线程能够持有对象锁 从而进入临界区 而其它线程只能阻塞等待 因此不用担心线程上下文切换造成共享资源
  • 外包干了2个月,技术倒退2年。。。

    先说一下自己的情况 本科生 20年通过校招进入深圳某软件公司 干了接近4年的 功能测试 今年国庆 感觉自己不能够在这样下去了 长时间呆在一个舒适的环境会让一个人堕落 而我已经在一个企业干了四年的功能测试 已经让我变得不思进取 谈了3年的女朋
  • 软件测试面试:还没有自动化测试项目经验,3个项目帮你走入软测职场!

    2024软件测试面试刷题 这个小程序 永久刷题 靠它快速找到工作了 刷题APP的天花板 CSDN博客 文章浏览阅读2 3k次 点赞85次 收藏11次 你知不知道有这么一个软件测试面试的刷题小程序 里面包含了面试常问的软件测试基础题 web自
  • 每日变更的最佳实践

    在优维公司内部 我们采用发布单的方式进行每天的应用变更管理 这里给各位介绍优维的最佳实践 变更是需要多角色合作的 而且他是整体研发流程的一部分 在优维内部 我们坚持每日变更 打通开发环节到最终发布上线的全过程 在保证质量的前提下 尽可能提升
  • 如何在 Python 脚本中使用 Google OAuth2

    在使用 Python 脚本将视频上传到 YouTube 频道时 若希望将视频上传到第二个频道 需要解决 OAuth2 授权的问题 解决方案 创建新的 Google Cloud 项目 from google oauth2 import ser
  • 【前端】canvas图片加文字

    注释标记了操作步骤 import React Component createRef from react class CertifyImgRender extends Component bgRef createRef

随机推荐

  • 记一次MQ并发消费导致任务状态异常问题

    背景 项目中有一个短信群发任务 例如1次要发送1W条短信 系统会获取任务中每一条短信的MQ并发发送短信 任务默认状态是未发送 状态码 0 需要在这一批任务发送第一条短信的时候 将任务状态修改为发送中 状态码 1 在任务发送结束将状态修改为发
  • 轻量级卷积神经网络的设计技巧

    点击上方 小白学视觉 选择加 星标 或 置顶 重磅干货 第一时间送达 这篇文章将从一个证件检测网络 Retinanet 的轻量化谈起 简洁地介绍 我在实操中使用到的设计原则和idea 并贴出相关的参考资料和成果供读者参考 因此本文是一篇注重
  • networkmanager is not running 网络管理没有运行

    如果确定网卡什么都安装好了 可以下面指令打开 network manager 服务 打开 sudo service network manager start PS network manager 服务 关闭 sudo service ne
  • 基于Linux的人脸识别功能

    前言 需要在翔云平台注册并购买人脸识别服务 通过https协议与个人中心的key和secret 与平台建立连接 说明 使用http协议需要安装libcurl库 而使用https协议需要安装libcurl库选择加入ssl服务 ssl服务依赖于
  • emoji引起的mysql utf-8mb4问题

    场景 在业务中发现备注输入emoji表情后后台系统异常 定位原因发现mysql表不支持此类字符集 mysql版本为5 6 字符集为utf 8 解决 将字符集改为utf 8mb4 报错信息 Incorrect string value xF0
  • 二叉搜索树-红黑树

    前面介绍了AVL树 虽然AVL树将二叉树的高度差保证在1 但是实现的太过复杂 因为要不断调整平衡因子 故而要来介绍另外一个用途比较广的结构 红黑树 红黑树 先来看来红黑树的特性 1 每个节点非红即黑 2 根节点为黑色 3 不能有连续的红节点
  • 智能优化算法——灰狼优化算法(Python&Matlab实现)

    目录 1 灰狼优化算法基本思想 2 灰狼捕食猎物过程 2 1 社会等级分层 2 2 包围猎物 2 3 狩猎 2 4 攻击猎物 2 5 寻找猎物 3 实现步骤及程序框图 3 1 步骤 3 2 程序框图 4 Python代码实现 5 Matla
  • 各大网站镜像源

    可设置maven npm 等等的下载源 1 腾讯镜像源 https mirrors cloud tencent com 2 华为开源镜像站 https mirrors huaweicloud com 3 阿里巴巴开源镜像站 https op
  • 怎样提取一个数的十位个位百位千位

    设一个数为n 则在C语言中其个位 十位 百位 千位依次这样计算zhi n 1 10 n 10 10 n 100 10 n 1000 10 include
  • Fibonacci数列

    题目描述 Fibonacci数列是这样定义的 F 0 0 F 1 1 for each i 2 F i F i 1 F i 2 因此 Fibonacci数列就形如 0 1 1 2 3 5 8 13 在Fibonacci数列中的数我们称为Fi
  • 测试用例(三)需求分析与提取测试点

    一 需求分析 一般由产品经理完成 1 业务需求 关注系统是否满足业务 2 用户需求 关注系统是否满足用户习惯 3 功能需求 关注系统是否满足功能要求 如果没有需求怎么办 参考市面上已经上线的同类产品 如果需求模糊怎么办 收集整理已有的需求
  • ES了解多少?说说你们公司的ES集群架构

    ES了解多少 说说你们公司的ES集群架构 介绍 核心概念 如何保证ES集群架构的安全性 ES的使用场景 介绍 ES 是一个基于Lucene框架的搜素引擎产品 you know for search 提供了Restful风格的操作接口 Luc
  • vue中通过render函数给子组件设置ref

    正常我们的写法是 这样ref不会生效 h是作用在渲染的时候的 而ref是渲染之后才创建的 因此在h函数中使用ref是无效的 render h params gt return h expandRow ref child props row
  • linux运行run文件显示cannot execute binary file

    感谢朋友支持本博客 欢迎共同探讨交流 由于能力和时间有限 错误之处在所难免 欢迎指正 如果转载 请保留作者信息 博客地址 http blog csdn net qq 21398167原博文地址 http blog csdn net qq 2
  • Linux系统查看内存使用情况

    操作系统 文章目录 操作系统 一 查看内存使用情况 1 使用 free 命令 2 查看 proc meminfo 3 使用 vmstat 命令 4 使用 top 命令 5 htop 命令 二 查看物理内存信息 小结 参考链接 一 查看内存使
  • 【Python 3.7】餐馆:创建一个名为 Restaurant 的类,其方法 __init__() 设置两个属性:restaurant_name 和 cuisine_type 。

    Python 3 7 餐馆 创建一个名为 Restaurant 的类 其方法 init 设置两个属性 restaurant name 和 cuisine type 创建一个名为 describe restaurant 的方法和一个名为 op
  • 【Python】将Numpy数组保存为图像

    点击阅读原文
  • U2Net、U2NetP分割模型训练---自定义dataset、训练代码训练自己的数据集

    前言 博客很久没有更新了 今天就来更新一篇博客吧 哈哈 最近在做图像分割相关的任务 因此 写这么一篇博客来简单实现一下分割是怎么做的 内容简单 枯燥 需要耐心看 哈哈 博客的内容相对简单 比较适合刚接触分割的同学参考学习 这篇博客在算法训练
  • SpringBoot的starter原理及如何自定义starter

    一 starter简介 Starter是Spring Boot中的一个非常重要的概念 Starter相当于模块 它能将模块所需的依赖整合起来并对模块内的Bean根据环境 条件 进行自动配置 使用者只需要依赖相应功能的Starter 无需做过
  • 【性能优化】作为一名前端工程师,网页白屏了该怎么做

    上周面试被问到这个问题 磕磕绊绊地答了一点 写个博客记录一下解决的主要思路 检查网络连接 首先检查网络连接是否正常 如果网络不稳定或者中断了 可能会导致网页无法加载 F12开发者工具 查看控制台输出 查看错误与警告信息判断问题所在 检查网页