随笔分类 - web前端

摘要: react 技术栈项目轻量化方案调研 团队的新项目,无论是pc端的还是移动端的,都已全面转移到了 react 的技术栈。 然而,对移动端来说,react 框架脚本的体量还是有些偏大。 在后续项目比较成熟,需要重点考虑性能的时候,如何优化其加载,是一个不得不考虑的问题。 寻找方案 优化加载,我首先想到阅读全文
posted @ 2017-05-08 17:43 snadn 阅读(139) | 评论 (0) 编辑
摘要: service worker 实战 service worker 是现代浏览器的一个新特性,伴随着谷歌的 PWA 概念一起,在近期广泛的出现在大家的视野里。 关于 service worker 的概念和相关的机制,本文不再介绍,大家可以参考 mdn 或自行 google。 本文主要说说我是怎么使用 阅读全文
posted @ 2017-04-05 15:09 snadn 阅读(230) | 评论 (0) 编辑
摘要: 那些年使用npm进行依赖管理所踩的坑 废话 公司的项目用上了node来做前后端分离,相应的自然离不开使用npm来对依赖的第三方包进行管理。 npm使用的语义化版本号管理想法很好,使用 安装依赖包时,自动加上的 的版本号,看上去似乎也很有道理。 然而现实总是那么残酷,在经历了多次:在开发环境还跑的好好阅读全文
posted @ 2016-03-28 10:24 snadn 阅读(1054) | 评论 (0) 编辑
摘要: 记录几个最近开发踩的坑1. 页面加载时的window size 并不可靠。 问题:使用window.innerHeight 取到的高度并不一定是真实高度。 该问题在新打开的webview中尤其明显。所以必要时可加定时器进行校验。2. 避免使用window.onresize事件 问题:由于移动端浏览器...阅读全文
posted @ 2014-12-12 19:32 snadn 阅读(65) | 评论 (0) 编辑
摘要: 第一次使用angularjs做项目是做360音乐的wap站(http://m.music.so.com/)。开发的过程中把angularjs好好的了解了一下,也踩了许多坑。现在记录下一些注意点:1. scope的继承。 angular里的scope是基于原型继承的。所以子scope在使用属性,尤其是...阅读全文
posted @ 2014-10-20 19:26 snadn 阅读(91) | 评论 (0) 编辑
摘要: 现象:1.在移动端播放音频文件的时候发现部分mp3音频文件在我的s4上无法播放,在使用转码工具将其重新转成mp3后,就能播放了。2.将不能播放的文件上传到云盘后,使用云盘的资源地址,发现可以在移动端播放。3.对比http请求,发现对云盘资源的请求里有206响应。然后看之前不能播放的请求,里面也是有range头的,只是之前的资源不支持range。4.对于移动端不能播放的资源,在pc端是可以播放的。结论:移动端对音频文件的格式要求更严,若无法取到其中的duration信息,会尝试发送range头通过206响应获取。若还获取不到,则资源无法播放。ps:以上不能播放的资源,在ios上(new ipad阅读全文
posted @ 2014-02-25 18:55 snadn 阅读(196) | 评论 (0) 编辑
摘要: 1. 高度处理移动端可以放心的使用min-height和max-height了,也应该学会灵活使用这些属性。line-height和height避免同时使用,让line-height撑起高度即可。否则容易出现line-height>height的情况,导致显示效果不居中甚至少一截的情况。2. 兼容相关移动端可以使用很多css3和html5的东西,但要注意支持的情况,而有些属性使用时需要前缀。(兼容可以参考http://caniuse.com/#index)。比如Box-sizing这个属性,在移动端就很有用,但在Android4.0以前需要加-webkit-的前缀。又比如Android虽阅读全文
posted @ 2014-02-12 19:34 snadn 阅读(142) | 评论 (0) 编辑
摘要: 最近在做一个页面的时候,发现在ie8浏览器(也包括ie7)中,字体有显示发虚,甚至大小不一样的问题。经过追查,发现原来是使用透明滤镜后,对字体的渲染造成了影响。解决方法有两种:若需要使用透明滤镜,可以给使用滤镜的元素加一个背景色。效果如下,不过字体还是有一些发虚。当然,最根本的方法还是避免使用滤镜了。阅读全文
posted @ 2014-01-23 12:29 snadn 阅读(1782) | 评论 (0) 编辑
摘要: 这几天做移动端的音乐播放,果然是踩坑不断呀!其中一个就是,做好的播放功能,在pc上可用,在手机上的壳子浏览器可用,可偏偏在原生浏览器和chrome上不行。折腾了好久(主要还是移动端的调试真心不方便呀),最终定位到问题是: 移动端一个audio对象的第一次播放,必须是一个用户触发的行为。至少在我目前4.3的三星s4的原生浏览器和chrome31上是这样的,相信在以后的版本上也会是这样。所以对于异步获取播放的资源链接再进行播放的实现,在这两个浏览器上就会失效。解决方法:既然不能异步,最简单的方法就是换成同步呗。当然,这对于项目来说是不现实的……上面提到,这个限制对于同一个audio对象,只在其初.阅读全文
posted @ 2013-12-08 13:20 snadn 阅读(2073) | 评论 (2) 编辑
摘要: window.opener对象,相信一看这名字就能猜到这个是打开当前页面的来源页面对象。和parent,top,等相似。这里要记录的是:虽然通过opener获取location时有跨域的的限制。但却可以通过直接更改location对象使来源页面重定向!个人认为这应该算一个大坑,一个严重的安全漏洞了。阅读全文
posted @ 2013-12-08 12:58 snadn 阅读(46) | 评论 (0) 编辑
摘要: 原文链接:http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#line-height译者序:翻译该段文档,是因为自己在写相应的样式时遇到了疑惑,于是找文档看说明,发现很多地方和自己以前的理解还是有很大的差异,阅读后收获颇丰,而且网上目前的中文参考资料中似乎也找不到原滋原味的定义。于是决定自己翻译一下,也算是对自己的锻炼吧。第一次翻译,错误和不足的地方欢迎大家指正。ps:没想到短短的一段文档翻译居然用了两三周时间才完成。文章仅为翻译,对知识点的整理和总结等以后有时间再考虑吧。阅读该文档时需注意每个用词,不同用词有不同含义,相似的用词往阅读全文
posted @ 2013-09-10 20:11 snadn 阅读(500) | 评论 (1) 编辑
摘要: 关于2:该条错误。关于3:inline-block的baseline,定义于http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align最后一行。关于tips2:line-height不影响inline元素的高度,但影响其使用vertical-align属性时的展现效果。(即vertical-align使用line-height形成的行盒进行定位)ps:该内容仅为个人进行经验记忆的记录。阅读全文
posted @ 2013-08-09 18:50 snadn 阅读(102) | 评论 (1) 编辑
摘要: 让js复用smarty模板场景:tabview或者加载更多内容的时候,往往需要从后端获取数据,然后用js生成相应的html代码,插入到相应的位置。通常方法:1. 后端直接build相应模板,然后输出到前端。优点:smarty模板功能强大,能使用php语法,方便调用php中自定义的处理逻辑,只用写smarty模板缺点:加载时传输数据大。2. 前端使用js模板,用后端给的数据build。优点:仅传输需要的数据缺点:页面第一次展现时需要再次发送请求build需要的数据,对于展现的实时性和seo都不是很友好3:混合使用smarty和js模板优点:解决前两个的问题缺点:需要维护两套模板,开发和维护成本太阅读全文
posted @ 2013-07-19 21:20 snadn 阅读(356) | 评论 (0) 编辑
摘要: 使用chrome控制台打断点可以看到函数执行时候的scope这是很早之前就知道的。但使用console.dir也可以查看到函数的scope却是今天调试时的意外收获。调试代码:<!doctype html><html><head> <meta charset="utf-8" /> <title>test</title></head><body><script type="text/javascript">var t1=1;var a=function阅读全文
posted @ 2013-06-20 20:01 snadn 阅读(321) | 评论 (1) 编辑
摘要: 现象: 父容器高度大于子图片高度 View Code (不知道怎么在博客里插入js)div高度比图片高度大。原因:img是inline元素,有假想元素。基于baseline定位时,父容器高度为...阅读全文
posted @ 2013-06-18 17:36 snadn 阅读(177) | 评论 (2) 编辑
摘要: 1. 父页面<html><head> <meta charset="gbk"> <title>引用页面</title></head><body><button id='openNewWindow'>弹出新窗口</button><button id='sendMessage'>发送消息</button><input id='message' value='0'><i阅读全文
posted @ 2013-06-18 15:22 snadn 阅读(155) | 评论 (0) 编辑
摘要: 做水平滚动轮播时的思考。ul宽度不会被撑开,但scrollwidth会撑开。<html><head> <title>test-li不折行</title> <meta charset="gbk" /> <style type="text/css"> ul{ white-space: nowrap; padding: 0; margin: 0; overflow: auto;} li{ width: 900px; height: 200px; background-color: gree阅读全文
posted @ 2013-04-26 13:15 snadn 阅读(392) | 评论 (0) 编辑
摘要: <html><head> <title>获取鼠标进入容器方向</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript" src="http://dev.qwrap.com/download/latest/apps/qwrap.js?20121011"></script><阅读全文
posted @ 2012-12-18 13:47 snadn 阅读(52) | 评论 (0) 编辑
摘要: var s = 0;var l = 4;var timer = null;var isback = false;W(document).on('mousewheel', function(e) { var isTop = document.body.scrollTop == document.documentElement.scrollTop; if (isTop && !isback && s < 100 && e.detail < 0) { clearTimeout(timer); console.log(s, l阅读全文
posted @ 2012-12-13 19:33 snadn 阅读(32) | 评论 (0) 编辑