文章列表
李冬冬 于 1年前发表 2847 0 1
先来个最原始的页面,比如下面的index.html中,引入了css和js资源 <linkrel="stylesheet"href="a.css"></link><scriptsrc="a.js"></script> 写完后,部署上线。然而我们要考虑充分利用浏览器缓存,我们的目标是资源文件直接读取浏览器缓存,于是给它设置 Cache-Control/Expires 和 Last-Modified/ETag。Cache-Control/Expires的作用是在缓存时间内,正常进入页面,浏览器不会发出请求,直接读取浏览器缓存资源。如果用户点击“刷新”按钮或缓存时间消失,浏览器会发送请求,并根据Last-Modified/ETag判断内容是否有更新,如果内容没更新,服务器返回304。 上线后,来了一大波需求。于是改完再发一次。依然是直接将html和资源文件丢到线上,直接访问页面地址,咦?怎么没生效?哦,原来是缓存作祟。html更新了,但是读取的a.css和a.js还是浏览器缓存里面的内容,没有更新到最新。怎样让浏览器缓存失效呢?于是我们想到了版本控制,加个版本号不就解决问题了嘛,so
1年前
开发模式
coolriver 于 1年前发表 1923 7 0
题要 在参与 【腾讯课堂,暑期早起团】 [http://ke.qq.com/activity/morning_h5/index.html?_wv=4097>_wv=4097] 活动开发的过程中,涉及到了课程卡片的展示。具体效果如下:[http://7tszky.com1.z0.glb.clouddn.com/FuBeKOHOKBSdhNclqW2hVsfpgknq] 图中每个白底的框框是一个课程卡片,课程卡片组合在一起形成课程面板。本文主要记录对课程卡片和课程面板的优化过程。包含 " 原始版本 > 优化组件step1 > 优化组件step2 > 优化组件step3 ",每一步都有相应的目录和代码说明,最后的step3给出了完整的js代码,所以 本文中代码较多 。。。 原始版本 最初的实现形式也是想进行组件化,主要文件和目录如下: ./src ├── js │ └── main.js ├── css │ └── main.scss ├──lego_modules //组件目录 │ └──courseCard //课程面板组件
1年前
开发模式
henryguo ,郭亨厮混在腾讯 于 1年前发表 3028 12 1
[http://7tszky.com1.z0.glb.clouddn.com/FmYdUaawBA2Ufebl3LZ9bgiwkO0z] 2015年上半年的团队考核和个人考核已经尘埃落定了,感谢 IMWeb Team [http://imweb.io] 的每一个同学勤奋和努力,我们取得了还不错的结果:)。 下面简单回归一下上半年我们做的事情,以及下半年我们要重点突破的方向。 回顾上半年的KPI情况 除了业务几个重大KPI的突破以外,基础侧主要集中在一下几个点: 1、持续的性能提升和慢速用户降低 * 教育平台性能得分稳定在99分以上,慢速用户降低到0.8%。 * o2o项目接入监控体系 * 互动视频完成一期链路的性能优化 * iconfont体系落地 2、基于Q.JS的MVVM体系建设 * Q.js支持ie6,7,8及现代浏览器,并在三个线上业务上线稳定运行 * Ques构建体系完成 * Q体系的内部分享 3、组件体系的初步尝试 * lego工具的实现 * lego.imweb.io [http://lego.imweb.io] 的初步框架搭建 * 教育ui组件的统一
1年前
开发模式
coverguo 于 2年前发表 3474 2 0
* 模块化编程 * CommonJS * AMD(Asynchronous Module Definition)规范 * requireJS与seaJS * requireJs 以及 seaJs 的区别 模块化编程: @为了更好的开展话题,首先需了解什么是前端模块化 模块的由来: 其实模块化的诞生不难理解,我们知道因为随着网站逐渐的发展,嵌入网页的Javascript代码越来越庞大,而网页越来越像桌面程序,需要一个团队去分工协作,进行管理和测试等等,为了更好的管理网页的业务逻辑,产生了模块化编程的理念。 模块的定义:模块就是实现特定功能的相互独立的一组方法。 模块的意义:因为有了模块,我们能更好的管理网页的业务逻辑,以及按照自己的需求去使用各种模块,并且可以让每个开发者都能设计自己想要的模块以及去使用别人的模块代码。 @有了模块的概念,但为了让大家能方便的加载各种模块,因此需要一套编写模块的规范,而目前通行的Javascript的模板规范共有两种:CommonJS 和 AMD COMMONJS CommonJS的历史渊源:
2年前
开发模式
杨文坚 ,首席吹牛工程师 于 2年前发表 1703 0 0
前端测试,或者UI测试一直是业界一大难题。最近 Q.js 使用 Karma [https://github.com/karma-runner/karma] 作为测试任务管理工具,本文在回顾前端测试方案的同时,也分析下为什么 Q.js 选用Karma而不是其他测试框架。 像素级全站对比 曾今有一批人做过这样的UI测试,即最终页面图像是否符合预期,通过图片差异对比来找出可能的问题。 [http://7tszky.com1.z0.glb.clouddn.com/FvhK-IJ9cQi7tvPar02XdGKQA0EE] 如图所示,所谓像素级站点对比,即利用截屏图像前后对比来找出,站点前后差异,从而发现问题。 Q: 为什么需要这种测试呢? A: CSS容易被破坏,在大型响应式重构案例中,像素级全站对比是一个比较好的测试方案。 目前常用的两大工具: * BackstopJS [http://garris.github.io/BackstopJS/] * PahntomCSS [https://github.com/Huddle/PhantomCSS] 录制型测试
2年前
开发模式