如何写JavaScript才能逼格更高呢？怎样才能组织JavaScript才能让别人一眼看出你不简单呢？是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢？下面列出一些在JavaScript时的装逼技巧。1. 匿名函数的N种写法你知道“茴”的四种写法吗？ε=(･д･｀*)ﾊｧ… 扯淡，但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的：(function(){})();但下面几种写法也是可以的：!function(){}();+function(){}();-function(){}();~function(){}();~(function(){})();void function(){}();(function(){}());当然，这样的写法，没有什么区别，纯粹看装逼程度。2. 另外一种undefined从来不需要声明一个变量的值是undefined，因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写，会被鄙视的：var data = undefined;但是如果你就是强迫症发作，一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做：var data = void 0; // undefinedvoid在JavaScript中是一个操作符，对传入的操作不执行并且返回undefi ...继续阅读 (76)

前言jQuery 1.9版本，开始支持Source Map。打开http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js，打开压缩后的版本，滚动到底部看最后一行：//@ sourceMappingURL=jquery.min.map这就是Source Map。它是一个独立的map文件，与源码在同一个目录下，点击查看。这是一个很有用的功能，本文将详细讲解这个功能。源码转换JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。常见的源码转换，主要是以下三种情况：压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。多个文件合并，减少HTTP请求数。其他语言编译成JavaScript。最常见的例子就是CoffeeScript。这三种情况，都使得实际运行的代码不同于开发代码，除错（debug）变得困难重重。通常，JavaScript的解释器会告诉你，第几行第几列代码出错。但是，这对于转换后的代码毫无用处。举例来说，jQuery 1.9压缩后只有3行，每行3万个字符，所有内部变量都改了名字。你看着报错信息，感到毫无头绪，根本不知道它所对应的原始位置。这就是Source map想要解决的问题。什么是Source map简单说，Source ...继续阅读 (2176)

CSS动画属性性能CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recompositePaint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面compositediv { -webkit-animation-duration: 5s; -webkit-animation-name: move; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; width: 200px; height: 200px; margin: 100px; background-color: #808080; position: absolute; }@-webkit-keyframes move{ from { left: 100px; } to { left: 200px; } }如下图使用left将持续触 ...继续阅读 (79)

CSS动画属性性能CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recompositePaint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面compositediv { -webkit-animation-duration: 5s; -webkit-animation-name: move; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; width: 200px; height: 200px; margin: 100px; background-color: #808080; position: absolute; }@-webkit-keyframes move{ from { left: 100px; } to { left: 200px; } }如下图使用left将持续触 ...继续阅读 (77)

伪类 :active 生效要CSS伪类:active生效，只需要给 document 绑定touchstart或touchend事件<style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >bar</a> <script> document.addEventListener('touchstart',function(){},false); </script>消除 transition 闪屏两个方法-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/消除 IE10 里面的那个叉号input:-ms-clear{display:none;}来源出处：http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)iOS 浏览器横屏时会重置字体大小，设置text ...继续阅读 (85)

伪类 :active 生效要CSS伪类:active生效，只需要给 document 绑定touchstart或touchend事件<style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >bar</a> <script> document.addEventListener('touchstart',function(){},false); </script>消除 transition 闪屏两个方法-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/消除 IE10 里面的那个叉号input:-ms-clear{display:none;}来源出处：http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)iOS 浏览器横屏时会重置字体大小，设置text ...继续阅读 (82)

资源与工具html5与css3技术应用评估各种奇妙的hack几乎所有设备的屏幕尺寸与像素密度表ios端移动设备参数速查浏览器兼容表移动设备查询器移动设备适配库viewport与设备尺寸在线检测器html5移动端兼容性速查在线转换字体css3选择器测试兼容性速查表浏览器的一些独特参数各种各样的媒体查询收集css3动画在线制作器css3渐变在线制作器赛贝尔曲线在线制作器flexbox在线制作器CSS3各种渲染效果在线工具（IE出品）resize添加到收藏夹后，可直接在浏览器中出现各种分辨率的选择工具来查看不同分辨率下的页面效果移动端手势表webkit独有的样式分析ES5移动端语法支持feature/os versioniOS 4.3.2iOS 5.0iOS 5.1iOS 6.0android 1.6android 2.1android 2.3.3android 3.0android 4.0.2android 4.1.1Object.createyesyesyesyesnonoyesyesyesyesObject.definePropertyyesyesyesyesnonoyesyesyesyesObject.definePropertiesyesyesyesyesnonoyesyesyesyesObject.getPrototypeOfyesyesyesyesnoyesyesyesye ...继续阅读 (124)

概念JPEG有两种存储格式：baseline和progressive。Baseline JPEG 会在数据可用时，一行一行自上而下显示。Progressive JPEG会先显示模糊图片，然后逐渐清晰。浏览器渲染Progressive JPEG在所有浏览器都会显示，这里的关注点是如何渲染。Chrome + Firefox + IE9 下 Progressive JPEG 加载很快。对比用户体验Progresssive JPEG 用户体验更好，用户从开始就知道图片长什么样子，对于弱网用户来说，尤其必要。文件大小一般，Progressive 比 Baseline 格式小几KB。参考这里实验随机从网上下载图片，剔除4xx 和 5xx 错误后，剩余10360张图片，分别转化成 Baseline 格式 和Progressive 格式。结论大于 10K 的图片，Progressive 格式更小 （in 94% of the cases）。小于 10K 的图片，Baseline格式更小（75%）。实际测试结论（这里受限于机器性能，样本不大）：浏览器支持情况：即便在浏览器不支持的情况下，由于 Progressive 格式的图片比原图小，加载也会更快。性能Progressive 比较耗CPU， 对于移动设备来讲，这是一个顾虑，在低端机型上面可能不会支持Progressive，但是随着硬件升级。这个问题 ...继续阅读 (78)

WebP格式WebP是Google推出的意图改变web图片JPG、PNG、GIF三分天下局势的一种图片格式，可对图像大幅压缩。它不仅支持无损或有损压缩、alpha通道，还支持动画演示。在同画质的情况下，WebP格式图片占用体积相较于jpg图片大约减少40%，相较于无损png图片大约减少30%。Wiki百度百科浏览器支持Google浏览器Chrome首先引入WebP，此外Opera 11.10也增加对WebP的支持。如果你能看见下面的图片，说明你的浏览器支持WebP。这是一幅WebP图片，链接为什么要使用WebP？在70%有损比例压缩的情况下，WebP图片比jpg图片体积大约减少50%左右：体积减小，下载速度自然就会提升，那浏览器对WebP图片的解析性能怎么样呢？ 在手Q（机型：三星i9300）上做了相关的性能专项测试得出结论：WebP、jpg两种场景，FPS值差别不大WebP虽然解码时间比jpg较长，但是 “下载时间+解码时间”WebP更占优势WebP推广的最大困难？浏览器兼容性有限，有些浏览器不支持，所以大多数业务是通过js代码判断是否支持webp，然后通过请求不同的图片格式来做兼容的。 这种方案最大的困难在于对业务不透明，各个业务都需要加入判断代码。下图为兼容性的情况（数据来源于http://caniuse.com/）无痛解决方案那么怎样能够有一种更方便的使用WebP的方式呢？ ...继续阅读 (86)

前言不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。对 WebP 的研究缘起于手机 QQ 原创表情商城，由于表情包体积较大，在 2G/3G 的网络环境下加载较慢。同事小贝恰好因为 2013 Google I/O Event 了解到了 WebP，于是我们便一起开始了没羞没躁的技术预研，期待在原创表情图片的质量与体积之间寻找最美的平衡。今年 WebP 图片格式得到越来越多的关注，很多团队也开始布道，前阵子的前端圈“走进腾讯互娱前端技术专场”也有相关专题。借此热潮，在这里把上一年的探索过程以及今年 WebP 新的发展一同分享出来，同时也期待更多的人将其应用于实际业务中。什么是 WebP？WebP（发音 weppy，项目主页），是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还 ...继续阅读 (85)

前言前端时间做过一些带有不少逻辑的H5，例如微信运动，如果用H5开发，大概包含排行榜、profile页、点赞页等页面。不简单页不复杂，主要包含3个页面的切换，可以前进后退，是一个单页应用。但是又比较简单，只需要使用一个前端路由就可以解决。Q.js代码不到百行，使用起来很简单。Q.jsQ.js 是一个炒鸡轻量的前端单页路由框架。http://mouto.org/#!54092轻量、快速、极简为了更好的利用缓存以及更少的后端支援，Q.js放弃了 HTML5 State，通过#!格式的 url hach 重现了 url 路由功能。无 JavaScript 库依托，可随意搭配使用源代码不及百行压缩后834byte支持 IE6+ Chrome Safari FF未做情况判定，使用 Q.js 必然会注册window.Q万物之死始我们先来一段简单的 Hallo World<!DOCTYPE html> <meta charset="UTF-8"> <div id="m"></div> <script src="q.js"></script> <script> Q.reg('home',function(){ document.getElementById('m').innerHTML='Hallo W ...继续阅读 (75)

前言本文主要介绍前端相关的图片优化工具及方法1. PP鸭 压缩软件简介：PP鸭 图片压缩神器，帮你的图片减减肥。PP鸭整合了业内最优秀的数种开源的图片压缩算法，会自动根据图片特征自动选择压缩参数。只需要将图片拖入PP鸭，就能自动批量压缩，省时省心。官网：http://ppduck.com/特点：极致的图片压缩效果，经过长时间反复调校和对比各种算法，PP鸭在品质，体积，速度三者间，帮你定位完美的平衡点优点：跨平台图片压缩软件（win&Mac），图片压缩能够在保证质量的情况下使图片容量更小。需要付费激活，但能免费试用10次（可循环）。适合独立的小项目，在发布之前进行手动优化，省时简单2. TinyPNG官网：https://tinypng.com/简介：TinyPNG 是一个网页版 PNG 图片专业压缩优化工具，可以在线批量压缩PNG图片，在保持alpha通道的情况下对PNG的压缩可以达到1/3之内，而且用肉眼基本上分辨不出压缩的损失。它的原理是通过合并图片中相似的颜色，通过将 24 位的 PNG 图片压缩成小得多的 8 位色值的图片，并且去掉了图片中不必要的 metadata（元数据）。TinyPNG支持上传png图片到官网上压缩下载。同时开放Developers API，基于HTTP，免费版可以每个月压缩500图片，收费版支持每个月3500张图片以上。特点：除了图片压缩，T ...继续阅读 (100)

前言图片通常占据网页上下载字节的绝大部分，通常，也占据了大量的视觉空间。因此，优化图片通常可以最大程度地减少网站下载的字节数以及提高性能：浏览器下载的字节数越少，占用客户端的带宽就越少，浏览器下载并在屏幕上呈现有用内容的速度就越快。图片优化既是一门艺术，也是一门科学：图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。删除和替换图片删除不必要的图片资源尽可能利用 CSS3 效果使用网络字体取代在图片中进行文字编码第一个要问您自己的问题应该是，要实现所需的效果，是否确实需要图片。好的设计应是简单的设计，而且始终可以提供最佳的性能。如果可以删除图片资源（与网页上的 HTML、CSS、 JavaScript 和其他资源相比，图片资源通常需要大量的字节），这始终是最佳的优化策略。俗话说，好的图片所传达的信息胜过千言万语，所以，您需要找到平衡点。接下来，应考虑是否存在备选技术，可以通过更高效的方式实现所需的效果：CSS 效果（渐变、阴影等） 和 CSS 动画可以用于提供与分辨率无关的资源，任何分辨率和缩放级别都可以显示得非常清晰，而只需要图片文件所需字节数的一小部分。网络字体可以在保留选择文字、搜索文字以及调 ...继续阅读 (81)

前言60%的网站流量来自图片，图片优化可以大幅影响网站流量。一、现有web图片格式图片格式支持透明动画支持压缩方式浏览器支持相对原图大小适应场景baseline-jpeg不支持不支持有损所有由画质决定所有通用场景progressive-jpeg不支持不支持有损所有由画质决定所有通用场景, 渐进式加载gif支持支持无损所有由帧数和每帧图片大小决定简单颜色，动画png支持不支持无损所有由png色值位数决定需要透明时webp支持不支持有损Chrome、Opera由压缩率决定复杂颜色及形状，浏览器平台可预知apng支持支持无损Firefox、Safari、iOS Safari由每帧图片决定需要半透明效果的动画svg支持支持无损所有(IE8以上)由内容和特效复杂度决定简单图形，需要良好的放缩体验，需要动态控制图片特效bpg支持支持有损不支持，需要js解码由画质决定jpeg上需要极限优化的场景几种文件格式的特点baseline-jpeg这种类型的JPEG文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在JPEG文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，这种格式的JPEG没有什么优点，因此，一般都推荐使用Progressive ...继续阅读 (75)

一、gulp简介1.gulp是什么？gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器， 它能自动化地完成javascript、coffee、sass、less、html/image、css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。gulp和grunt非常类似，但相比于grunt的频繁IO操作，gulp的流操作，能更快地更便捷地完成构建工作。2.核心概念：流流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的，而不用关心流的另一头数据的真正流向。流不但可以处理文件，还可以处理动态内存、网络数据等多种数据形式。而gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作。这看起来有点“像jQuery”的方法，把动作串起 ...继续阅读 (74)

前言轩枫阁V3.0主题已上线，自2013年上线发布，V1-V3，3年。3个月完成V3主题PC端、移动端交互原型、网页重构、功能开发、工具一键上线。本次主题的更新，对整站进行优化，主要包括设计改版、性能优化、体验优化。本文主要针对主题各类技术开发进行总结：主题分离篇重构篇图片优化篇开发篇构建篇加载篇设计篇：轩枫阁V3主题设计开发总结—设计篇主题分离篇文章：wordpress移动端自动切换主题代码主要内容响应式布局WP插件差异处理主题切换代码重构篇文章：轩枫阁V3主题开发-重构篇主要内容Less滚动条动画构建雪碧图及2x图图片压缩静态HTML模块化BEM图片优化篇文章：图片加载优化及图片lazyload自适应主要内容居中图片裁剪lazyload PC端与移动端实现差异开发篇文章：轩枫阁V3主题开发-开发篇主要内容表格处理纯文本简介标签展示文件模块页面类型判断微信图片预览文章链接处理分享赞赏查看大图文章导航钢琴导航返回顶部友情链接构建篇文章：轩枫阁V3主题开发-构建篇主要内容关于tmt-workflow目录结构自定义任务流程图本地环境构建体验环境构建上线发布构建增量发布加载篇文章：轩枫阁V3主题开发-加载篇主要内容雪碧图图片压缩lazyload文件位置文件压缩合并CDN文件本地存储 ...继续阅读 (87)

前言本文介绍关于轩枫阁V3主题开发内容，分为移动端和PC端。移动端针对移动端主题的开发处理主要有表格滚动条、纯文本简介、搜索标签、文件模块、loading加载、判断页面类型、微信图片预览等。表格处理文章里面的表格，经常宽度会大于移动设备屏幕的宽度，所以给表格加上滚动条尤为重要。WP在编辑文章插入表格时，会插入table标签，外层并没有特殊的class来标记含有表格，所以无法直接通过CSS的方式加上横向滚动条。1. JS判断表格，给外层加上指定Class。这种方法实现的会比较不友好。2. 通过PHP给table表格加上class// functions.php代码 function table($content){ if(!is_feed() || !is_robots) { $content = preg_replace('/<table(.*?)>(.*?)<\/table>/s', '<div class="table"><table$1>$2</table></div>', $content); } return $content; } // 文章内容 add_filter('the_content', 'table'); // CSS代码 .table{ ...继续阅读 (84)

前言轩枫阁V3主题已上线，本文将介绍本站V3主题关于CSS重构的内容。兼容IE9+，主要看Chrome表现。LESS鉴于Less能满足本站主题开发的需求，就没有更换成Sass。Less介绍：http://www.lesscss.net/mixins基于Less的CSS代码片段复用和混入库，主要有圆角border-radius、渐变gradient、内阴影inner-shadow、阴影box-shadow、动画animation、transition、宽度计算calc-width、省略text-overflow等，代码见附录。滚动条网站针对滚动条的展现进行了优化，表现及代码如下：::-webkit-scrollbar { width: 8px; height: 8px } ::-webkit-scrollbar-thumb { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color: #aaa; } ::-webkit-scrollbar-track { background-color: transparent }动画为了更好的性能，本站将JS动画转为CSS3动画。一些动画效果摘自animate.cs ...继续阅读 (86)

前言轩枫阁V3主题已上线，本文将介绍本站V3主题关于加载优化的内容。图片优化关于图片，这里使用传统的优化方式。本站使用的图片主要有各类图标、大图、文章配图、文章内容图等。雪碧图使用雪碧图Sprite，将各图标合并成一张图，可以减少HTTP请求数。开发过程中，使用单个图标，结合tmt-workflow，在发布时将图片合并。同时移动端支持2倍雪碧图，只需同时将2x图标放至slice目录即可。压缩图标、大图、配图、内容图在制作的过程中，可以在PS中，使用快捷键Ctrl+Shift+Alt+S，保存为Web可用格式。半透明图一般选择PNG24，其它图片（色彩丰富）一般保存为质量为高的JPG格式图。除了文章图，其它图片可以通过tmt-workflow构建，将图片进行压缩。PNG图片的压缩率一般在40%，JPG的压缩率一般在20%，具体根据图片。lazyload对于文章内容，使用lazyload非常的普遍。在用户滚动时，才提前加载显示相应的图片，保证页面打开速度。WP中使用lazyload也很简单。1. 首先需要在functions.php中将img标签的src替换成base64灰色图// lazyload function lazyload($content) { if(!is_feed() || !is_robots) { $content = preg_repla ...继续阅读 (77)

前言本文将介绍如何将基于WP的项目，结合前端工作流tmt-workflow，实现开发、体验、部署上线流程，流程简单，自定义程度高。tmt-workflowtmt-workflow是一个基于Gulp(v4.0)、高效、跨平台(macOS & Win)、可定制的前端工作流程。介绍文章：tmt-workflow前端工作流目录结构themes/ │ ├─── _tasks/ // tmt-workflow自带 Gulp 任务目录 │ ├── TaskBuildDev.js // gulp build_dev │ ├── TaskBuildDist.js // gulp build_dist │ │ ├──── xuanfeng-v3.0 // pc版主题 │ ├── _tasks/ │ │ ├── TaskBuildDev.js // BuildDevAll 本地开发 │ │ ├── TaskBuildDist.js // BuildDistAll 打包构建 │ │ └── TaskBuildPub.js // BuildPubAll 上线发布 │ ├── dev/ // dev 本地构建目录 │ ├── dist/ // dist 构 ...继续阅读 (91)

前言在日常的前端开发中，我们会遇到LESS/SASS编译、CSS前缀自动补全 、CSS压缩、 图片压缩、JS合并压缩、布署发布 等各种各样的操作。通常，我们都会根据实际情况定制一个流程性的工具来实现所有常规的功能，即所谓的前端工作流。tmt-workflowtmt-workflow是一个基于Gulp(v4.0)、高效、跨平台(macOS & Win)、可定制的前端工作流程。现已推出GUI桌面工具：WeFlow，无需安装任何环境依赖即可使用，官网下载：http://weflow.io/功能特性自动化流程Less/Sass -> CSSCSS Autoprefixer 前缀自动补全自动生成图片 CSS 属性，width & height 等CSS 压缩 cssnanoCSS Sprite 雪碧图合成Retina @2x & @3x 自动生成适配imagemin 图片压缩JS 合并压缩EJS 模版语言调试 & 部署监听文件变动，自动刷新浏览器 (LiveReload)FTP 发布部署ZIP 项目打包解决方案集成px -> rem 兼容适配方案智能 WebP 解决方案去缓存文件 Reversion (MD5) 解决方案除了以上的各种功能，其余特性：基于 Gulp4 ，超好用的流程化(gulp.series, gulp.parallel)控制 AP ...继续阅读 (90)

前言本文介绍针对轩枫阁V3主题开发过程中，遇到的图片问题及加载优化。图片居中裁剪本站的每一篇文章，都会配一张570×200的特色图像，使文章不那么单调。然而移动端移动端首页图片为60×60的正方形配图，这里有两种解决方案。设置缩略图大小，在wp管理端-设置-多媒体，设置缩略图尺寸为1:1结合CSS3的background-size，将配图作为背景图，并显示中间的正方形区域即可方法一可以安装插件，将旧文章的图片重新生成。由于轩枫阁在V3主题上线前，已更新400篇文章，使用方法一意味着图片存储会增加，而且意义不大。而这一表现仅在移动端，所以可以完美使用CSS3,。.thumb{ background-image: url(http://www.xuanfengge.com/wp-content/uploads/2016/04/gfdgfdgf-300x105.jpg); background-size: cover; background-position: center center; }lazyloadlazyload即图片懒加载，滚动到的图片才会加载，节省流量及加快加载速度，提升体验。wp如何使用lazyload呢？在functions.php加上如下代码// lazyload function lazyload($content) { ...继续阅读 (101)

前言H5持续火热，随着微信公众号、朋友圈、微博等途径可导入大量阅读量，博客网站移动端自适应势在必行。下面介绍基于wordpress的网站如何实现移动化。响应式布局响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。优点：一套代码，能够适应不同分辨率设备访问，易于维护。缺点：受限于同一套HTML结构，导致很多差异化布局不好进行扩展，对于小屏设备往往采用隐藏方式减少内容。自适应框架如Bootstrap、UIKit、Adobe Edge Inspect、Foundation、Responsablecss等。响应式网站展示：http://mediaqueri.es/、http://flatdesignluv.com/响应式布局的实现方式为通过CSS3的媒体查询Media Queries，针对不同分辨率做断点，使用不同的样式。常用断点查询：屏幕尺寸大全、UI设计规范<!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media qu ...继续阅读 (108)

1. H5缓存机制介绍H5，即HTML5，是新一代的HTML标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5引入的离线存储，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。H5应用程序缓存为应用带来三个优势：离线浏览 – 用户可在应用离线时使用它们速度 – 已缓存资源加载得更快减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。根据标准，到目前为止，H5一共有6种缓存机制，有些是之前已有，有些是H5才新加入的。浏览器缓存机制Dom Storgage（Web Storage）存储机制Web SQL Database存储机制Application Cache（AppCache）机制Indexed Database （IndexedDB）File System API下面我们首先分析各种缓存机制的原理、用法及特点；然后针对Anroid移动端Web性能加载优化的需求，看如果利用适当缓存机制来提高Web的加载性能。2. H5缓存机制原理分析2.1 浏览器缓存机制浏览器缓存机制是指通过HTTP协议头里的Cache-Control（或Expires）和Last-Modified（或Etag）等字段来控制文件缓存的机制。这应该是WEB中最早的缓存机制了，是在HTTP协议中实现的，有点不同于Dom S ...继续阅读 (246)

前言轩枫阁V3.0主题已上线，自2013年上线发布，V1-V3，3年。3个月完成V3主题PC端、移动端交互原型、网页重构、功能开发、工具一键上线。本次主题的更新，对整站进行优化，主要包括设计改版、性能优化、体验优化。本文主要针对设计进行介绍：重新思考设计整站UIPC端与移动端相分离文案、设计排版、细节表现更加细致PC端主颜色主色调选用浅白、深灰、浅黑、天蓝、青色，使页面简洁、扁平、纯粹。排版颜色字体在大标题、小标题、正文体现出不同的灰度，让重要程度通过灰度区分。首页栏目首页栏目经过重新排版，增加更多栏目，曝光内容更多。钢琴导航更简洁大气的弹钢琴页面，代码重新编写，更加规范。移除本地存储功能。代码高亮代码高亮一直使用crayon-syntax-highlighter插件，升级为熟悉的Sublime text黑色经典主题。由于插件会加载多余的js、css、fonts，所以将插件改造，由工具合并主题代码并加载，加快渲染速度。图片预览以减少插件使用为目标，不到百行代码编写图片预览组件。动画完美结合CSS3制作动画，渐进增强。 移动端移动端整体设计基于WeUI，为微信Web服务量身设计。主题参考微信UI，对个模块进行排版设计。总体预览移动端首页分类页搜索导航文章页404PC端首页分类页关于&留言文章页404登录界面 ...继续阅读 (83)

前言在网站开发初期，做重构的过程中，经常要展示一些网站内容相关的不固定图片，如Banner图、产品图，这时候从设计稿中切图下来放上去会比较繁琐。常用的技巧是使用占位图。占位图片即通过指定宽高或文字动态生成指定尺寸的图片。有很多提供类似服务的网站，接下来一一推荐。纯色类temp.im简介：im temp placeholder images, feel free to use it anywhere. (with https supported)。temp.im占位图片，可以在任何地方免费使用，支持HTTPS。特点：支持定义尺寸、颜色。使用七牛CDN服务，访问超快，推荐使用，微信UI工程师@hzlzh作品。使用：http://temp.im/200http://temp.im/754×754http://temp.im/466×466/4CD964/fffplacehold.it简介：A quick and simple image placeholder service. 一个快速和简单的占位图像服务。特点：支持定制尺寸、颜色、文字、格式，支持HTTPS，老款占位图服务。使用：http://placehold.it/350×150http://placehold.it/300/09f/fff.pnghttp://placehold.it/300?tex ...继续阅读 (127)

前言对于Javascript来说，提高网络下载的性能最直接的方法就是把JS文件体积减小。>>>留意亮点为了方便理解和对比，本文会给出压缩前后代码作为参考，但压缩后的代码仍会换行，变量名字不做混淆处理，同时一个压缩规则的例子会尽量不混其它压缩策略进去。1. 表达式的压缩规则1.1 表达式预计算将可预先计算的表达式替换成其计算结果，同时要比较原来表达式以及生成后的结果的大小，保留小的。压缩前var expr1 = 1 + 1; var expr2 = 1 / 3;压缩后var expr1 = 2; var expr2 = 1 / 3;//由于计算出来的值0.3333333333333比1/3要长，所以不预计算规则1.2 优化true跟false正常情况下会把： true变成!0，节省2个字符；false变成!1，节省3个字符。这会让人会疑问：这里为什么不直接把true变成1，false变成0呢？因为这样会把一个布尔类型变成数字类型参与某些运算导致运行时混乱。 那么有没有什么情况比较特殊，可以把true变成1、false变成0呢？答案是有的：就是在参与==以及!=运算时。压缩前var expr1 = true; var expr2 = false; true == A; false == A;压缩后var expr1 = !0; var expr2 = !1; 1 = ...继续阅读 (83)

1. HTTPS基础简单而言，HTTPS是使用TLS/SSL加密的HTTP协议。HTTP协议采用明文传输信息，存在信息窃听、信息篡改和信息劫持的风险，而协议TLS/SSL具有身份验证、信息加密和完整性校验的功能，可以避免此类问题。TLS/SSL全称安全传输层协议Transport Layer Security, 是介于TCP和HTTP之间的一层安全协议，不影响原有的TCP协议和HTTP协议，所以使用HTTPS基本上不需要对HTTP页面进行太多的改造。2. TLS/SSL原理HTTPS协议的主要功能基本都依赖于TLS/SSL协议，本节分析安全协议的实现原理。TLS/SSL的功能实现主要依赖于三类基本算法：散列函数Hash、对称加密和非对称加密，其利用非对称加密实现身份认证和密钥协商，对称加密算法采用协商的密钥对数据加密，基于散列函数验证信息的完整性。散列函数Hash，常见的有MD5、SHA1、SHA256，该类函数特点是函数单向不可逆、对输入非常敏感、输出长度固定，针对数据的任何修改都会改变散列函数的结果，用于防止信息篡改并验证数据的完整性；对称加密，常见的有AES-CBC、DES、3DES、AES-GCM等，相同的密钥可以用于信息的加密和解密，掌握密钥才能获取信息，能够防止信息窃听，通信方式是1对1；非对称加密，即常见的RSA算法，还包括ECC、DH等算法，算法特点是，密钥成对出现 ...继续阅读 (85)

自2007年年末Alpha版本上线以来，Chrome浏览器以简约高效的用户界面，稳定、高速、安全的使用体验迅速风靡全球，根据NetMarkShare公布的2016年3月份数据Chrome在全球浏览器的市场份额达到了39.09%，仅次于IE浏览器。在经历了数年的迅猛发展，伴随着稳定版Chrome 50的正式发布，Google特意发布了一张信息图进行庆祝。自2008年9月份发布Chrome 1.0版本以来，在将近8年时间中共计发布了49个稳定版本，根据信息图上显示移动端月活跃用户超过10亿，每个月加载超过7710亿个页面；每个月有超过5000亿个字符不需要完整输入，每个月节省超过200万GB流量；每个月有36亿个页面自动翻译；91亿个表格和密码自动填写；每个月保护用户免受恶意网页侵扰1.45亿次。根据市场调查机构StatCounter的调查数据，截止今年3月份，Chrome网页浏览器的使用量达到了60.1%，第二位为Firefox，使用量为15.7%。包括平板在内的移动设备中，Chrome浏览器使用量占比为32.1%，Safari排在第二，占比为22.35%。Chrome reached a pretty big milestone this week – its 50th release! We originally launched Chrome to give users a f ...继续阅读 (144)

前言代码中嵌套的if/else结构往往导致代码不美观，也不易于理解。面向过程的开发中代码有大量的if else，在java中可以用一些设计模式替换掉这些逻辑，那么在js中是否也有类似的方法用来尽可能减少代码中的if/else嵌套呢？有人认为：if else多就多呗，只要可读性强，维护起来方便。jQuery.fn.init里就是一堆if else判断，难道要质疑jQuery作者的水平了？并不是说if else多就不好，关键是看用的地方，jQuery.fn.init里除了if else判断简洁点，难道要改成switch？就算用工厂模式，还不是得做大量的if判断。常用方法代码整洁强迫症患者必须要来个抛砖引玉：1. 使用||或if(a为真){ a=a }else{ a=b }可写成：a = a || b2. 使用三元表达式if(a==b){ a=c }else{ a=d }可写成：a = (a==b) ? c : d3. 结合数组后台接口通常会返回这种数据：fruit: 0 // 0=苹果，1=梨子，2=桔子，3=柠檬，4=芒果…这时写if…else是最痛苦的。从冲哥那偷来个方法：var _f = ['苹果','梨子','桔子','柠檬','芒果']; shuiguo = _f[fruit];建议第一步：优化if逻辑人们考虑的东西到时 ...继续阅读 (325)