link ,除了分享,也是知识管理。 于 1年前发表 3662 0 1
街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border:[http://7tszky.com1.z0.glb.clouddn.com/Fg8OjQ3yHWrQyg0IA0kXG-GMn7uf] 从上面的视觉图可以看到,border是一根非常细的线。这篇文章将说明如何使用border-image实现在视网膜屏中1px的border效果。 注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜屏手机无法达到这样的效果 首先准备一张符合你要求的border-image: [http://7tszky.com1.z0.glb.clouddn.com/FmfBKPpD4hdPyvQFjaCHAFBco9Jp] 通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。 同样,在使用border-image时,将border设计为物理1px,如下: 样式设置: .border-image-1px{
1年前
CSS/重构
结一 于 7个月前发表 3596 0 2
React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制,也决定了在对组件进行更新时还可以进行更细致的优化。 REACT组件渲染 react的组件渲染分为初始化渲染和更新渲染。 在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的): react 组件渲染 初始化渲染 [http://7tszky.com1.z0.glb.clouddn.com/FrGKO_9NVh9tD57aZDYKDBxEjOAF] 但是当我们要更新某个子组件的时候,如下图的绿色组件(从根组件传递下来应用在绿色组件上的数据发生改变): react 组件渲染 更新子组件 [http://7tszky.com1.z0.glb.clouddn.com/Fu_CLUzDTVEB0qJHZO86a1XzNMBx] 我们的理想状态是只调用关键路径上组件的render,如下图:
7个月前
javascript技术
ouven ,https://ouvens.github.io/ 于 1年前发表 3594 3 2
60%的网站流量来自图片,图片优化可以大幅影响网站流量。 一、现有WEB图片格式 图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场景 baseline-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景 progressive-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景, 渐进式加载 gif 支持 支持 无损 所有 由帧数和每帧图片大小决定 简单颜色,动画 png 支持 不支持 无损 所有 由png色值位数决定 需要透明时 webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状,浏览器平台可预知 apng 支持 支持 无损 Firefox、Safari、iOS Safari 由每帧图片决定 需要半透明效果的动画 svg 支持 支持 无损 所有(IE8以上) 由内容和特效复杂度决定 简单图形,需要良好的放缩体验,需要动态控制图片特效 bpg 支持 支持 有损 不支持,需要js解码 由画质决定 jpeg上需要极限优化的场景几种文件格式的特点 * baseline-jpeg
1年前
性能
coolriver 于 1年前发表 3582 0 0
前言 提到跨终端应用开发,很容易想到最近很火的React Native。使用React Native开发出的APP本质上是Native APP。在跨端应用开发这一领域内还有另一块:Hybrid APP。本文研究的 inoic framework [http://ionicframework.com/] 就是一种hybrid app的开发框架。 [http://blog.ionic.io/wp-content/uploads/2015/03/ionic-logo-blog.png] 1. IONIC基本组成 在之前, ouven的一篇文章 [http://imweb.io/topic/557fea79c35b19ff46ead229] 介绍了ionic frameword的基本构成,和在windows系统上的环境搭建。本文在此基础了,对ionic frameword(后面简称 ionic)的基本组成作一些补充和总结。下图展示了ionic的基本组成:
1年前
移动开发
黎腾 ,如果sea能带走我的哀愁 于 1年前发表 3505 2 2
Nginx那么好,我想去看看。 接连逛了两个书城后,我发现并没有Nginx相关的书籍。 这就很奇怪! [http://7tszky.com1.z0.glb.clouddn.com/Fo05S9wdE4-zdY-OLaOf_maLDJ6V] Nginx,一名 网红 (网络服务器红人…),就算没有自传和回忆录,争着介绍它的花边新闻也该有吧。 后来找到仅有的一两本书籍,也直接深入到“源码剖析”的阶段。写得并不十分满意,况且我还不需要这些。 后来发现了原因,大概是因为 “使用太简单了,都不值得出书” 。 是的,Nginx把纷繁复杂的功能,浓缩成一份简单的配置,极易上手。 当它呈现到你面前时,感觉独具匠心。 NGINX与NODEJS (这里的标题有点歧义。此处的NodeJs,皆引申为NodeJs所搭建的服务器。) 有人说,作为一名前端, 我的真爱是NodeJs 。 同时也认同,抛去性能之类的比较,单纯从实现的角度,NodeJs编写的服务器也能实现Nginx的各种功能。 这些我都赞成,但使用Nginx并不意味着抛弃NodeJs。事实上,它们并不冲突,还可以在一起愉快的玩耍。
1年前
调试
coverguo 于 2年前发表 3477 2 0
* 模块化编程 * CommonJS * AMD(Asynchronous Module Definition)规范 * requireJS与seaJS * requireJs 以及 seaJs 的区别 模块化编程: @为了更好的开展话题,首先需了解什么是前端模块化 模块的由来: 其实模块化的诞生不难理解,我们知道因为随着网站逐渐的发展,嵌入网页的Javascript代码越来越庞大,而网页越来越像桌面程序,需要一个团队去分工协作,进行管理和测试等等,为了更好的管理网页的业务逻辑,产生了模块化编程的理念。 模块的定义:模块就是实现特定功能的相互独立的一组方法。 模块的意义:因为有了模块,我们能更好的管理网页的业务逻辑,以及按照自己的需求去使用各种模块,并且可以让每个开发者都能设计自己想要的模块以及去使用别人的模块代码。 @有了模块的概念,但为了让大家能方便的加载各种模块,因此需要一套编写模块的规范,而目前通行的Javascript的模板规范共有两种:CommonJS 和 AMD COMMONJS CommonJS的历史渊源:
2年前
开发模式
江源 ,非常让人头疼…… 于 2年前发表 3465 1 0
本地存储(localStorage)已经不是新鲜的概念,本文并不是本地存储的概念及 API 介绍,而是对本地存储在实际业务场景中的一些问题做些探讨,从而形成一套规范,保证本地存储在提高页面性能、提升用户体验的同时,避免出现莫名其妙的错误。 本文试图回答如下问题: 1. 本地存储满了之后,浏览器是什么样的行为? 2. 本地存储容量有限,因此宝贵,那么就整个站点而言,使用本地存储的策略是什么? 3. 实际编码过程中,本地存储又有那些注意事项? 本地存储的空间(SIZE) 让人意外的是,这一点在各主流浏览器(包含PC、移动端)竟然惊人的一致,都是 5M 的数量级。 值得说明的是,安卓上手 Q 、手机QQ浏览器、微信中则是 2.5M 的数量级,因此在移动端,本地存储的 SIZE 更加珍贵。 IOS 待测试 。 综上,SIZE 在 2 - 5M 的区间。 测试页面: Web Storage Support Test [http://dev-test.nemikor.com/web-storage/support-test/] 超过最大值的行为
2年前
性能
刘志龙 于 1年前发表 3447 1 5
一直对web安全很感兴趣,却一直只是略懂一点。决定从现在开始学起web安全的知识,更新起web安全系列的文章。文章内容为作者自己边学边写的,不对之处多谢各位大大们指出。 web安全比较经典的攻击手段有三种:xss,csrf,界面操作劫持。好吧,都是一知半解的,就从xss开始吧。这篇文章从xss基础讲起,内容比较简单,了解xss的同学可以直接跳过,关注后续笔者继续学习xss的文章就好了~~ XSS简介 XSS 全称(Cross Site Scripting) 跨站脚本攻击, 是Web程序中最常见的漏洞。指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的. 比如获取用户的Cookie,导航到恶意网站,携带木马等。 XSS分类 类型一: 反射型XSS 反射型XSS,又称非持久型XSS。之所以称为反射型XSS,则是因为这种攻击方式的注入代码是从目标服务器通过错误信息、搜索结果等等方式“反射”回来
1年前
Web安全
袁飞翔 于 2年前发表 3403 4 1
从 https://developer.chrome.com/devtools/docs/remote-debugging [https://developer.chrome.com/devtools/docs/remote-debugging] 我们可以知道在android 4.4+可以通过在apk中使用下面的代码开启webview的chrome远程调试 WebView.setWebContentsDebuggingEnabled(true); 但我们开发中接触的apk往往是第三方的,没谁会为我们开启webContentsDebuggingEnabled。而Xposed能强制做到这一点 XPOSED [HTTPS://GITHUB.COM/ROVO89/XPOSEDBRIDGE/WIKI/DEVELOPMENT-TUTORIAL] Xposed能够勾住(Hook) Android应用程序对象的方法,实现AOP,一个简单的例子: publicclass WebViewHook implements IXposedHookLoadPackage {
2年前
调试
link ,除了分享,也是知识管理。 于 10个月前发表 3313 6 1
PROTOCOL BUFFER入门教程 PROTOCOL BUFFER是个什么鬼? Protocol Buffer(下文简称protobuf)是Google提供的一种数据序列化协议,下面是我从网上找到的Google官方对protobuf的定义: Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据序列化,很适合做数据存储或 RPC 数据交换格式。它可用于通讯协议、数据存储等领域的语言无关、平台无关、可扩展的序列化结构数据格式。目前提供了 C++、Java、Python 三种语言的 API。 道理我们都懂,然后并没有什么卵用,看完上面这段定义,对于protobuf是什么我还是一脸懵逼~ 理都懂 [http://img.blog.csdn.net/20160325101815944] NODEJS开发者为何要跟PROTOCOL BUFFER打交道 作为JavaScript开发者,对我们最友好的数据序列化协议当然是大名鼎鼎的JSON啦!我们本能的会想protobuf是什么鬼?还我JSON! 这就要说到protobuf的历史了。
10个月前
nodeJS全栈
吴浩 于 1年前发表 3311 1 0
一、重构的目的 1.URL简化 过长的url不利于传播,比如输入框的字数限制导致分享的url被截断或分享内容无法提交。复制url文本时,短的url也可能使鼠标少拖动一段距离。 2.规范URL http://ke.qq.com/cgi-bin/courseDetail?course_id=36413 [http://ke.qq.com/cgi-bin/courseDetail?course_id=36413] 类似这个课程详情页的url,包含大、小字母、下划线和中划线。我们希望统一下划线做单词间分隔。 3.结构化,语义化 例如: http://ke.qq.com/tupu/3/course [http://ke.qq.com/tupu/3/course]
1年前
运营
莫卓颖 于 1年前发表 3302 0 2
可视化前端测 背景 相信进行过前端开发的同学都知道,前端测试不仅仅涉及到功能的测试,而且也需要考虑到界面样式测试、多浏览器兼容性测试、性能测试。本文主要讨论分析目前前端测试的现状,并讨论目前流行的测试工具,下篇文章将会介绍工具的使用方法 前端测试分类 前端测试 主要分三大方向测试,而这三大方向也分很多小方向测试,首先简单的介绍每个方向的概念 * 界面样式测试 固定界面样式测试 :主要针对文字内容不变的区域,例如页面的页头,页脚这类结构、内容不变的区域,而测试一般通过截图对比解决。 结构不变界面样式测试 :主要针对结构不变的区域,例如新闻区域这类结构不变,内容变化的区域,这类测试一般通过DOM元素对比解决。 计算样式测试 :主要针对计算样式不变的区域,这类测试一般通过比较计算样式解决,但是这种测试不推荐,因为测试成本比较大。 * 功能测试 服务器数据预期测试 :主要针对用户在前端界面进行某种操作后,提交数据给后台后,测试后台能否返回预期的数据 界面功能测试 :主要针对用户在前端界面进行某种交互性操作后,测试能否获取预期的功能、界面交互 * 多浏览器测试
1年前
调试