以下文章来源于腾讯IMWeb前端团队 ，作者chelsey背景近期在做用户回放系统需求，其中有一环是从 indexedDB 中读取日志并做上报。然而，由于日志的数据量太大，计算处理 indexedDB 的数据比较耗时，容易造成阻塞，导致用户浏览器卡顿。为了解决这个问题，我们想了几种优化手段：使用 Web Worker 读取数据并处理。分片读取、定时轮询、异常 …
前端优化方法
因app首页加载不流畅，于是去检查首页加载项的耗时，最终发现是前端加载时js文件太大，导致首页加载太慢，于是选择了以下方案进行优化。一、安装compression-webpack-plugin插件。前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。1.npm使用下面命令安装npm install - …
?性能优化是个大课题，涉及到了网络、操作系统、Web等一系列知识，每个环节都可以借助相关技术?段来进行优化，所以系统性地围绕一个web页面从请求到展示，到交互的全过程每个环节的知识点去学习，去思考可以每个环节可以做什么优化，然后借助各类网页指标分析去衡量页面性能，那么我们也一定能开发出性能优异的页面，同时面试的时候，与性能相关的问题也是能手到擒来。?关于性能 …
按照先后顺序有以下：1. 去掉无意义的修饰。嗯，我会瞎说吗？除了内容图片，其他的图片的作用是修饰，也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片！所以在优化之前要做的，首先是确认设计，设计本身是否需要用那么多图片？还是说可以更简洁？2. 不用图片。嗯，切图是一件扯淡的事情！不要隔靴搔痒了少年，直接使用CSS替代图片来实现修饰效果吧！如半透明、 …
作者：NewNamehttps:juejin.cnpost7273072756156235834最近看了一篇前端性能优化的文章，之前也没搞过性能优化，就学习了一下。要想搞性能优化，得知道都有哪些和性能相关的指标，得知道有什么工具可以量化地评估网站的性能表现，还得知道怎么进行优化、优化的思路都有啥。学了一波，决定用Lighthouse这款性能测试工具来评估一下 …
前言：翻别人代码时，总结发现极大部分使用vue3的人只会用ref和reactive处理响应式数据无论什么场景都是，但vue官方针对某些应用场景有其它的更好用的响应式api实现响应式，从而达到更好的性能效果。例如深层的树状数据结构可以通过shallowRef实现浅层响应式，不会被深层递归地转为响应式。本文通过例子详细总结几种vue3响应式的高阶用法。一、 sh …
前端开发者往往不太关注页面所占用的内存，因为前端内存的分配与回收基本是依靠系统自动完成的，这个过程对于开发者是无感的但内存优化的作用也同样重要，一个好的网站，内存的优化也是极致的，比如淘宝的首页，只有 10M 大小特别是随着前端项目的逐渐复杂，内存的占用也逐渐攀升，曾经遇到过一个项目：页面的内存超 300M，同时打开几个窗口，就导致了页面崩溃，从此开始重视内 …
前言在这互联网高速发展的时代，人们对于网页打开的速度要求越来越高。加载时间过长，兼容处理不够全面等很容易造成用户流失。作为一名前端开发，优化用户体验是一件永无止境的事情，没有最优，只有更优。前端性能优化方向有很多，今天主要讲解在网络请求上的优化。因涉及的优化方向较多，对于具体细节不再赘述。总体按以下三个方向优化:请求数据控制请求体积减少请求尽其所能请求之数量 …
<link rel="dns-prefetch"> 和 <link rel="preconnect"> 这两个标签都可以优化前端性能，它俩有什么区别呢？浏览器获取资源时，需要把域名转换为 IP 地址，然后才会向服务器发起请求。把域名转换为 IP 的过程叫做 DNS 查询，它的时间会极大影响网页的打开速度 …
web前端性能优化Web前端指网站业务逻辑之前的部分，包括： 1.浏览器加载 2.网站视图模型 3.图片服务 4.CDN服务等 主要优化手段有优化浏览器访问，使用反向代理，CDN等。 1.浏览器访问优化 （1）减少http请求 HTTP协议是无状态的应用层协议，意味着每次HTTP请求都需要简历通信链路，进行数据传输，而在服务器端，每个HTTP都需要启动独立 …