完整代码地址： https://github.com/dirkhe1051931999/vue-ssr-template demo 地址： https://github.com/dirkhe1051931999/common-demo/tree/master/vue-ssr-demo 服务端渲染、SPA、同构 服务端渲染：后端不仅仅进行数据的获取处理，而且也服务页面生成，最终传给客户端（浏览器）是…

WebP 相对于 PNG、JPG 有什么优势？--- https://www.zhihu.com/question/27201061 webp 的兼容写法 安卓支持 webp，ios 不支持 webp --- https://caniuse.com/#search=webp ios 下要使用 webp 可以导入下面的库 webpjs--- https://github.com/obartra/we…

PWA：渐进式网页应用程序；关键技术：Service Worker、Manifest 、Push Notification；直观上的体现：无网络的时间，可以立即加载出数据和页面 这次主要实践 Service Worker Service Worker Service Worker(SW)是一个离线缓存文件，SW 作用于浏览器与服务器之间，可以理解为一个代理服务器 具体的 Service Worke…

上图是用户监测性能模型的不同阶段，可以看出，页面加载被定义成很多个阶段，每一个阶段都对应有 Performance Timing 页面性能指标 :衡量网络链路和服务器响应性能时间 :带宽时间 :打开页面开始到页面开始有东西呈现的时间（TTFB+HTML 下载时间+头部资源加载时间） 公式 页面开始渲染的时间点-页面开始请求时间点 如何获取 (chrome.loadTimes().firstPain…

，涵盖的知识面非常广，如果只是死记硬背，根本无法理解其中的流程与原理，我学习的方式是，先整体明白有哪些流程，然后逐个流程慢慢理解 整体过程 浏览器缓存 彻底理解浏览器的缓存机制 DNS 解析 DNS 域名解析 TCP 链接 TCP 连接 HTTP 请求与响应 HTTP 请求与响应 浏览器解析渲染页面 浏览器自上而下逐行解析 HTML、词法分析、语法分析、构建 DOM 树 当遇到 CSS 外链时，主…

此文是 flex 学习的回忆与补充， 源码地址 BFC 和 FFC 是什么 css 布局的各种 FC 简单介绍：BFC，IFC，GFC，FFC 一文中详细的讲解了 BFC 和 FFC 的概念与区别，总结起来为以下几点 ，格式化上下文，渲染区域的渲染规则会决定子元素的排列 ，块级格式化上下文，1、内部的 box 垂直方向紧挨着；2、内部两个相邻的 box margin 会重叠，3、BFC 不会和 f…

em 是什么 em 是相对单位， 在 font-size 中使用 em， 代表相对父元素字体大小， 在其他属性中使用 em， 意味着相对当前选择器字体大小 em 的题 问：s1 s1 s5 s6 的 font-size 各是多少？答案在底部 rem 是什么 rem 作为非根元素时， 相对于根元素大小 rem 的本质是基于宽度的等比缩放， 一般使用 js 来设置 弹性布局与响应式布局 弹性布局是响应…

keep-alive 是什么 keep-alive 是 vue 的内置组件，它自身不会渲染成一个 DOM，也不会出现在父组件链中， 使用 keep-alive 包裹的组件会有 和 两个事件；activated：组件激活时调用，deactivated：组件停用时调用，这两个钩子在服务器端渲染期间不被调用 不使用 keep-alive：生命周期钩子(beforeRouteEnter --> creat…

如果对 z-index（层叠样式表）是什么还不太自信，可以看 MDN 使用 z-index 常见的问题 为什么我设置了 z-index:9999，或者 z-index:-9999，但是没生效 设置了定位属性，也设置 float 属性，怎么 z-index 就出问题了 z-index:0,z-index:1,z-index auto 有什么区别 定义一些概念 定位元素：设置了 position：re…

如何启动 操作步骤 一开始只有两个选项: default(默认配置)、Manually select features(手动配置)和自定义模板，根据自己情况选择 根据你的项目需要来选择配置,空格键是选中与取消，A 键是全选 选择 css 预处理器 如果你选择了 Css 预处理器选项，会让你选择这个 是否使用路由的 history 模式：一般选择 no 选择 Eslint 代码验证规则：不勾这个->…

webpack 的运行流程 npm run dev (webpack-dev-server --inline --progress --config build/webpack.dev.conf.js) 在 配置了一些参数 调用 npm run build(node build/build.js) 引入了配置文件，如 npm run dev 流程中的配置文件 调用 webpack.prod.con…

组件化 组件化，把页面拆分成若干个组件，每个组件依赖的 css，js，模板，图片等资源放在一块，组件之间是相互独立的，可已复用与嵌套 组件 vnode 的创建什么时候执行 在 vm._update 中会调用_createComponent 方法，这个方法有一段代码是先判断 tag 是否是一个普通 div，如果是普通 div，那么会实例化一个普通的 VNode，否则就通过 createCompone…

animation 与 transition 的区别 作为移动端开发，css3 动画是基本功之一，在工作中难免遇到动画相关，那就必须先得搞懂 animation 和 transition 的区别 animation 的属性 animation-name keyframe 的名称 animation-duration 完成 keyframe 的花时间 单位是秒 animation-timing-fu…