07 2022 档案
摘要：作者：黄子涵 链接：黄子涵 文章正文 检测是否开启开启 HTTP/2 首先使用一些在线检测网站，检测一下有没有开启HTTP/2。 http://web.chacuo.net/nethttp2check https://myssl.com/http2_check.html?domain=www.hua
阅读全文
摘要：前言 在这之前，网站引入了高德地图的服务，还有添加时间轴的模块。 网站性能表现 网站的PC端性能表现 网站的移动端性能表现
阅读全文
摘要：问题 如题所示 答案 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()) + ")" } 答案 这个函数就是
阅读全文
摘要：问题 如题所示 答案 相关源码： function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1,
阅读全文
摘要：问题 如题所示 相关源码： function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleShe
阅读全文
摘要：问题 如题所示 答案 相关源码： response: () => { let hzhCount = 1 + ~~(Math.random() * 5) return { code: 20000, data: getComment(hzhCount) } } Math.random() 综上所述，Ma
阅读全文
摘要：问题 如题所示 答案 相关源码： .donate_inner:after, .donate_inner:before { content: ""; position: absolute; left: 0; bottom: 45%; margin-left: -8px; border-top: 8px
阅读全文
摘要：问题 如题所示 答案 相关源码： .hzh-friend-item:nth-of-type(3n) { margin-right: 5%; } css中margin属性值百分比的使用 综上所述，margin-right: 5%;这个样式的含义是基于它的父元素的宽度5%来计算右外边距。
阅读全文
摘要：问题 如题所示 答案 相关源码： .hzh-friend-item:nth-of-type(3n) { margin-right: 0; } 详解css3中的:nth-of-type(n) 综上所述，:nth-of-type(3n)这个选择器选择的是同类型的第3n个同级兄弟元素。 你会看到第一行的第
阅读全文
摘要：问题 如题所示 答案 相关源码： export function getTimeInterval(startDate, endDate = Date.now()) { if (arguments.length 0) { return null } let startTime; let endTime
阅读全文
摘要：问题 如题所示 答案 相关源码： export function getTimeInterval(startDate, endDate = Date.now()) { if (arguments.length 0) { return null } let startTime; let endTime
阅读全文
摘要：问题 如题所示 答案 相关源码： export function getTime(type) { if (type 'start') { return new Date().getTime() - 3600 * 1000 * 24 * 90 } else { return new Date(new
阅读全文
摘要：问题 如题所示 答案 相关源码： .hzh-entry-title { font-size: 21px; font-weight: 600; line-height: 50px; margin: 0 0 0 17%; position: relative; z-index: 1; white-spa
阅读全文
摘要：问题 如题所示 答案 相关源码： .hzh-entry-title { font-size: 21px; font-weight: 600; line-height: 50px; margin: 0 0 0 17%; position: relative; z-index: 1; white-spa
阅读全文
摘要：问题 错误关键字段： Uncaught SyntaxError: Unexpected token u in JSON at position 0 错误的截图： 错误的效果图： 答案 错误之前的代码： function hzhXHR2ExpressReqWrap(hzhRespond) { retu
阅读全文
摘要：问题 如题所示 答案 相关源码： service.interceptors.request.use( config => { // do something before request is sent // if (store.getters.token) { // config.headers[
阅读全文
摘要：问题 如题所示 答案 相关源码： const mutations = { SET_SOCIALS: (state, v) => { state.socials = v; } } const actions = { getSocials: ({commit,state}) =>{ return new
阅读全文
摘要：问题 如题所示 答案 相关源码： notice() { return this.$store.getters.notice } const getters = { loading: state => state.loading, runTimeInterval: state => state.run
阅读全文
摘要：问题 如题所示 答案 相关源码： loading: { immediate: true, handler: (n, o) => { let htmlBodyElement = document.querySelector('body'); htmlBodyElement.style.overflow
阅读全文
摘要：问题 如题所示 答案 相关源码： handler: (n, o) => { let htmlBodyElement = document.querySelector('body'); htmlBodyElement.style.overflowY = n ? 'hidden' : 'auto'; }
阅读全文
摘要：问题 如题所示 问题 相关源码： .loader { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: column; flex-grow: 1; flex-shrink: 0; flex-basis: 25
阅读全文
摘要：问题 如题所示 答案 相关源码： .loader { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: column; flex-grow: 1; flex-shrink: 0; flex-basis: 25
阅读全文
摘要：问题 如题所示 答案 相关源码： const getters = { loading: state => state.loading, runTimeInterval: state => state.runTimeInterval, notice: state => state.websiteInf
阅读全文
摘要：问题 如题所示 答案 css3 unset属性 CSS 中的 initial、inherit、unset、revert、all 相关源码： <div class="hzh-back-top" v-show="hzhShow" @click.stop="hzhGetTop"> <img class="
阅读全文
摘要：问题 如题所示 background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; 答案 CSS 背景位置 background
阅读全文
摘要：问题 如题所示 答案 相关源码： .footer-main .footer-item:nth-child(3){ flex: 2; } css选择器:nth-child()的用法 这里的： .footer-item:nth-child(3) 控制的是.footer-item元素的第三个直接子元素。
阅读全文
摘要：问题 如题所示 答案 相关源码： created(){ this.getSocial(); this.$store.dispatch('initComputeTime'); } vue dispatch用法_Vuex基本用法 Vue进阶（二十四）：vuex 之 commit 和dispatch 这里
阅读全文
摘要：问题 如题所示 答案 相关源码如下： initComputeTime: ({commit}) => { commit('GET_RUNTIME_INTERVAL'); }, vuex直接修改state 与 用commit提交mutation来修改state的差异 这里commit函数的作用是提交到m
阅读全文
摘要：问题 如题所示，相关源码如下： // style.less @fish-sm:2vmin; @fish-md:3vmin; @fish-lg:5vmin; 答案 LESS详解之变量(@) 根据上面，@符号后面是在设置变量，分别设置三个变量fish-sm、fish-md、fish-lg，但是用在哪里呢
阅读全文
摘要：问题 如题所示 答案 相关源码： export function getTime(type) { if (type 'start') { return new Date().getTime() - 3600 * 1000 * 24 * 90 } else { return new Date(new
阅读全文
摘要：问题 如题所示 答案 相关源码： export function getTime(type) { if (type 'start') { return new Date().getTime() - 3600 * 1000 * 24 * 90 } else { return new Date(new
阅读全文
摘要：问题 如题所示 答案 相关源码： <article class="post post-list"> ...... </article> html5用article标记什么意思,html中article标签的作用是什么？ 这个标签主要用于文章类的布局。
阅读全文
摘要：问题 如题所示 答案 transition: opacity .4s ease-out; CSS3 Transition 这个样式是用于过渡，这个过渡属性是透明度，因为只有一个时间，第一个时间是过渡持续的时间，这里是0.4s，过渡的函数类型是减速。
阅读全文
摘要：问题 如题所示 答案 Absolute（绝对定位）与relative（相对定位）的图文讲解 absolute相对于最近的父元素进行定位，relative相对于自身原来的位置进行定位。
阅读全文
摘要：问题 如题所示 答案 相关源码： object-fit: cover; 图片变形处理，设置属性object-fit: cover完美解决！ [css3 object-fit: cover解决图片变形问题](https://blog.csdn.net/badgirl_hong/article/deta
阅读全文
摘要：问题 如题所示 答案 相关源码： animation-play-state: paused; 怎么使css 动画停止,如何用纯CSS方式实现CSS动画的暂停与播放效果？animation-play-state属性介绍（详解）... 根据上面，这是样式是用来控制动画的暂停。
阅读全文
摘要：问题 如题所示 答案 相关源码： created(){ this.getWebSiteInfo() this.getSocial() }, Vue进阶（三十六）：created() 详解 vue中created、mounted等方法整理 Vue生命周期中mounted和created的区别 vue
阅读全文
摘要：问题 如题所示 答案 相关源码： * { font-family: miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, sans-serif; margin: 0; padding: 0; text-decorati
阅读全文
摘要：问题 如题所示 答案 相关源码： <template> <div id="app" v-cloak> <loading></loading> <layout-header></layout-header> <layout-body></layout-body> <layout-footer></la
阅读全文
摘要：问题 如题所示 答案 ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #d81e06; } ::-webkit-sc
阅读全文
摘要：问题 如题所示 答案 相关源码： blockquote, q { quotes: none; } blockquote 和 q 标签 css样式 这个样式是为了去掉双引号。
阅读全文
摘要：问题 如题所示 答案 相关源码： export function param2Obj(url) { const search = url.split('?')[1] if (!search) { return {} } return JSON.parse( '{"' + decodeURICompo
阅读全文
摘要：问题 如题所示 答案 相关源码： export function param2Obj(url) { const search = url.split('?')[1] if (!search) { return {} } return JSON.parse( '{"' + decodeURICompo
阅读全文
摘要：问题 如题所示 答案 相关源码： const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { const value = formatObj[key] // Note: getDay() returns 0 on Sun
阅读全文
摘要：问题 如题所示 答案 相关源码： if ((/^[0-9]+$/.test(time))) { // support "1548221490638" time = parseInt(time) } else { time = time.replace(new RegExp(/-/gm), '/')
阅读全文
摘要：问题 如题所示 答案 相关源码： if ((typeof time 'string')) { if ((/^[0-9]+$/.test(time))) { // support "1548221490638" time = parseInt(time) } else { time = time.re
阅读全文
摘要：问题 如题所示 答案 相关源码： if ((typeof time 'string')) { if ((/^[0-9]+$/.test(time))) { // support "1548221490638" time = parseInt(time) } else { time = time.re
阅读全文
摘要：问题 如题所示 答案 相关源码： export function parseTime(time, cFormat) { if (arguments.length 0) { return null } const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}
阅读全文
