前言：翻别人代码时，总结发现极大部分使用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都需要启动独立 …
项目性能优化UI库按需加载(打包)问题1. 问题剖析:当开发的项目需要引入第三方的UI组件库(antdmint-uielement-ui)的时, 需要会打包所有组件的js和css, 而项目中只使用了其中少部分组件. 使用按需打包实现只打包使用的组件, 从而减小打包文件大小1.2. 解决方案:下载bebel插件包: babel-plugin-component …
简单来说，DNS 的作用是将域名解析为 IP 地址，解析的过程是耗时的，转化后会做本地缓存，我们的优化的目标主要是针对用户第一次访问站点的时候陷入长时间白屏的问题。DNS 解析可以分为两类，第一类是页面 DNS 解析，当用户输入 url 地址后（比如是第一次访问站点），便开始页面 DNS 解析，这个过程是省不了的，因为你无法在用户访问站点之前就让他提前把 D …
作为一名优秀的web前端人员，不懂响应式布局怎么可以呢？ 今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。我们都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的显示器。所以，我们设计的网页不能在按照1024的标准来设计或者是前端重构了。再加上现在移动互联网的趋势发展这么良 …
这篇文章我们来聊一聊静态资源的缓存策略，如果你准备去做页面的优化，那么这个知识点你就必须得了解。首先明确一下静态资源的概念，静态可以理解为不变的。页面中像js、css、img等文件都是静态文件，因为此类文件你上线什么内容，所有的用户都会获取一样的内容，它是不会变化的，基于这样的特点，这样的文件可以做缓存，提高加载速度。像一般的html文件，在你开发完还需要套 …
作者：addy（许斌），前端开发工程师，文艺青年一枚，写得了文章，编得了代码。作为开发，不仅仅是前端，优化总是你绕不开的事，我们的目标就是要产品变得更快。优化的对象不仅仅指产品本身，还有我们日常的开发流程。从加入团队到现在，大概有一半左右的时间花在了优化上，期间遇到了很多问题，回过头看，优化这件事情并不是那么简单，也是些很琐碎的事情，要打造一个无痛的开发流程 …