性能优化
关注
分享
扫一扫
自由的音符
这个作者很懒，什么都没留下…
展开
-
4.怎么理解vue中的diff算法?
怎么理解vue中的diff算法?整体策略：深度优先，同层比较转载 2021-12-06 18:01:56 · 2025 阅读 · 0 评论 -
2.vue组件data为什么必须是一个函数，而vue的根实例则没有限制
源码中找答案：src/core/instance/state.js-initData()多实例的情况下，为了保证大家的状态的不污染、不干扰 需要是一个函数函数每次执行都会返回新的data对象实例测试代码：<html> <head> <title>Vue事件处理</title> </head> <body> <div id="demo"> <h1>vue组件data为什么必须是个函数?原创 2021-12-06 17:04:51 · 533 阅读 · 0 评论 -
1.v-if和v-for哪个优先级高?如何正确使用避免性能问题
源码：el.staticRoot=>el.once=>el.for=>el.if=>el.tag 执行顺序两者同级时，渲染函数如下：(function anonymous(){with(this){return_ .c('div' ,{attrs:{"id":"demo"}},[_ _c('h1' ,[_ _v("v-for和v-i f谁的优先级高?应该如何正确使用避免性能问题? ")]),_v(" ")，_1((children)，function(chi1d){r原创 2021-12-06 15:38:07 · 359 阅读 · 0 评论 -
浏览器解析URL
浏览器解析 URL 过程：用户输入 URL 地址。浏览器对 URL 地址进行 DNS 域名解获得IP地址。建立 TCP 连接（三次握手）。浏览器向 web 服务器发送一个 HTTP 请求报文。服务器返回 HTTP 响应报文给客户端。关闭 TCP 连接（四次挥手）。浏览器解析文档资源并渲染页面。...原创 2021-11-29 16:27:12 · 456 阅读 · 0 评论 -
面试官：说说Webpack中Loader和Plugin的区别？编写Loader，Plugin的思路？
一、区别前面两节我们有提到Loader与Plugin对应的概念，先来回顾下loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader无法实现的其他事从整个运行时机上来看，如下图所示：可以看到，两者在运行时机上的区别：loader 运行在打包文件之前plugins 在整个编译周期都起作用在Webpack 运行.转载 2021-11-29 15:33:51 · 320 阅读 · 0 评论 -
vite和webpack的区别
wepack原理图vite原理图webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据转载 2021-11-29 15:02:44 · 5980 阅读 · 0 评论 -
前端性能优化
1.http请求越少越好 请求尽量合并 js 合并 | css 合并 | 图片 ->css sprite2.http请求越小越好 压缩： index.css 和 new.css main.css ->main.min.css 如何压缩： 1.手动-淘汰 2.工具 http://tool.oschina.net/原创 2021-08-11 09:27:51 · 121 阅读 · 0 评论 -
css中的回流和重绘理解
html 加载时发生了什么在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tre...原创 2020-02-24 22:10:01 · 361 阅读 · 0 评论 -
防抖和节流
在前端开发过程中，我们经常需要绑定一些持续触发事件，如：resize、scroll、mousemove等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁的去执行函数。通常这种情况下，我们怎么去解决呢？一般来讲，防抖和节流是比较好的解决方案。一、函数的防抖1、什么是函数防抖函数防抖（debounce）:就是让某个函数在上一次执行之后，满足等待某个时间内不再触发此函数后再执行，而在这个...转载 2020-02-24 20:55:43 · 263 阅读 · 0 评论 -
Webpack -- 性能优化
Webpack 性能优化在这一的章节中，我不会浪费篇幅给大家讲如何写配置文件。如果你想学习这方面的内容，那么完全可以去官网学习。在这部分的内容中，我们会聚焦于以下两个知识点：有哪些方式可以减少 Webpack 的打包时间有哪些方式可以让 Webpack 打出来的包更小减少 Webpack 打包时间优化 Loader对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。...原创 2020-02-22 15:48:11 · 236 阅读 · 0 评论 -
性能优化
图片优化计算图片大小对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应...原创 2020-02-21 23:38:42 · 257 阅读 · 0 评论