Pages: 10/282 First page Previous page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]
Nov 15
典型的场景
点击button请求一个同步的ajax,在ajax之前show loading效果,gif或之类,当展现的效果是 loading并没有show出来,这是因为ajax阻塞了ui的渲染,下面的方法可以参考
方法一:
使用settimeout


方法二:
上面的图片在IE与Chrome浏览器不显示,在firefox里面正常,通过Chrome debug模式发现,它是会显示的,由于后面的计算是JQuery同步操作,需要过长时间计算,导致界面UI卡死(来不及展示)。
浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求 时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线 程阻塞,不给它执行的时间。这就是代码失效的原因。
jQuery在1.5版本之后,引入了Deferred对象,提供的很方便的广义异步机制。
deferred对象就是jQuery的回调函数解决方案,deferred对象的含义就是"延迟"到未来某个点再执行。
$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。
解决方法:使用JQuery Deferred对象。
Nov 5
从服务端优化来说,通过对服务端做压缩配置可以大大减小文本文件的体积,从而使加载文本的速度成倍的加快。目前比较通用的压缩方法是启用gzip压缩。它会把浏览器请求的页面,以及页面中引用的静态资源以压缩包的形式发送到客户端,然后在客户端完成解压和拼装.具体是实现不用关心,我们只要将GZip启用就好.下图是使用相关工具检测没有开启网页压缩的效果。如下步骤我们就来具体开启基于apache的GZip压缩支持。

找到并打开apache/conf目录中的httpd.conf文件
httpd.conf中打开deflate_Module和headers_Module模块,具体做法为将 如下两句前面的#去掉:
LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
开启apache服务器gzip压缩
在httpd.conf文件底部加入如下代码配置需要压缩的文件:

SetOutputFilter DEFLATE
# Don’t compress images and other
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE application/x-javascript

开启apache服务器gzip压缩
重启apache服务端
开启apache服务器gzip压缩
使用工具重新检测是否开启gzip压缩。考虑到相关广告检测机制具体的gzip检测工具访问地址可以到搜索引擎中去查找。
开启apache服务器gzip压缩
Nov 2
关于控制器如何通信的问题,是不少刚接触angulr的同学想知道的。总的来说,angular控制器通信的方式有三种:
1,利用作用域继承的方式。即子控制器继承父控制器中的内容

2,基于事件的方式。即$on,$emit,$boardcast这三种方式

3,服务方式。写一个服务的单例然后通过注入来使用

利用作用域的继承方式

由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会
影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值;如果需要父作用域与子作用域共享一个值
的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。
Nov 2
requirejs加载超时,除了将js min化之外,还可以增加requirejs的超时时间,如下

Highslide JS
Oct 8
下面是我整理和收集的一些前端开发常用的 插件、工具、软件等不为别的,相当于给电脑做个小备份,至于使用方法,以后我会总结,目前的话还是自行google吧。

【FireFox插件】

1.  Firefbug     ——    页面调式工具
2.  YSlow     ——    网页评级工具
3.  pixel Perfect      ——    HTML与设计稿对比
4.  CSS Usage     ——    CSS使用效率优化工具
5.  Page Speed     ——    快速优化网页类似于YSlow
6.  Measureit     ——    实时测量工具
7.  Fiddler     ——    本地调式页面样式利器
8.  DNS flusher     ——    DNS刷新工具
9.  Colorzilla     ——    实时颜色选取工具
10.  Web Developer     ——    检查网页的相关信息
11.  FireMobileSimulator     ——    模拟手机
12.  JavaScript Dubugger     ——    JavaScript 排错
13.  Greasemonkey     ——    脚本小程序
14.  Firecookie     ——    Cookie

【Chrome插件】

1.  Awesome Screenshot     ——    网页截图
2.  user-Agent Switcher     ——    切换显示设备
3.  web Developer     ——    检查网页的相关信息
4.  Window Resizer     ——    更改分辨率
5.  YSlow     ——    网页评级工具
6.  浏览器兼容性检测
Oct 8
谷歌浏览器Chrome Stable 稳定版迎来例行升级,新版本号为v45.0.2454.101,本次更新了稳定性改进及Bug修复!Google Chrome,又称Google浏览器,是个由Google(谷歌)公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的界面。
Google Chrome 新版更新了什么?
- 从v45版开始官方已彻底移除了NPAPi插件参数,现在PPAPI插件彻底停止;
- V42已正式停止对NPAPI插件的支持,现在默认安装仅支持5款PPAPI插件;
- 启NPAPI插件方法:请地址栏输入:chrome://flags/#enable-npapi 启用
官方更新日志
http://googlechromereleases.blogspot.com
64位版Google Chrome 有什么区别?
64位Chrome能更好地利用当今的硬件,并且对速度、安全性、稳定性进行了改善!
速度:64位Chrome能利用最新的处理器和编译器优化、更现代的指令集、更快的调用协议,从而实现了速度大提升,尤其是在图形和多媒体内容方面,性能提升25%。
安全性:Chrome能够利用最新的OS功能,例如Windows 8的High Entropy ASLR,64位Chrome在安全性上也实现了大幅提升。
稳定性:Google还在32位Chrome的基础上增强了64位Chrome的稳定性,尤其是,渲染器处理中的崩溃率大大降低,是32位Chrome的一半。
N软网提示大家有些插件还不支持64位版谷歌浏览器。
Google Chrome 稳定版 官方本地下载地址:
Google Chrome v45.0.2454.101 32位版 离线包
http://dl.google.com/chrome/win/0E8B92977CB91A99/45.0.2454.101_chrome_installer.exe
http://redirector.gvt1.com/edgedl/chrome/win/0E8B92977CB91A99/45.0.2454.101_chrome_installer.exe
Google Chrome v45.0.2454.101 64位版 离线包
http://dl.google.com/chrome/win/98E60FD8733C86C4/45.0.2454.101_chrome64_installer.exe
http://redirector.gvt1.com/edgedl/chrome/win/98E60FD8733C86C4/45.0.2454.101_chrome64_installer.exe
Chrome官方稳定版带更新功能 N软网 百度网盘:
http://pan.baidu.com/s/1qWPshOC
Oct 3

 随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些新特性,web开发人员也都兴趣十足地试用这些新特性开发出更绚丽有趣的应用,但是各大浏览器对这些新特性参差不齐地支持(尤其是令人头疼的IE)所带来的版本兼容性问题始终都是萦绕在开发人员心头的噩梦。传统的使用习惯使得我们很难摒弃老版本浏览器,开发人员只能选择令人厌烦的手工测试,测试,再测试。

为了解决这一难题,Modernizr应运而生了。它的名字听起来有点像Modernize, 确实,该名字起源于使得开发体验能够更现代化的目的,但它并非试图使旧的浏览器现代化,也就是使它支持这些新特性(尽管你确实可以通过添加shim/polyfill脚本来让浏览器支持某些不支持的新特性,后面会介绍)。

Sep 3
采用流行方便的大前端脚本语言结构:Angularjs+Nodejs
前端采用Angularjs实现双向绑定,采用sass写css,采用requirejs加载js脚本

angularjs单页入口,采用指令定制页头,页尾以及常用按钮,例如后退,返回主页等

h5开发采用页面自适应,并采用rem作为单位,h5页面会调用webview所在android公布的若干api实现调取系统摄像头等

nodejs采用express+orm,提供restful的api以共调用

关于前端不错的参考:https://github.com/monw3c/angularjs_pingan
Pages: 10/282 First page Previous page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]