-
CSS布局absolute和relative的区别
写CSS过程中，经常要用到position进行页面布局，positioin有五个值：static，fixed，inherit，absolute，relative。前面三个还很好理解，后面两个在使用过程中经常会混淆，每次用到这几个值的时候，都要google查下这几个值的区别，这次直接把这五个的区别整理一下，巩固下这个知识点也方便日后自己查看。先直接把这五个的区别列出来：static 默认值，没有定位，元素出现在正常的文档流中，但是会忽略 top right bottom right z-in...…
-
深入理解HTTPS
什么是HTTPS我们知道 HTTP（HyperText Transfer Protocol）是超文本传输协议，是网络通信的基础。HTTP 通信是分层的，从上到下有：应用层、传输层、网络层、链路层。HTTPS（HyperText Transfer Protocol Secure）是超文本传输安全协议，是安全通信通道，简单来说是 HTTP 的安全版本，是使用 TLS/SSL 加密的 HTTP 协议。我们在浏览器里访问某个网站的时候，如果看到类似下面这种小锁头，表示用的就是 HTTPS 协议：为...…
-
浏览器缓存机制：强缓存和协商缓存
缓存算是性能优化中比较简单又高效的方式，合理的缓存策略可以减少延迟，在重复利用缓存的资源文件同时，可以减少带宽和降低网络负荷，从而大大提高了性能。这篇文件就来介绍强缓存和协商缓存的工作机制。什么是浏览器缓存以 Chrome 为例，打开 DevTools 到 NetWork，第一次访问我的 Github，能看到总共有28个 HTTP Request 都是从服务响应拿到的：刷新页面，我们看到这个28个 Request，有的是从memory cache和disk cache拿到的，有些是从服务器...…
-
浏览器数据存储方式
前端浏览器数据存储方式有：Cookies、SessionStorage、LocalStorage、IndexedDB，这篇文章主要是比较这几种存储方式的区别，需要注意的是这些存储方式都受同源策略的约束，跨域是不能访问。CookiesCookies的出现并不是为了在浏览器里保存数据，而是为了保存HTTP状态的，因为HTTP协议是没有状态的，也就是服务器不知道用户上一次做了什么，有了Cookies，服务器可以设置或者读取Cookies中的信息，每次HTTP请求都会带上Cookies，从而可以维...…
-
markdown常用语法
这篇文章是介绍markdown 常用的一些语法。所有的字符都应该是英文字符，中文字符无效1 标题语法#【空格】标题名称# 表示 <h1>## 表示 <h2>### 表示 <h3>#### 表示 <h4>##### 表示 <h5>###### 表示 <h6>效果如下：一级标题二级标题三级标题四级标题五级标题六级标题2 一级标题 二级标题利用任一数量的等号（=）减号（-）一级标题===二级标题--效果如下：一级标题二级标题...…
-
webpack：优化打包CSS文件
在 webpack：如何解决浏览器缓存问题 文章里介绍了用chunkhash解决浏览器缓存问题，在那篇文章里默认把CSS文件一起打包进JS bundle文件中。但在一般项目里面CSS的改动比较少，如果打包成JS bundle文件，再结合chunkhash，每次发布以后，虽然CSS文件没有改动，但是客户端还是需要重新下载这些样式文件。如果CSS文件过大的话，在一定程度上会影响性能。接下来就介绍，如何在打包过程不把CSS 内联打包到JS bundle文件，而是直接提取生成单独的CSS文件，如果...…
-
webpack：如何解决浏览器缓存问题
在这篇文章里会介绍怎么在webpack中解决浏览器缓存问题。这篇文章是基于 webpack3.10.0默认打包的时候是直接把CSS inline到bundle文件里面缓存webpack打包以后的文件一般都是：app.bundle.js、vendor.bundle.js，每次发布以后，如果用户浏览器缓存没有过期，加上文件名字相同，浏览器不会从服务器下载最新文件，导致用户不能看到新发布的功能。这就是我们所说的浏览器缓存问题。解决方案就是，每次如果文件有改动，那么在发布的时候，就让对应bundl...…
-
webpack(3)：代码切割
在上一篇文章【webpack：打包后的bundle文件里到底有什么 】这篇文章解释了什么是bundle文件以及bundle文件里的具体内容。也提到过单单只是有多少个入口文件，打包出多少个bundle文件这种方式，会导致代码冗余，同一模块代码会被重复打包到不同的bundle文件中。为了解决这个问题，我们需要把重复共用代码提取出来，放在单独的文件中，其他bundle有引用公用代码只需要加载这个单独文件就可以了。提取入口文件中公用的代码，这种行为就是代码切割，生成的独立文件就是chunk文件。下...…
-
webpack：打包后的bundle文件里到底有什么
webpack把 ts js html css imgs等文件都统统打包成bundle.js文件，只知道所有静态文件都在bundle文件里，但是具体bundle里面有什么呢？一个文件：a.js，一个入口文件，生成一个bundle文件源码在这里：angular-seed-project.// a.jsconsole.log('this is a.js file');// webpack.bundle.jsmodule.exports = { entry: { 'a': '...…
-
Angular:lazy loading和preloading
在这篇文章中会介绍以下内容： 什么是 lazy loading 和 preloading 如何在 angular 项目中实现 lazy loading 如何在 angular 项目中实现 preloading 如何在 angular 项目中结合使用 preloading 和 lazy loading lazy loading和preloading在打开浏览器访问某一个网站的时候，要从服务器下载 bundle/chunk 等文件。如果文件...…