前端优化的小结

个人对前端优化的一些简要总结,参考了一些别人写得资料
    服务器方面:
        提高自己服务器质量,带宽等方面
        开启浏览器缓存,减少http请求
        开启gzip压缩
        使用内容分发网络cdn
    html界面
        css文件放在head,js文件放在html尾部。下载某一个js时其他任务是暂停的,需要等这个JS下载并执行完毕后再下载其他的
        不适用内联css
        尽量减少标签,不多用一个标签,如clear清楚浮动用 :after
        js的延迟加载,异步加载,使用defer标签 、 async="true"
        减少dns查询。每引用一个来自外部的文件,就会有一个dns查询,一般对首次访问网站的速度会有影响
        避免出现404,下载js时遇到404是很大的问题
        避免出现空的src,如  src=""
        减少http请求:图片sprite技术,结合css、js代码
    代码方面
        项目最后使用压缩工具压缩css,js
        css的class不要太长,要有清楚的层级关系
        js操作样式时使用class,html里不使用内联css和js代码
    JS的优化
        字符串的拼接:使用 += 是较低效的,可使用数组的 join() 方法
        使用循环时尤其不要使用 for(in),while比for(;;)效率要高一点
        局部变量的访问速度比全局变量更快,而且要尽量避免全局变量
        对DOM元素的每一次操作代价都比较高,所以尽量少得操作。比如for循环中有对字符串的拼接,然后使用innerHTML操作,就应该把innerHTML放在for循环外面
        对某个dom节点进行操作时,将这个dom节点存在一个局部变量中
        关于字符串遍历,优先使用正则表达式
        变量类型转换
            把数字转换成字符串    (""+)>String()>.toString()>newString()
            字符串转换成数字 parseInt()
            浮点型和整型之间的转换   Math.floor()或者Math.round()
        使用直接量  var a = [] 比var a = new Array()快
        创建dom节点 最好不要直接写字符串,而应该调用creatElement()方法

时间: 2024-10-10 02:39:40

前端优化的小结的相关文章

Web前端优化小结

一.尽可能的减少http请求数,提高访问速度.这些请求包括html文件.CSS文件.JS文件和图片文件等外部资源.1.可以将多个CSS或JS文件合并 a.合并引入.如:<link  type="text/css"   rel="stylesheet"  href="css/a.css,css/b.css"> //淘宝的服务器技术,目前只有tengine可以支持这种模式. DOS命令:copy a.css+b.css ab.css /b

[转][前端优化]使用Combres合并对js、css文件的请求

本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.html 在前端优化的各种金律铁规中,“减少客户端对资源的请求”都会在其中出现,刚好最近对网站做一些优化,使用了一下Combres组件,有点心得,遂整理成文. 园子中也有几篇Combres组件的介绍,如:Combres库学习小结以及部分源码分析和使用Combres 库 ASP.NET 网站优化.可部署时

【转】关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景吧. 短信这块是和通讯运营商有关,很难从根本上解决,

关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景吧. 短信这块是和通讯运营商有关,很难从根本上解决,

关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳的预期效果,今天我在这里分析下浏览器和服务端通讯的一些细节问题,希望通过分析这些细节问题,能给大家一个启迪,能更好的理解这些优化原则背后的隐秘,最终能更好的运用这些原则. 网站的通讯技术是构建在http协议上,http协议底层通讯手段使用的是tcp/ip协议,但是tcp通讯协议在建立连接和断开连接这

【转】yahoo前端优化军规

雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css.script.flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间. 把多个JS.CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位. Use a Content D

【webapp的优化整理】要做移动前端优化的朋友进来看看吧

单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp究竟是好还是不好真是一言难尽哟! webapp使用JavaScript修改页面:紧接着再从服务器传递更多数据然后再修改页面,如此循环. 从性能的角度看,在现代浏览器中单页面Web App已经能够和普通native应用程序相媲美,而且几乎所有的操作系统都支持现代的浏览器. 所以,很多人认为weba

前端优化方案

前端优化: 1.模块化常见的模块化方案有:AMD.CMD.UMD.ES6 2.缓存   电商项目将常用数据缓存起来,比如,移动端首页的数据,商品分类等这些不经常变化的数据,目的是为了 增强 移动端Android.iOS 响应速度.   在controller 收到用户请求后判断 ehcache中有没有缓存这个数据,没有就加载这个资源(数据库或者文件中)然后丢到缓存中, 如果调用了这些数据的添加修改删除方法就删除这个缓存   3.图片懒加载 插件资源https://github.com/zhany

Web前端优化最佳实践及工具集锦

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方.Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能. 这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数.降低请求所占的带宽.减少资