性能优化
文章平均质量分 89
李小苶
相信不屈不挠的努力,相信战胜死亡的年轻!
展开
-
使用WebPageTest测量网页性能及报告解读
WebPageTest是一款非常强大的网站性能测评工具,可以选择不同的测试地址、服务器和浏览器。除了需要科学上网外,使用起来还是比较简单方便的。首先进入官网,可以简单的选择测试地址和浏览器。点击Advanced Settings,展开高级设置,可以看到更多的设置项。其中: Connection:链接网络设置,可以选择2G/3G/4G等; Number of Tests to Run:测试次数,最多9次,用于多次测试取平均值,减小误差; Repeat View...原创 2021-03-08 21:13:32 · 2851 阅读 · 0 评论 -
衡量网站性能的指标与测量工具
随着项目功能的丰富与完善,性能问题日益凸显,接下来的文章将由浅入深的分享一些性能优化过程中用到的方法和工具。首先,在优化前,我们要对自己的页面有所了解,响应慢,有多慢?操作卡,有多卡?性能低,有多低?这些都需要一个数据来衡量。优化后,也需要同样的数据来对比判断优化的效果。而不是凭借个人的主观感觉来评判页面性能。一、在之前的文章(Chrome DevTools调试技巧之Network)中,简单介绍了一些描述性能的指标,下面再详细介绍一下network面包中与性能相关的指标。下面是一个请求的waterf原创 2021-03-02 19:22:39 · 815 阅读 · 0 评论 -
Vue.js的九个性能优化
看到一篇文章,干货满满,为了加深自己的印象,转帖过来,同时增加了自己的检验结果和一些思考,原文链接 一、函数式组件,Functional components优化前代码<template> <div class="cell"> <div v-if="value" class="on"></div> <section v-else class="off"></section>...转载 2021-02-24 19:13:05 · 369 阅读 · 0 评论 -
addEventListener不及时remove造成页面卡顿
最近在调试页面性能时,发现由addEventListener添加的keyup和keydown事件一直在执行,甚至当持续按键一段时间松开后,方法里的log还在输出。可见其对性能的影响很严重,已经造成了页面卡顿。先来复习一下addEventListener的用法。element.addEventListener(event, function, useCapture)其中:event是需要绑定的事件名,可绑定的事件,可参考这里。但要注意的是,绑定时不要加'on'前缀。function是绑定原创 2020-12-14 19:32:15 · 1960 阅读 · 0 评论