轩枫阁

首页 / 互联网 (第6页)

前端图片优化机制

前言

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  周二

gulp详细入门教程

一、gulp简介

1.gulp是什么?

gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascriptcoffeesasslesshtml/imagecss 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

gulpgrunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。 查看全文

2016/09 17  周六

HTTPS原理探讨

1. HTTPS基础

简单而言,HTTPS是使用TLS/SSL加密的HTTP协议。

HTTP协议采用明文传输信息,存在信息窃听、信息篡改和信息劫持的风险,而协议TLS/SSL具有身份验证、信息加密和完整性校验的功能,可以避免此类问题。

TLS/SSL全称安全传输层协议Transport Layer Security, 是介于TCP和HTTP之间的一层安全协议,不影响原有的TCP协议和HTTP协议,所以使用HTTPS基本上不需要对HTTP页面进行太多的改造。 查看全文

2016/05 05  周四

Chrome浏览器庆祝升至50版本 Chrome: 50 releases and counting!

自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 fast, simple and secure browser. That still remains our mission today. And while there’s still much more to do – especially with the shift to mobile and providing a great experience for people using the mobile web for the first time – we thought we’d take a step back and reflect on our journey so far. Here at Google, we’re obsessed with stats, so we thought you might enjoy a whirlwind tour of Chrome, by the numbers.

Rahul Roy-Chowdhury, Director and Stats Stockpiler 查看全文

2016/04 26  周二

微信浏览器全面升级至X5 Blink内核,支持远程调试

简介

微信安卓版客户端 webview 即日起100%放量,全面升级至 X5 Blink 内核,将具有更好的 HTML5/CSS3 支持,更强大的渲染能力。

为此,微信 web 开发者工具同步推出0.5.0版本,继支持测试号、企业号、第三方平台开发者的使用之后,新增支持实时映射手机屏幕到 PC 或者 Mac 上,可以远程调试 X5 Blink 内核上的网页。

sdgdsg

X5 Blink:查看介绍

Web 开发者工具说明请点击:开发者文档

微信Android Webview升级Blink内核,TBS 2.0 版本震撼上线:介绍

图示

查看全文

2016/04 19  周二

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子