`
T240178168
  • 浏览: 367182 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

前台javascript速度优化

    博客分类:
  • JS
阅读更多
两个基本点
1.         择重避轻,有所取舍。
l   核心优先
通常来讲,系统是都是庞大的,不要太完美主义,先抓住重点,理解那些是我们的核心页面,那些页面对我们来说是最重要的,那些页面访问量最高,核心优先。
l  主要问题在那,抓住瓶颈点。
治病要医本。优化前,需要进行细致的分析,抓住主要瓶颈点,对症下药。优化那么多的方子,别全采用,通常几个就能达到效果
2.         简单有效才是硬道理
越是简单的东西越容易控制,越不容易出错,尽量避免将系统设计的过于庞大,过于复杂,记住,这是在做产品,而不是在搞研发。很多看似很蠢的方法,往往越是有效。
新技术,新方法的引用是具备一定的风险的,要评估,要慎重。
Js处理
1.         尽量放到页面尾部
Js的加载时阻塞页面的,没下载完毕后面的内容不会出来,所以尽量避免把JS放到页面头部,按照经验估计,整个页面中所用的JS逻辑,90%都是可以放到页面尾部。
2.         延迟加载(按需加载)
很多的业务逻辑并非每次都使用也不是要立即使用,首次加载过程中仅仅加载那些必须的,只有当必要的条件触发,才去加载请求必要的JS.比如说权限验证通过,加载管理模块。点击发表文章按钮,加载与发表文章有关的验证和处理函数。
如果写过C++的肯定会接触过动态库和静态库,这个与之类似,什么时候需要什么时候再加载,首次打开页面肯定会清净了许多,而且业务逻辑也由此分离开来,管理和维护也会方便很多,毕竟减少了那么多的耦合。
按照BBS项目经验估计,普通页面的所有业务逻辑中需要在首次请求中加载的不到50%,我们的JS又由此砍掉了一半。
3.         合并JS,减少请求
请求多个小文件的效率远小于请求一个大文件的效率,因为需要多次DNS解析,多次连接,浏览器和server端也需要进行多次开启进程、权限验证和预处理,以及 http请求在数据包传递上的一些问题。
所以尽量避免在页面中加载一堆的js 文件,需要先讲需要的小的JS合并成一个大的JS文件统一输出,页面因此被卡住的时间肯定会减少很多。
为了提高开发效率,合并建议不要每次都手动来进行,导致之后维护成本很大,相信些个XML配置文件,确定合并规则以及依赖关系后,用程序自动合并效率会高很多,后面有我附上的一个配置示例,仅作参考形式不重要
4.         JS压缩
此手段属前端特有,毕竟流量意味着速度,意味着金钱。是在降低代码的可读性为前提。但事物的两面性告诉我们,可读性差也意味着安全,而且可读性可以通过保存压缩前的源文件来解决。
所谓的压缩,就是把场的变量名换成短的变量名,去掉没用的空格和换行符,从而节省我们JS程序的长度,不过目前这种处理已经很成熟,通过搜索可以搜出很多相关的工具。不再细说
经验值,能压缩50%以上,视程序与压缩工具而论。
5.         尽量少用第三方库
在我的印象中,很多框架都是很庞大20K以上,虽然很强大很方便,但如果不是做企业级应用,不要用,因为我们也许只可能用到其中很少的一部分功能却加载了整个框架。
不过框架中的很多方法是可以提取出来滴,或者精简成一个轻量级的框架,比如说trimPath,完全可以精简到4k.
6.         合并ajax请求
Ajax请求的数据,如果涉及请求多种数据,尽量考虑到将其合并。
7.         合理的使用缓存
缓存视乎是server端的事,但是js中也是经常用的。
一种是缓存在一个全局变量中,一些很复杂的计算和查找操作可以这样做。如果大家在使用模板类trimPath经常是需要对模板进行预处理,这种预处理的结果是可以被缓存的。这种缓存的缺点是页面刷新后数据就会失效。
另外一种是缓存在window.name或cookie里面,经常用来缓存一些AJAX调用的结果,避免反复请求server端,比如一些用户的权限验证信息,就没必要总是调用server端接口,缓存了也就减少了请求,提高了性能,但cookie大家要慎用,存于一些数据比较小的还行,每次http请求他是占用上行带宽的。
还有一种缓存的实现是借助于flash或其他的第三方组件,特点是可以缓存超大的数据,但是适应场景优先,需要特殊的平台支持,不过FLASH目前已经很通用了。
8.         能静态化输出,尽量少用JS渲染输出

页面制作
1.         素材合并
尽量把页面中的图片合并在一起,利用css sprite切割。这样减少了请求的次数。通常合并成3长大的图片,一张是有固定宽高的(比如说按钮),另外两张是分别横向或纵向平铺的1像素的小图,用来做背景用。
2.         CSS压缩处理
道理同JS压缩,也是有很多工具实用的可用。
3.         图片背景切割与平铺
切图是很有讲究的,很多区域能切成用1像素平铺,尽量用1像素小图平铺,尽量用一个较大的图片设置成背静。
4.         少用iframe和frameset
首先一点frame会阻塞页面,第二,产生额外的请求,第三,如果涉及交互,增加开发维护成本,第四对搜索引擎优化不好
5.         CSS尽量放到页面头部
浏览器只有等CSS下载完毕后,才会真正的显示页面,所以为了让页面尽快有所输出,把CSS放到头部,而且浏览器对CSS的处理时并行的,不会像JS那样会阻塞页面。
Server处理
1.         启用gzip压缩,约能压缩70%~80%
2.         js,css,图片添加过期头,让浏览器能缓存。能减少1/3以上的请求。
3.         静态页面、js、css等静态文件单独迁移
第一,         可以针对静态文件做专门优化,比如说squid反向代理,nginx代替apache做静态server。
第二,         便于管理和维护,以后迁移和拓展方便。
4.         js、css、图片等静态文件与当前应用放到不同的域名下。
不再传递那些无必要的cookie,减少传输。
5.         图片服务器分多域名。
浏览器对同一域名的只允许使用2个并发,如果页面图片过多,会由于并发排队从而阻塞页面。但域名也不能太多,会消耗DNS解析的时间,建议4个为佳。

附加
1.         JS合并配置文件示例
<?xml version="1.0" encoding="gb2312" ?>
<root>
<include>
   <list><![CDATA[qStandBottom_static]]></list>
</include>
    <js>
   <list><![CDATA[/lib/postJs.obj.js]]></list>
   <list><![CDATA[/lib/JSON.obj.js]]></list>
   <list><![CDATA[/qmeditor/qmeditor/qmeditor/editor.js]]></list>
   <list><![CDATA[/control/subjectList/subjectWriteLib.js]]></list>
   <list><![CDATA[/control/subjectList/subjectWriteVote.obj.js]]></list>
   <list><![CDATA[/control/subjectList/naviFilter.obj.js]]></list>
   <list><![CDATA[/control/subject/checkDomain.js]]></list>
   <list><![CDATA[/control/subjectList/subjectWriteBottomGlobal.js]]></list>
   <list><![CDATA[/control/subjectList/subjectWriteBottom_asyncDeclare.js]]></list>
   <list><![CDATA[/control/subjectList/subjectWriterEditor.js]]></list>
   <list><![CDATA[/control/subjectList/subjectWriteBottom.obj.js]]></list>
   <list><![CDATA[/control/subjectList/subjectWritePhoto.js]]></list>
   </js>
</root>
2.         常见分析与调试工具
IE Httpwatch
Firefox firebug
分享到:
评论

相关推荐

    前台JAVASCRIPT日期控件超级好用实例用过的

    【标题】"前台JAVASCRIPT日期控件超级好用实例用过的"指的是在Web前端开发中使用JavaScript实现的一种高效、实用的日期选择器控件。这种控件通常用于网页表单,允许用户方便地选取日期,提高了用户体验。 【描述】...

    WEB前台技术_3_JavaScript.pdf

    - **脚本位置**: 建议将`&lt;script&gt;`标签放置在`&lt;head&gt;`标签内部以优化页面加载速度。 - **事件监听**: 可以为HTML元素添加事件监听器,如`onclick`, `onload`等。 **1.8 JavaScript的引入使用** - **外部脚本文件**...

    javascript前台开发

    11. **前端性能优化**:包括代码分割、懒加载、HTTP/2、预渲染、缓存策略、首屏加载优化等,提升网站的加载速度和运行效率。 12. **安全实践**:了解XSS(Cross-Site Scripting)和CSRF(Cross-Site Request ...

    解决Eclipse保存代码时building workspace因前台代码验证导致的速度慢或卡死问题

    通过以上步骤,可以有效地避免Eclipse在保存代码时对所有前台JavaScript文件进行编译验证,从而大大提升了保存代码时workspace构建的速度,解决了速度慢或卡死的问题。 #### 进一步优化建议 除了上述方法外,还可以...

    杰奇1.7后台优化插件.zip

    7. **SEO优化**:虽然主要是后台插件,但考虑到可能影响到前台的展示,可能也会涉及到一些SEO相关的优化,如自动生成元信息、关键词管理等。 8. **安全增强**:确保插件的安全性,防止SQL注入或其他类型的攻击,...

    Web 前台 UI 压缩工具

    Web前台UI压缩工具是网页开发过程中非常重要的辅助工具,它主要针对JavaScript、CSS和HTML等前端资源进行优化和压缩,以提升网站加载速度和性能。本文将详细介绍 Yahoo 的开源项目——yuicompressor-2.4.1,这是一个...

    MyKTV项目 client前台项目

    总结来说,MyKTV项目client前台的开发涵盖了前端开发的多个方面,包括但不限于框架选择、页面布局、数据交互、错误处理、安全性和性能优化。虽然存在未完善之处,但其完整性和实践性仍然为学习和理解前端开发提供了...

    就是企业网站前台页面

    企业网站的前台页面是用户与网站互动的主要界面,它...开发和维护企业网站前台页面时,需要熟练掌握HTML、CSS和JavaScript等技术,并且不断关注最新的网页设计趋势和最佳实践,以提供最优质、最具吸引力的用户体验。

    健康之家项目前台模板

    5. **图标和图像**:在健康主题中,可能包含了医疗相关的图标和图像,它们可能是SVG格式以保证清晰度,同时优化加载速度。 6. **AJAX**:可能使用了AJAX技术实现页面的异步更新,无需刷新整个页面即可获取和更新...

    web前台开发

    7. **优化和性能**:为了提高加载速度和用户体验,前端开发者还需要关注代码的优化,如压缩CSS和JavaScript文件,优化图片大小,利用缓存策略,减少HTTP请求等。 总之,"web前台开发"涵盖了HTML结构、CSS样式、...

    易买网前台资源

    为了优化加载速度,可能会采用懒加载技术,只在用户滚动到相应位置时才加载图片。 5. 字体文件:易买网可能会使用自定义字体来增强品牌识别度,这些字体文件(通常是.ttf或.woff格式)会被引用在CSS中,确保在整个...

    blog 前台静态页面

    3. **性能优化**:通过压缩CSS和JavaScript文件,减少HTTP请求,使用CDN(内容分发网络)加载外部资源,以及利用浏览器缓存来提高页面加载速度。 4. **易用性**:考虑用户友好性,如清晰的导航结构,良好的键盘和...

    html前台页面,前台设计。

    6. **网页性能优化**:在前台设计中,性能是不可忽视的一环。通过压缩CSS和JavaScript文件,减少HTTP请求,使用CDN(内容分发网络)等方法,可以提升网页加载速度,提供更好的用户体验。 7. **响应式设计**:随着...

    前台开发技术pdf

    减少HTTP请求次数、压缩CSS和JavaScript、优化图片以及利用CDN(内容分发网络)都是提高页面加载速度的有效策略。对于jQuery,要注意避免在DOM ready事件中进行不必要的操作,尽量延迟元素的选择和操作,直到它们...

    bootstrap风格前台框架

    5. **性能优化**:由于Bootstrap包含了大量CSS和JavaScript,为了提升加载速度,可以考虑使用CDN服务,或者按需引入必要的组件,减少不必要的资源加载。 6. **兼容性**:虽然Bootstrap努力保持对主流浏览器的良好...

    Web前台

    15. SEO(搜索引擎优化): 优化前端代码有助于提高网站在搜索引擎中的排名,包括合理使用HTML标签、优化图片、提高加载速度等。 以上就是Web前台开发涉及的主要知识点,涵盖从基础语言到高级框架,从设计原则到实践...

    前台页面前台页面

    7. **性能优化**:前端性能涉及加载速度、资源管理等方面。利用懒加载、代码分割、压缩和最小化文件、使用CDN等技术,可以显著提高页面加载速度。 8. **无障碍性**:确保网站对所有用户,包括有特殊需求的用户,都...

    JS前台分页

    JavaScript(简称JS)前台分页是一种常见的网页交互技术,它允许用户在不刷新整个页面的情况下,动态加载并显示大量数据的分段内容。这种技术在处理大数据集时尤其有用,可以提高用户体验,减少服务器压力。在JSP...

    漂亮的前台UI

    在实际开发中,为了实现这一套"漂亮的前台UI",开发者可能还会使用到其他工具和技术,如Bootstrap或Foundation这样的前端框架,它们提供现成的组件和网格系统,加快开发速度;Webpack或Gulp这样的构建工具,用于自动...

Global site tag (gtag.js) - Google Analytics