![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
性能优化
一只金牛座的崽
这个作者很懒,什么都没留下…
展开
-
避免过多重排重绘
使用 DocumentFragment 进行 DOM 操作CSS 样式尽量批量修改避免使用 table 布局为元素提前设置好高宽,不因多次渲染改变位置DocumentFragment的使用<ul id="list"></ul> const list = document.querySelector('#list'); const fruits = ['Apple', 'Orange', 'Banana', 'Melon']; const fragment.原创 2022-03-03 17:56:42 · 69 阅读 · 0 评论 -
前端缓存数据
文章目录一、cookie二、localStorage三、sessionStorage四、强制缓存五、协商缓存一、cookie1.无法保存太大的数据(最大仅为4KB)2.请求接口会携带上,浪费带宽二、localStorage1.它能保存更大的数据(IE8上是10MB,Chrome是5MB)2.如果不手动删除,会一直存在写法:保存:localStorage.setItem('localStorage',123)获取:localStorage.getItem('localStorage'原创 2022-02-21 19:55:39 · 1292 阅读 · 0 评论 -
在地址栏输入url地址发生了什么?
一名前端臭弟弟的学习新得! (´๑•_•๑)最近辞职找工作阶段,总结了一点计算机网络的知识点和大家分享问题:当在输入框输入url时 浏览器会发生什么????1.首先在输入框中输入url2.浏览器先查看浏览器缓存-系统缓存-路由缓存,如果缓存中有,会直接在屏幕中显示页面内容,若没有跳到第三步3.在发送http请求前 ,需要域名解析(DNS解析),获取物理服务器的ip地址4.浏...原创 2020-04-06 22:31:41 · 582 阅读 · 0 评论 -
性能优化之事件委托
在介绍事件委托之前先介绍事件流。事件流描述的是从页面中接受事件的顺序,但IE和Netscape开发团队有了差不多完全相反的事件流概念。IE的事件流是事件冒泡,即事件最开始时最具体的元素接受,然后逐级向上传播到较为不具体的节点,节选书中的图例子Netscape的事件流是事件捕获,即事件最开始时不具体的元素接受,然后逐级向下传播到具体的节点,节选书中的图例子然后看一下事件委托实例 <ul id="list"> </ul>在项目中会遍历数据,当点击时获取一些值,可以直原创 2020-05-14 03:09:30 · 168 阅读 · 0 评论 -
优化加载图片和常见的图片格式
网页制作会用到的图片格式有哪些?png-8,png-24,jpeg,gif,svg,但这些都不能满足我的要求。科普一下Webp:WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%<picture class="picture"> <原创 2021-07-26 19:19:16 · 416 阅读 · 0 评论 -
vue指令-防止重复点击
vue指令-防止重复点击import Vue from 'vue'// 防重复点击(指令实现)Vue.directive('preventReClick', {inserted (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled =原创 2021-07-26 18:25:01 · 182 阅读 · 0 评论 -
防抖和节流
一名前端臭弟弟的学习新得! (´๑•_•๑)防抖:指触发事件后在n秒内函数只执行一次,计时重新计算。function fn() { console.log('测试') } function fd(func,wait){ var timeout; return function...原创 2020-03-27 19:38:03 · 922 阅读 · 0 评论