前端性能/框架
似曾相识-
http://blog.csdn.net/liaozhongping,不积跬步无以至千里,不积小流无以成江海
展开
-
ExtJs使用总结
一、获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存。 注:享元模式(Flyweight原创 2015-08-05 23:30:20 · 404 阅读 · 0 评论 -
zepto使用中的一些注意点
处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过event.touches[0]来获取属性。重要属性如下:clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY: 触摸点相对于页面的位置;screenX,sc转载 2015-07-19 10:57:48 · 679 阅读 · 0 评论 -
seajs的使用方法个人总结
seajs的作用:当你的网站开发越来越复杂的时候,会经常遇到这些问题吗?冲突性能依赖seajs如何解决?①引入sea.js的库②如何变成模块?define 在模块grunt合并的时候 define里面要多2个参数 一个id ,一个依赖模块的数组③如何调用模块?exportsseajs.use④如何依赖模块?require http转载 2015-07-19 10:57:11 · 2371 阅读 · 0 评论 -
Bootstrap和Foundation以及Semantic UI对比和使用
Semantic UI—完全语义化的前端界面开发框架,跟Bootstrap和Foundation比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。文章里详细介绍了Semantic UI自身的功能特性和优缺点。在这篇文章当中作者讲述了Semantic UI具备哪些功能特性,以及和其它前端界面开发框架的不同之处。可能Semantic UI只是HTML/CSS框架领域上转载 2015-07-06 20:53:53 · 9488 阅读 · 0 评论 -
JavaSript模块规范 - AMD规范与CMD规范介绍
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是转载 2015-07-06 07:48:45 · 544 阅读 · 0 评论 -
SeaJS与 RequireJS 的异同
相同之处RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然。不同之处两者的主要区别如下:定位有差异。RequireJS 想成为浏览器端的模块加载器,同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端,同时通过 Node 扩展的方式原创 2015-07-06 07:47:35 · 624 阅读 · 0 评论 -
解读前端性能优化之“配置ETag”
1、什么是ETag?实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串,是web服务器用于确认缓存组件的有效性的一种机制,通常可以使用组件的某些属性来构造它。(总结:实体标签是web服务器和浏览器用于确认缓存组件的有效性的一种机制。)条件GET请求浏览器下载组件的时候,会将它们存储到浏览器缓存中。如果需要再次获取相同的组件,浏览器将检查组件的缓原创 2016-04-10 18:39:28 · 4446 阅读 · 1 评论 -
cdn及域名解析原理
用户访问未使用CDN缓存网站的过程为: 1)、用户向浏览器提供要访问的域名; 2)、浏览器调用域名解析函数库对域名进行解析,以得到此域名对应的IP地址; 3)、浏览器使用所得到的IP地址,域名的服务主机发出数据访问请求; 4)、浏览器根据域名主机返回的数据显示网页的内容。 使用了CDN缓存后的网站的访问过程变为: 1)、用户向浏览器提转载 2015-06-19 23:10:05 · 2463 阅读 · 0 评论 -
favicon.ico 的作用(收藏夹的图标文件)
在WEB服务器总是经常看到"GET /favicon.ico HTTP/1.1" 404 288 "-" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon)",以前一直没有在意,以为是网页做的不好,修改别人的网页导致某处留下了这个图片的调用。 今天在google搜索一下,才发现这个favicon.ico的原创 2015-07-06 20:56:07 · 867 阅读 · 0 评论 -
JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。JavaScript作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和转载 2016-12-06 21:30:31 · 311 阅读 · 0 评论 -
vuejs学习入门笔记
下来进入咱们的学习环节:一、从HelloWorld说起任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码:12345678910111213141516171819转载 2017-02-19 19:20:33 · 441 阅读 · 0 评论 -
JS模块加载器加载原理及实现一个CMD模块加载器
一、(1)原理一:id即路径 原则。通常我们的入口是这样的: require( [ 'a', 'b' ], callback ) 。这里的 'a'、'b' 都是 ModuleId。通过 id 和路径的对应原则,加载器才能知道需要加载的 js 的路径。在这个例子里,就是 baseUrl + 'a.js' 和 baseUrl + 'b.js'。但 id 和 path 的对应关系并不是永远那转载 2017-02-21 19:52:34 · 1608 阅读 · 0 评论 -
深入理解javascript的定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如setTimeout( function(){ alert(’你好!’); } , 0);setInterval( callbackFunction , 100);认为setTimeout中的问候转载 2017-03-20 15:16:08 · 333 阅读 · 0 评论 -
NativeScript简介
Telerik公开了用于创建安卓、iOS和Windows Universal跨平台原生应用的框架,NativeScript的公共访问权限。NativeScript既不是一种新型的JavaScript语言,也不是原生功能的封装器,它包括一个JavaScript运行时环境和一种将JavaScript调用转化为原生调用的机制。用JavaScript(或TypeScript,CoffeeScrip转载 2017-03-22 10:35:17 · 1340 阅读 · 0 评论 -
构建工具fis3的使用
(1)release发布命令fis3 release -d 任意目录fis3 release -h 获取更多参数fis3 server start启动内置服务器fis3 server -h 获取更多参数fis3 server open打开内置服务器目录,不指定发布地址则默认发布到内置服务器中原创 2017-07-24 15:01:08 · 777 阅读 · 0 评论 -
一种不常见的跨域方式--使用CSS3特性做跨域
CSST (CSS Text Transformation)通过CSS3的content获取内容。利用js动态创建一个link插入到文档中, 请求css文件.利用 computedStyle = window.getComputedStyle 获取指定元素的style 对象利用 computedStyle .content 获取内容服务端可以返回的 css 文件内容:转载 2017-07-24 15:07:25 · 992 阅读 · 0 评论 -
使用Fiddler进行iOS APP的HTTP/HTTPS抓包
Fiddler不但能截获各种浏览器发出的HTTP请求, 也可以截获各种智能手机发出的HTTP/HTTPS请求。Fiddler能捕获iOS设备发出的请求,比如IPhone, IPad, MacBook. 等等苹果的设备。 同理,也可以截获Andriod,Windows Phone的等设备发出的HTTP/HTTPS。最关键的是,对ios应用抓包时直接在Windows PC上进行,不需要非转载 2017-08-11 13:58:45 · 1136 阅读 · 0 评论 -
vscode的常见使用介绍
主命令框F1 或 Ctrl+Shift+P: 打开命令面板。在打开的输入框内,可以输入任何命令,例如:按一下 Backspace 会进入到 Ctrl+P 模式在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式在 Ctrl+P 窗口下还可以:直接输入文件名,跳转到文件? 列出当前可执行的动作! 显示 Errors或 Warnings,也可以 Ctrl+Shift+M: 跳转...转载 2018-03-04 01:46:26 · 5051 阅读 · 1 评论 -
如何提高jQuery的性能探讨
(1)缓存变量DOM遍历是昂贵的,所以尽量将会重用的元素缓存。// 糟糕h = $('#element').height();$('#element').css('height',h-20);// 建议$element = $('#element');h = $element.height();$element.css('height',h-20);(2)避原创 2015-10-31 16:09:54 · 412 阅读 · 0 评论 -
原生APP和Web APP的区别
Native App开发Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。Web App开发Web App开发即是一种框架型APP开发模式(HTML5转载 2015-09-20 00:37:08 · 8199 阅读 · 0 评论 -
前端性能优化的14个规则
规则01:尽量减少HTTP请求前端优化的黄金准则指导着前端页面的优化策略:只有10%-20%的最终用户响应时间花在接受请求的HTML文档上,剩下的80%-90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上。因此,改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求的数量。当然很多人就会说,既然这样,那我们就减少页面组件的数量不就OK了吗?那你原创 2015-08-05 23:29:56 · 1516 阅读 · 0 评论 -
提高网站速度的6种网站前端优化方法
1、利用浏览器缓存你的 js 和 CSS 文件: 在网站根目录 .htaccess 中加入以下代码 ExpiresActive on ExpiresDefault “access plus 1 year” 这段代码的意思是对 jpg|gif|png|css|js 发送 header 缓存头,进行一年的缓存、在浏览器不使用 ctrl+F5 强制刷新时,会一直缓原创 2015-08-05 23:27:56 · 643 阅读 · 0 评论 -
ArtTemplate的简单介绍
特性性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)支持运行时调试,可精确定位异常模板所在语句(演示)对 NodeJS Express 友好支持安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)支持include语句,可在浏览器端实现按路径加载模板支持预编译,可将模板转换成为非常精简的 js 文件模板语句简洁,无转载 2015-08-03 23:01:36 · 6636 阅读 · 0 评论 -
如何减少浏览器repaint和reflow ?
一、什么是repaint/reflow?页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂,其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的转载 2015-08-02 09:30:46 · 1432 阅读 · 0 评论 -
探讨web前端性能分析
1、web前端性能----原理:即是web用户在访问一个页面时所要花费的时间总和。即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素。那么一个web页面的完整请求包括了哪些部分的时间总和就是web前端性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧。页面的请求过程:=========原创 2016-03-31 19:00:00 · 4258 阅读 · 0 评论 -
超轻量级异步JS框架
1.异步JS的重要性随着Web平台地位的提升,霸占着浏览器的JavaScript语言也成为了世界上最流行的语言之一,甚至通过Node.js进入了服务器编程领域。JavaScript的一个重要特性便是“不能阻塞”,这里的“不能”是指“不应该”而不是“无法”的意思(只要提供阻塞的API)。JavaScript是一门单线程语言,因此一旦有某个API阻塞了当前线程,就相当于阻塞了整个程序,所以“异原创 2015-10-31 19:23:21 · 1067 阅读 · 0 评论 -
jQuery拖放排序插件DDSort
一个简洁漂亮的jQuery拖放排序插件DDSort拖放排序是WEB应用中常见的功能。虽然网上有很多别人已经造好的轮子,但是就我个人而言,没事就喜欢研究原理,自己造轮子,不管强大与否,简洁够用就是我的目标,再一个就是自己写的东西,应用起来得心应手,修改或者扩展起来也是得心应手,相比一些API不够详细,或者说用户体验不好(不够简明)的API来说,或者说插件本身就没考虑周到,考虑原创 2015-10-31 19:08:27 · 1847 阅读 · 0 评论 -
AngularJS小结
AngularJS早些时候有过了解,知道这是一个JS的MVC框架,同类型的框架还有Backbone等。这次是由于项目需要,学习了两天的Angular后开始着手改之前的项目代码,这里大概说一下这一周学习Angular的心得体会吧。 首相,使用Angular最大的感受就是它的设计思路完全不同于Jquery,jquery更倾向于对Dom的操作;而使用Angular则需要你有一个全局的认原创 2015-09-28 11:32:13 · 608 阅读 · 0 评论 -
angularjs中的使用注意
1、关于动态生成ui-sref的问题ui-route中ui-sref中的路径无法动态生成的,如果要实现动态生成ui-sref路径,可以使用$state.go做跳转:if($location.path().substring(8,14) == 'zrssjg'){ $state.go('sousuo.zrssjg', {topic:$scope.keyWord}, { reloa原创 2015-09-27 02:16:36 · 484 阅读 · 0 评论 -
impress.js
1、认识impress.js impress.js 采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。 现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具,但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等。同时,也支持传统原创 2015-09-27 02:15:12 · 527 阅读 · 0 评论 -
JS组件系列——Bootstrap Table 表格行拖拽
一、业务需求及实现效果项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行。除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回转载 2015-10-31 12:21:33 · 4502 阅读 · 1 评论 -
颠覆式前端UI开发框架:React
基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此问题的一个解决方案,按官网描述,其出发点为:用于开发数据不断变化的大型应用程序(Building large applications with data that changes over time)转载 2015-09-22 08:47:29 · 1022 阅读 · 0 评论 -
树状结构---用jquery的小插件jquery.treeview实现树状结构
用jquery的小插件jquery.treeview实现树状结构步骤:1)在页面中引入相应的js、和css文件(还有相应的图片) 2、写要显示的列表例子:tree" class="filetree"> folder">系统管理原创 2015-09-23 02:51:10 · 3790 阅读 · 0 评论 -
如何分析一个网站
一般可以从三个方面去分析: 一、网站的营销能力 二、网站的用户体验 三、网站的搜索优化 一、网站的营销能力 分析网站的营销能力,主要带着五个问题去分析: 1.我是卖什么的? ●首页最显眼的位置是否有产品的展示 ●LOGO和公司名中有无主营产品 ●有没有突出产品的主题广告 ●首页有没有产品推荐或者相关供应原创 2015-09-23 02:44:58 · 800 阅读 · 0 评论 -
雅虎网站页面性能优化的34条黄金守则
雅虎团队经验:网站页面性能优化的34条黄金守则1、尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目转载 2015-07-27 06:01:55 · 561 阅读 · 0 评论 -
JavaScript内存泄漏
1、什么是闭包、以及闭包所涉及的作用域链这里就不说了。2、JavaScript垃圾回收机制 JavaScript不需要手动地释放内存,它使用一种自动垃圾回收机制(garbage collection)。当一个对象无用的时候,即程序中无变量引用这个对象时,就会从内存中释放掉这个变量。 var s = [ 1, 2 ,3]; var s原创 2015-07-26 10:54:07 · 342 阅读 · 0 评论 -
释放webpack tree-shaking潜力之webpack-deep-scope-analysis-plugin
在上周末广州举办的 feday 中, webpack 的核心开发者 Sean 在介绍 webpack 插件系统原理时, 隆重介绍了一个中国学生于 Google 夏令营, 在导师 Tobias 带领下写的一个 webpack 插件, https://github.com/vincentdchan/webpack-deep-scope-analysis-plugin , 这个插件能够大大提高 webp...转载 2018-09-04 16:11:38 · 1570 阅读 · 0 评论