潘迪海

下面是多次重复销毁两个组件性能的对比,黄色的script区域有了一定程度的减少,浏览器就可以做更多的render或者响应。 当组件随着props:number的变化,组件patch重新渲染的时候,heavy长任务也会重新执行。但是如果能将没有与父组件相互依赖的元素,拆成一个组件…

这次优化的网站是基于vue+nuxt开发的,nuxt是一个vue的SSR框架(它也可以生成一些纯静态的SPA),得益于nuxt本身框架的优化加上服务器端渲染,基于nuxt开发的网站性能已经能达到不错的水平,在正常的WiFi网络环境下网站的首页Lighthouse测试评分已经达到…

正确的使用缓存可以带来巨大的性能提升,节省带宽,减少服务器消耗,但是很多网站对他们的缓存并没有好好管理,导致相互依赖的资源不同步(后面会介绍)。 这个url请求的资源内容不会改变,因此... 写url的地址随着内容的变化而变化.他可以使版本号,修改时间,或者内容的hash。 很…

前面一章我们已经介绍过js引擎是如何通过shape和ICs来优化js对象。如果没看过的同学可以先看前面一章。这一章介绍一下js引擎是如何对原型链进行优化的。 我们都知道js是基于原型链的编程语言,所有的方法都是通过原型链进行共享的。 在js中原型对象就是一个普通的js对象,因为…

前面一章已经介绍了一些javascript一些开发时候可以使用的性能优化技巧,这一章介绍一些js编译器内部机制,帮助你能写出更高效的js代码。 你也通过Object.getOwnPropertyDescriptor(object, 'foo');获得这些属性. array在js…

现代前端程序中,前端资源文件中占绝大部分byte的是javascript。一个现代前端应用程序,javascript包中可能包含以下几种类型的js文件 一个jpeg图片文件下载以后需要被解码,栅格图像,然后渲染到屏幕上。而一个js文件可能花费了相同的时间下载了一个相同大小的js…

随着web浏览器的发展,浏览器的性能越来越好,WebGL和WebAssembly提供越来越多的可能性。很多原本只能在终端运行的程序都开始开发web版本例如CAD的web版本,PS的web版本,figma。这一个个的设计协作平台原本在终端都有插件机制。那么如果在web端能提供一个…

如果我们想要提高我们的前端性能,那么首先你得先只知道怎么测量你的前端性能。但是哪些前端的性能指标我们应该关注呢? 在Web1.0时代当我们讨论到前端性能指标用的最多的就是page load time。到了单页应用程序越来越多的时代,单一的page load time指标已经无法…