面试-性能优化

性能优化
简单来说,常用的优化有两部分:

第一:面向内容的优化

  1. 减少 HTTP 请求
 从设计实现层面简化页面
合理设置HTTP缓存(即能缓存越多越好,能存越久越好)
  1. 减少 DNS 查找
  2. 避免重定向
  3. 使用 Ajax 缓存
  4. 延迟载入组件
  5. 预先载入组件
  6. 减少 DOM 元素数量
  7. CDN加速的原理
        通过缓存技术,将网站文字,图片,视频等内容缓存到分布与各地的节点服务器上,使终端访问用户就近访问,从而提高访问速度。
  1. 最小化 iframe 的数量
  2. 不要出现http 404 错误

第二:面向 Server
1.cookie优化

        减少Cookie大小
        页面内容使用无Cookie域名 
  1. 针对 Web 组件使用域名无关性的

怎样实现原生JS异步加载
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。
有以下三种方法:
(1) defer,只支持IE

defer属性的定义和用法(我摘自w3school网站) 
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。 
有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。 

如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。
因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。 

示例:

代码如下:

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script> 

(2) async:

async的定义和用法(是HTML5的属性) 
async 属性规定一旦脚本可用,则会异步执行。 

示例:

代码如下:

<script type="text/javascript" src="demo_async.js" async="async"></script> 

注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。 
注释:有多种执行外部脚本的方法: 
•如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行) 
•如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行 
•如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本 

(3) 创建script,插入到DOM中,加载完毕后callBack,见代码:
代码如下:

function loadScript(url, callback){ 
  var script = document.createElement_x("script") 
  script.type = "text/javascript"; 
  if (script.readyState){ //IE 
    script.onreadystatechange = function(){ 
      if (script.readyState == "loaded" || script.readyState == "complete"){ 
        script.onreadystatechange = null; 
        callback(); 
      } 
    }; 
  } else { //Others: Firefox, Safari, Chrome, and Opera script.onload = function(){ 
    callback(); 
  }; 
} 
script.src = url; 
document.body.appendChild(script); 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,050评论 25 707
  • Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列...
    拉风的老衲阅读 1,826评论 0 1
  • 六年间,从一个人,到二个人,再到三个人。 六年前,恍若昨天,那个身着绿衣的女子,笑盈盈向我走来。 是你,带来阳光,...
    lucian117阅读 229评论 0 2
  • 在iOS开发过程中,我们经常需要用到等同性来判断两个对象是否相等,通常我们会使用==来判断,但是这样比较出来的结果...
    飞鱼湾阅读 963评论 0 1
  • 所有男人在追求女人不得而之之前所有的好,全是方式方法套路和技巧,那并不是对于女人真正的呵护。 看到一条新闻,又一次...
    爱晚睡阅读 878评论 6 9