轩枫阁

首页 / Web前端 (第3页)

Q.js 轻量的前端单页路由框架

前言

前端时间做过一些带有不少逻辑的H5,例如微信运动,如果用H5开发,大概包含排行榜、profile页、点赞页等页面。不简单页不复杂,主要包含3个页面的切换,可以前进后退,是一个单页应用。但是又比较简单,只需要使用一个前端路由就可以解决。

Q.js代码不到百行,使用起来很简单。

Q.js

Q.js 是一个炒鸡轻量的前端单页路由框架。

http://mouto.org/#!54092

轻量、快速、极简

为了更好的利用缓存以及更少的后端支援,Q.js放弃了 HTML5 State,通过#!格式的 url hach 重现了 url 路由功能。

  1. 无 JavaScript 库依托,可随意搭配使用
  2. 源代码不及百行压缩后 834byte
  3. 支持 IE6+ Chrome Safari FF
  4. 未做情况判定,使用 Q.js 必然会注册 window.Q

查看全文

2016/10 07  周五

图片压缩工具推荐

前言

本文主要介绍前端相关的图片优化工具及方法

1. PP鸭 压缩软件

ppduck

简介

PP鸭 图片压缩神器,帮你的图片减减肥。

PP鸭整合了业内最优秀的数种开源的图片压缩算法,会自动根据图片特征自动选择压缩参数。只需要将图片拖入PP鸭,就能自动批量压缩,省时省心。

官网http://ppduck.com/

特点:极致的图片压缩效果,经过长时间反复调校和对比各种算法,PP鸭在品质,体积,速度三者间,帮你定位完美的平衡点

优点

  • 跨平台图片压缩软件(win&Mac),图片压缩能够在保证质量的情况下使图片容量更小。需要付费激活,但能免费试用10次(可循环)。
  • 适合独立的小项目,在发布之前进行手动优化,省时简单

查看全文

2016/10 06  周四

关于图片优化

前言

图片通常占据网页上下载字节的绝大部分,通常,也占据了大量的视觉空间。因此,优化图片通常可以最大程度地减少网站下载的字节数以及提高性能:浏览器下载的字节数越少,占用客户端的带宽就越少,浏览器下载并在屏幕上呈现有用内容的速度就越快。

图片优化既是一门艺术,也是一门科学:图片优化是一门艺术,是因为单个图片的压缩不存在最好的特定性方案,而图片优化之所以是一门科学,是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置,需要按照许多维度进行认真分析:格式能力、编码数据内容、像素尺寸等。

删除和替换图片

  • 删除不必要的图片资源
  • 尽可能利用 CSS3 效果
  • 使用网络字体取代在图片中进行文字编码

第一个要问您自己的问题应该是,要实现所需的效果,是否确实需要图片。好的设计应是简单的设计,而且始终可以提供最佳的性能。如果可以删除图片资源(与网页上的 HTML、CSS、 JavaScript 和其他资源相比,图片资源通常需要大量的字节),这始终是最佳的优化策略。俗话说,好的图片所传达的信息胜过千言万语,所以,您需要找到平衡点。 查看全文

2016/09 29  周四

前端图片优化机制

前言

60%的网站流量来自图片,图片优化可以大幅影响网站流量。

一、现有web图片格式

图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场景
baseline-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景
progressive-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景, 渐进式加载
gif 支持 支持 无损 所有 由帧数和每帧图片大小决定 简单颜色,动画
png 支持 不支持 无损 所有 由png色值位数决定 需要透明时
webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状,浏览器平台可预知
apng 支持 支持 无损 Firefox、Safari、iOS Safari 由每帧图片决定 需要半透明效果的动画
svg 支持 支持 无损 所有(IE8以上) 由内容和特效复杂度决定 简单图形,需要良好的放缩体验,需要动态控制图片特效
bpg 支持 支持 有损 不支持,需要js解码 由画质决定 jpeg上需要极限优化的场景

查看全文

2016/09 20  周二

轩枫阁V3主题设计开发总结—技术篇

前言

轩枫阁V3.0主题已上线,自2013年上线发布,V1-V3,3年。3个月完成V3主题PC端、移动端交互原型、网页重构、功能开发、工具一键上线。

本次主题的更新,对整站进行优化,主要包括设计改版、性能优化、体验优化。

本文主要针对主题各类技术开发进行总结:

  • 主题分离篇
  • 重构篇
  • 图片优化篇
  • 开发篇
  • 构建篇
  • 加载篇

设计篇:轩枫阁V3主题设计开发总结—设计篇 查看全文

2016/09 06  周二

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]