post import

src/pages/cdn-notes.md

@@ -0,0 +1,66 @@
+---
+title: 'CDN笔记'
+date: '2018-09-26'
+tags: ['cdn']
+categories: ['dev']
+path: '/cdn-notes'
+---
+
+**CDN(Content Delivery Network, 内容分发网络)**是可用于改善网络性能的解决方案之一
+
+
+
+### CDN解决的问题
+
+- 减少浏览器请求与服务器响应之间的延迟，服务器和用户之间的平均地理距离越大，平均延迟越严重
+- 提高网站的可用性，即更好的负载处理能力，并减少源站服务器上的带宽压力
+
+### CDN无法解决的问题
+
+- CDN只是做缓存，对于臃肿的页面优化效果不明显
+- 全球覆盖一般需要多CDN解决方案，比如2个全球CDN + 本地CDN，因为在一些国家/地区，很多全球CDN只有一个PoP(Point of Presence，存在点)，并不能充分覆盖所有网络用户
+
+### 无需使用CDN的情况
+
+- 流量小且主要用户区域与服务器相近
+- 页面渲染缓慢/禁用了缓存/体积臃肿(>10M)
+- CDN的潜在成本过高
+
+### 选择CDN注意事项
+
+- 要先了解用户的地理分布
+- 移动设备的性能提升一般低于桌面设备，因为移动设置的网络延迟和带宽才是主要的性能瓶颈
+- 为了解决由于CDN系统的复杂性可能导致的可用性/稳定性问题，可以选择多CDN解决方案
+- 有些CDN不支持HTTP/2，有些则不支持高级特性，比如 Stream Priorization / Server Pushing
+- 权衡不同供应商的成本与性能
+- 选择合适的业务类型：图片/网页等小文件，文档/软件等大文件，视音频点播，直播流媒体，全站加速
+
+### CDN性能波动的原因
+
+- 某个时间段内的CDN上的流量高并发
+- 由于跨运营商，寻址错误，BGP路由错误，硬件故障，或服务器缓存容量等问题导致的抖动
+- 超出了CDN地理覆盖范围
+
+### CDN与FEO
+
+- CDN使内容更靠近用户，可以算是“中端”优化，FEO(Front End Optimization，前端优化)关注的是减少请求数量，减小文体大小，并优化元素加载到浏览器的顺序
+
+- 一般FEO的性能提升高于使用CDN，所以要优先或者结合使用
+
+### 使用CDN 
+
+- 开通服务
+
+- 添加域名，复制CNAME地址，配置到DNS服务商 
+
+- ping域名验证是否生效 
+
+### CDN效率低的原因（命中率）
+
+- 源站设置了no-cache不缓存，命中率为0
+- 在CDN控制台设置了不缓存规则(cache-control=no-cache/no-store/max-age=0/private, Pragma=no-cache, etag/last-modified不存在)
+
+- 源站上的必要Header缺失或设置不当
+- url中带有可变参数，则每次都会MISS
+- 动态内空居多的情况下，回源也会比较多
+- CDN上的刷新操作太频繁

src/templates/blog-post.js

@@ -22,7 +22,7 @@ class BlogPostTemplate extends React.Component {
 
  <h1>{post.frontmatter.title}</h1>
 
- <div style={{ ...scale(-1/10) }}>
+ <div style={{ ...scale(-1/10), marginBottom: rhythm(1) }}>
  {post.frontmatter.date && <span style={{ marginRight: rhythm(1) }}>{post.frontmatter.date}</span>}
  {post.frontmatter.tags && <span style={{ marginRight: rhythm(1) }}>Tags:{tags}</span>}
  {post.frontmatter.categories && <span>Categories:{categories}</span>}