随笔分类 - 查漏补缺
摘要：问题 如题所示 答案 flex: 1px; flex-grow: 1; flex-shrink: 1; flex-basis: 1px; flex:1详解 综上所述，flex-basis: 1px;决定了主轴上元素初始大小为1px。
阅读全文
摘要：问题 如题所示 答案 Vue中的scoped的实现原理以及scoped穿透的用法 综上所述，scoped的作用是防止组件的样式被污染，实现组件样式的模块化。
阅读全文
摘要：问题 如题所示 答案 Vue-router 中hash模式和history模式的区别 综上所示，点到为止，hash模式比history模式在地址栏中多了个#。
阅读全文
摘要：问题 如题所示 答案 相关源码： Vue.directive('highlight',function (el) { let blocks = el.querySelectorAll('pre code'); blocks.forEach((block)=>{ hljs.highlightBlock
阅读全文
摘要：图像优化前性能报告 查漏补缺——说说怎么使用谷歌浏览器的Lighthouse对网站进行性能评估 图像优化后性能报告 移动端性能报告 PC端性能报告 表格整理 | 参数 | 移动端（前） | 移动端（后） | 是否优化 | | : | : | : | : | | 首次内容绘制（First Conten
阅读全文
摘要：问题 如题所示 答案与实践 参考答案 vue项目你一定会用到的性能优化！ 实践 一般来说，本地项目会比线上的项目的分数要低，所以我们现在首要任务是把本地项目的评分提高。 由于这篇文章： 查漏补缺——说说怎么使用谷歌浏览器的Lighthouse对网站进行性能评估 已经记录好我们性能优化之前的一个重要的
阅读全文
摘要：问题 如题所示 答案与实践 参考答案 vue项目你一定会用到的性能优化！ 项目的性能评估 本地项目的性能评估 本地项目移动端的性能评估 本地项目移动端性能评估的说明 首次内容绘制（First Contentful Paint）。即浏览器首次将任意内容（如文字、图像、canvas 等）绘制到屏幕上的时
阅读全文
摘要：问题 如题所示 答案 【包真】我的第一次webpack优化，首屏渲染从9s到1s vue-cli webpack 首屏加载性能优化 综上所述，我把代码中的这两行代码修改了： Vue配置compression-webpack-plugin实现Gzip压缩 但是出现像上面的问题，按照上面进行修改，将bu
阅读全文
摘要：问题 如题所示 答案 Network选项中最下面的数据是啥意思？ chrome开发者工具network选项卡最下面的状态栏数据说明 综上所述，可以得出以下结论： 3/24requests —— 总共有24请求，本次一共监听到3个请求 4.7MB/5.2MB transferred —— 资源总共有5
阅读全文
摘要：问题 如题所示 答案 怎么知道打开一个网页需要多少时间呢？ 如何查看一个网站的加载时间
阅读全文
摘要：问题 如题所示 答案 相关源码： router.beforeEach((to, from, next) => { let title = '黄子涵' if (to.meta.params){ title = `{to.params[to.meta.params]
阅读全文
摘要：问题 如图所示 答案 相关源码： #article-menus{ position: sticky; top: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); border-radius: 3px; padding: 15px; width: 300px; t
阅读全文
摘要：问题 如题所示 答案 相关源码： !function (e, t, a) { function n() { c( " .heart{ width: 10px; height: 10px; position: fixed; background: #f00; transform: rotate(45d
阅读全文
摘要：问题 如题所示 function r() { for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : ( d[e].y--, d[e].scale +=
阅读全文
摘要：问题 如题所示 答案 相关源码： for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : ( d[e].y--, d[e].scale += .004,
阅读全文
摘要：问题 如题所示 相关源码： e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame ||
阅读全文
摘要：问题 如题所示 相关源码： function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } 答案 var t = "function"
阅读全文
摘要：问题 如题所示 答案 相关源码： d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), CSS设置Alpha值 alpha: 1这个样式的作用是设置元素的不透明度，样式值为1是就是
阅读全文
摘要：问题 如题所示 相关源码： function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } 答案 这个函数就是
阅读全文
