学习原生JS延时加载

优化网站速度时接触到延时加载这个概念,本文以图片延时加载为例作学习总结。 延时加载概念和原理 正常网页页面结构:头部CSS样式和少量JS;中间部分是内容,包括图片、视频、文本等;底部主要JS文件。浏览器打开网页时这些资源按顺序从前到后逐一加载。而大多页面都无法一屏显示完全,如果初次打开页面时让浏览器只加载可视区域的图片,不加载当前不可见图片,就可以把下载看不见图片的时间用来下载页面后面的js等内容,大大提高页面访问速度。当鼠标像下滚动浏览器时,再按需加载出现在可视区的图片。 图片延时加载的实现 <img src="/loading.gif" data-src="/images/001.png"> 初始状态下让图片的默认src为空或者指向一个小尺寸图片,设置data-src属性存储图片真实路径。需要显示图片时用data-src属性值替换掉默认的src值。下图详解了如何判断何时加载图片。 1. 浏览器可视区域高度H,通常是固定的(这里不考虑手动调整窗口大小)window.innerHeight可取得此值。 2.

10分钟让Ghost博客全站免费用上HTTPS

Let's Encrypt 是一个于2015年末推出的数字证书认证机构,为网站提供免费的SSL/TLS证书。LET’S ENCRYPT现已全面进入公测阶段,任何人都可以免费申请。 本文在Debian下测试有效,理论上也支持Ubuntu。 获取证书 连接服务器,输入以下命令 apt-get install git git clone https://github.com/letsencrypt/letsencrypt cd letsencrypt ./letsencrypt-auto certonly --server https://acme-v01.api.letsencrypt.org/directory --agree-dev-preview 以上命令执行完毕后会依次要求输入Email地址,同意协议,输入域名(多个域名用空格隔开)

修改Ghost的Markdown为新窗口打开链接

Ghost 用 Markdown 写文章,Markdown 是利用标点符号和特殊字符标记特殊语法,用于格式化内容。Ghost 所支持的 Markdown 语法混合了标准 Markdown 语法和 GitHub 扩充的语法,默认语法中创建的链接总是会在当前窗口打开。个人不是很喜欢这一点,每次写文章时都是手动使用<a href="***" target="_blank"></a>创建链接,比快捷键慢太多。所以尝试修改 Ghost 的 Markdown让其默认在新窗口打开文章内链接。 相关文件是/srv/www/denpe.com/node_modules/

配置Nginx提高Ghost性能

前面文章详细介绍了在debian上安装ghost。本文介绍如何配置nginx提高ghost性能。 使用UNIX Domain Socket代替IP加端口 这一段是从网上摘抄,据说对性能提升有很大帮助。原帖请看这里 configure unix socket instead of host & port. 首先编辑Ghost的config.js文件。将第24行附近的server server: { host: '127.0.0.1', port: '2368' } 替换成下面内容,注意根据自己的ghost安装目录更改路径。 server: { socket: { path: '/srv/www/denpe.com/socket.sock', permissions:

配置Nginx访问IP和顶级域名跳转到www域名

在vps上安装ghost后,用域名可以正常访问博客,用IP也可以访问,如果顶级域名(不带www的如denpe.com)做了解析,那它也可以访问博客。这造成同一页面被多个url分散权重,即使在head标签使用rel="canonical"也无法解决这个问题。最好的办法是让非标准url 301跳转到标准url如(http://www.denpe.com/xxx/xxx/)。 例如:要实现浏览器打开 https://denpe.com/tag/javascript/ HTTP状态返回码为301,并且跳转至https://www.denpe.com/tag/javascript/ 修改/etc/nginx/sites-available目录下配置文件,在末尾添加以下内容。主题网址和ip替换。