近来要完成前端机能探测，然则关于一个刚入职场的我来讲前端机能是个啥，我照样个只寻求页面展现结果的娃儿~。为了能够顶下这个雷，特地买了高机能网站竖立指南。这本书真的不错，强烈推荐看到本文的朋侪看一下。
划定规矩一 削减http要求数
缘由：为何要削减http要求数目呢？ http竖立衔接是须要时候本钱的，http协定划定浏览器关于一致域名的资本要求数有限定。因而须要采用一些手腕下降要求数目。
计划：
运用图片精灵兼并小图片为一张大图片
兼并js资本和css资本
内联小图片(data:url)
划定规矩二 运用内容宣布收集
缘由： 用户间隔我们的效劳器能够十万八千里，为了进步资本的相应速率能够将其放在间隔用户较近的代办效劳器上，瑕玷吗，能够会花点钱去购置cdn效劳。
划定规矩三 增加Expires头—-运用缓存
将静态资本缓存在用户当地，当用户二次接见时直接从当地猎取资本，大大的下降了收集要求的本钱。
计划：
运用Expires头，能够会存在用户的代办和效劳器的时候规范差别形成缓存失效的机遇不正确。
运用Cache-control: max-age=xxxxxxx
两者实质雷同，cache-control的优先级大于前者，能够运用修正文件名的体式格局简朴粗犷的处理缓存能够存在的题目。
划定规矩四 紧缩组件
运用紧缩削减资本的大小，进而削减收集相应的时候。现在gzip紧缩运用的较为普遍。紧缩剧本和样式表文件比较值得，不要紧缩图片和pdf文件，它们自身已被紧缩。
划定规矩五 将样式表放在顶部
该计划能够使的网页逐渐显现，用户体验会很好，觉得网站相应的比较快。不会涌现闪灼。
划定规矩六 将剧本放在底部
缘由： 剧本的下载和剖析会壅塞其他资本的并行下载。现在浏览器为script标签供应了两个新的属性defer async两者都完成资本的异步下载不会壅塞其他资本的下载。区分在于defer会等页面衬着完成后在实行，async没法保证它实行的时候，下载完就实行。对照起来defer更具有现实运用价值。
划定规矩七 防止运用css表达式
缘由： 表达式在你不知道得状况下实行n屡次，严重影响前端机能。
划定规矩八 运用外部的js和css文件
关于初次接见而言，内联情势的衬着速率会高于外链的情势。然则外部文件的情势能够缓存啊。用户再次接见该页面时就不必再次要求资本。
划定规矩九 削减DNS查询
计划: 应用http的keep-alive的衔接复用，掌握域名的数目。掌握域名数目同时存在资本并行下载数限定的题目，因而呢，须要现实状况做好衡量。
划定规矩十 精简JS代码
删除解释、空格、将长变量名置换为短的变量名。也就是紧缩和殽杂了。css代码也须要去除空格和解释。
划定规矩十一 防止重定向
浏览器做重定向这个操纵是须要时候的。因而呢，要只管防止重定向。前端同砚须要注重的就是不要疏忽末端的斜线
借此机会就简朴聊聊经常使用的3xx状况码
301 永远重定向。301重定向会致使用户的书签更新。
302 暂时重定向。
303 See Other 不管重定向之前的要求体式格局是什么，本次要求都以get的情势要求
304 Not Modified 发作的场景：浏览器运用缓存，然则缓存逾期了此时浏览器要求效劳器资本，效劳器的资本并没有更新过，浏览器继承运用当地资本。相应的相应体是没有内容的。该要求成为前提要求。
307 重定向前要求是什么体式格局，本次要求还以该体式格局要求资本
和 307是302的一个规范化变种。302原则上讲是不允许我们将本来的post要求换为get要求体式格局的，然则人人都这么做。因而才会涌现厥后的303和307.
划定规矩十二 删除反复的剧本（烧毁吧）
跟着项目范围的扩展及介入职员的增加，能够会涌现反复引入资本的状况。这也是会下降前端机能的。然则在这个前端工程化的年代，打包东西会帮我们处理好该题目。
划定规矩十三 设置ETag
Etag是web效劳器和浏览器用于确认缓存组件是不是有用的一种机制。效劳器设置一下即可。
划定规矩十四 运用AJAX缓存
能够经由过程http的相应和要求头掌握ajax是不是须要缓存。缓存这个东西呢用好了就是天使，用不好就是魔鬼。哈哈。
高机能网站竖立指南
