本文只是记录学习过程中的一些性能优化小技巧，并不全面，用于记录和为后续更加完整的优化整合做准备 图片图片格式选择 JPEG 非常适合: 颜色丰富的照片，彩色图大焦点图、通栏 banner 图，结构不规则的图形 不适合：线条图形和文字、图标图形，因为它的压缩算法不太适合这些类型的图形，并且不支持透明度 压缩工具：jpegtran PNG 非常适合: 纯色、透明、线条绘图、图标；边缘清晰、有大块相同颜色区域；颜色数较少单需要半透明 不适合：由于是无损存储，彩色图像体积太大，所以不太适合颜色丰富，彩色大图 压缩工具： node-pngquant-native GIF 非常适合：动画，图标 不适合：每个像素只有 8 比特，不适合存储彩色图片 压缩工具：Gifsicle Webp 非常适合：适用于图形和半透明图像 不适合 ...

什么是跨域由于浏览器的同源策略，所谓同源策略，指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源 a 的 js 不能读取或设置引入的源 b 的元素属性。 产生跨域原因： 浏览器限制 请求是跨域的 请求是XHR(XMLHttpRequest)请求 什么是同源？所谓同源，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。例如: URL1 URL2 说明 是否允许通信 http://www.foo.com/js/a.js http://www.foo.com/js/b.js 协议、域名、端口都相同 允许 http://www.foo.com/js/a.js http://www.foo.com:8888/js/b.js 协议、域名相同，端口不同 不允许 h ...

前端性能监控利用 performance API let timing = performance.getEntriesByType('navigation')[0]; 或者 let timing = performance.timing。封装一个函数，在页面加载完毕后执行，做了一些各个阶段性能指标的计算，然后通过接口发送到服务器，用于统计判断。 在 Console 中输入 performance.getEntriesByType('navigation')[0]： 1234567891011121314151617181920212223242526272829303132connectEnd: 9.225000045262277connectStart: 9.22500004 ...

方案一 配置 gitLab 的 commit 钩子函数项目是 gitLab 做 git 服务器，可以配置 commit 的钩子函数，实现自动部署和线上发布，就相当服务器监听你的提交，在你 commit 之后，服务器自动执行了一下 npm run build，放到对应的测试服务器目录，配置文件在根目录下有 .gitlab-ci.yml 文件，起作用的是下边一段代码，script 是 linux 脚本，拷贝文件到指定的静态资源 CDN 目录和web服务器目录，这块知识点是 gitlab-ci 持续集成，可以关注一下。 配置说明： 1234567891011121314151617181920212223242526272829303132333435363738before_script: - echo '=== ...

概述 List , Set, Map都是接口，前两个继承至Collection接口，Map为独立接口 Set下有HashSet，LinkedHashSet，TreeSet List下有ArrayList，Vector，LinkedList Map下有Hashtable，LinkedHashMap，HashMap，TreeMap Collection接口下还有个Queue接口，有PriorityQueue类 注意: Queue接口与List、Set同一级别，都是继承了Collection接口。看图你会发现,LinkedList既可以实现Queue接口,也可以实现List接口.只不过呢, LinkedList实现了Queue接口。Queue接口窄化了对LinkedList的方法的访问权限（即在方法中的参数类型 ...

之前使用 hexo + next 搭建自己的博客，最近想整理一些知识点，发现 vuepress 可能更适合查阅知识点，所以打算用 vuepress 再搭一个 vuepress 特性: 为技术文档而优化的内置Markdown拓展 在Markdown文件中使用Vue组件的能力 Vue驱动的自定义主题系统 自动生成Service Worker(支持PWA) Google Analytics集成 基于Git的”最后更新时间 多语言支持 响应式布局 支持PWA模式 vuepress官网 搭建过程1.安装vuepress使用npm全局安装一下我们的vuepress: 1npm install -g vuepress 2.初始化项目创建项目目录 blog 12mkdir blogcd blog 也可以手动创建一个文件夹， ...

概念介绍设立 master、test、release、feature、personal、hotfix 分支 master 分支是每个项目的主分支，属于绝对保证 pure 的分支，必须保证每行代码都是经过测试验收确认的分支。绝对一定必须肯定不能被污染。 test 分支是项目测试分支。如果有项目并行测试问题，需测试人员负责跟各个项目负责人沟通确认测试分支的合并和提测。 release 分支是项目的可提测和可上线分支。release 分支目前使用的比较弱，它的目的是解决master不能被污染的问题。但如果有预发布环境，则 release 分支作为预发布环境的代码分支。稍后会作详细介绍。 feature 分支是项目迭代分支，每次项目迭代版本确定并进入开发阶段后，由项目负责人创立项目迭代分支（组分支）。项目结束后删除。 ...

什么是表驱动法所谓表驱动法(Table-Driven Approach),简单讲是指用查表的方法获取值。 我们平时查字典以及念初中时查《数学用表》找立方根就是典型的表驱动法。在数值不多的时候我们可以用逻辑语句(if 或 switch case)的方法来获取值,但随着数值的增多逻辑语句就会越来越长,此时表驱动法的优势就显现出来了。 表驱动法的使用主要分为三种方式：直接访问表，索引访问表和阶梯访问表，下面分别举例说明一下这三种方法。 直接访问表直接访问是最简单也是最常用的一种方法，查表本质其实就是去索引“键”来获得“值”，有点像获得数组值一样，给定下标index，然后 array[index] 就获得数组在相应下标处的数值。 举个我工作中的栗子：需要根据国家代码，确定国家的货币符号和国家的 icon 图标（这里国家 ...

安装与运行docker安装与使用 拉取镜像 123docker pull webpagetest/serverdocker pull webpagetest/agent 运行实例 123docker run -d -p 4000:80 --rm webpagetest/serverdocker run -d -p 4001:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" webpagetest/agent mac 用户自定义镜像 创建server目录 12mkdir wpt-mac-servercd wpt-mac-ser ...

source-map:一种 提供源代码到构建后代码的映射技术（如果构建后代码出错，可以通过映射追踪到源代码错误） 格式[inline- | hidden- | eval-][nosources-][cheap-[module-]]source-map 可以任意排列，但 [] 的顺序不能乱 具体介绍: source-map: 在外部生成一个文件 在控制台会显示 错误代码准确信息 和 源代码的错误位置 inline-source-map: 内嵌到bundle.js中 只生成一个source-map 在控制台会显示 错误代码准确信息 和 源代码的错误位置 hidden-source-map: 外部 错误代码错误原因，源代码的错误位置 不能追踪源代码错误，只能提示到构建后代码的错误位置 eval-so ...