time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > Web前端优化个人总结

Web前端优化个人总结

时间:2013-05-04 23:35 点击:1946次 字体:[ ]




前言

其实没想过写前端优化这篇文章来的,因为我自知现在水平达不到这个高度!

但是,你知道面试官很烦的,他每次面试非要问你浏览器兼容与前端优化......,所以我又不得不在这两个上面做一定研究。

上面几个问题,没一定功力的前端不可能答得好的。对于优化这块东西,我也很多正在摸索,实在觉得现在拿不出手啊!但是时间不等人。

比如这段时间参加的一个面试,面试官就非要将我做的页面想象得很卡,而且指定就是前端卡,让我优化,还问我平时会不会注意一些优化的东西。

说实话,平时写代码时候,我惊奇的发现一个事实:

  1. 我会不自主的将css写成一排:  
  2. #tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; }  
  3.  我写js时,两个等号一定要空格:  
  4. var con = document.getElementById('content'); //不用编辑器我写出来的代码排版也不会差  
  5.  在写页面时候我会花10分钟纠结我这里是不是多了一个div  
  6. ...... 
按 Ctrl+C 复制代码

通过以上事实,我觉得我已经养成一种规范的“强迫症了”,这里不是要说自己编码多好,而是想说明:

很多优化在平时在意或者不在意之间就已经做了,到后面你就不自主认为他不是优化而是必须了,比如:

  1. for(var i = 0, len = args.length; i < len; i++) {} 

于是让我们开始吧!!!在这里我提出一个优化总纲:零流量,无请求

基本的优化

  1. css放在顶部  
  2. 有时候我们还会将他直接放到页面里面,原因是防止页面裸奔  
  3.  js文件外部引用,放到尾部  
  4. script标签没出现一次便会让页面等待期解释执行(这样是有道理的),js逻辑结束后才能继续渲染页面  
  5.  语义化标签  
  6. 该优化我都差点忽略了,做这个时候还需要注意seo  
  7.  减少请求文件体积:图片合并/外部文件压缩  
  8.  缓存ajax请求  
  9.  注意控制cookie大小和污染  
  10. 因为cookie是本地文件,每次浏览器都会去读取响应的cookie  
  11.  万万不要使用css表达式  
  12. ...... 

现在我们来补充点重要知识:浏览器的重绘与重排



本文地址 : http://www.fengfly.com/plus/view-212684-1.html
标签:
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: