});
(12)应用 GET 来完成 AJAX 请求
应用 XMLHttpRequest 时，浏览器中的 POST 办法会提议两次 TCP 数据包传输，起首发送文件头，然后发送 HTTP 正文数据。而应用 GET 时只发送头部，所以在拉取办事端数据时应用 GET 请求效力更高。
1．首屏数据请求提前，避免 JavaScript 文件加载后才请求数据
$.ajax({
url : url,
type : 'get', //推荐应用get完成请求
data : {},
(17)避免应用 CSS import 引用加载 CSS
success (){//...},
error(){//...}
});
(13)削减 Cookie 的大年夜小并进行 Cookie 隔离
(14)缩小 favicon.ico 并缓存
(15)推荐应用异步 JavaScript 资本
异步的 JavaScript 资本不会壅塞文档解析，所以许可在浏览器中优先衬着页面，延后加载脚本履行。例如 JavaScript 的引用可以如下设置，也可以应用模块化加载机制来实现。
<script src=http://news.51cto.com/art/201711/"main.js" defer>
<script src=http://news.51cto.com/art/201711/"main.js" async>
应用 async 时，加载和衬着后续文档袈洫素的过程和 main.js 的加载与履行是并行的。应用 defer 时，加载后续文档袈洫素的过程和 main.js 的加载是并行的，然则 main.js 的履行要在页面所有元素解析完成之后才开端履行。
(16)清除壅塞衬着的 CSS 及 JavaScript
对于页面中加载时光过长的 CSS 或 JavaScript 文件，须要进行合理拆分或延后加载，包管关键路径的资本能快速加载完成。
CSS 中的 ＠import 可以大年夜另一个样式文件中惹人样式，但应当避免这种用法，因为如许会增长 CSS 资本加载的关键路径长度，带有 ＠import 的 CSS 样式须要在 CSS 文件串行解析到 @import 时才会加载别的的 CSS 文件，大年夜大年夜延后 CSS 衬着完成的时光。
<!--不推荐-->
<style>
@import "path/main.css";
</style>
<!--推荐-->
<link rel="stylesheet" href=http://news.51cto.com/art/201711/"//cdn1.domain.com/path/main.css" >
1．把 CSS 资本引用放到 HTML 文件顶部
一般推荐将所有 CSS 资本尽早指定在 HTML 文档 <head>
中，如许浏览器可以优先下载 CSS 并尽早完成页面衬着。
2．JavaScript 资本引用放到 HTML 文件底部
JavaScript 资本放到 HTML 文档底部可以防止 JavaScript 的加载和解析履行对页面衬着造成壅塞。因为 JavaScript 资本默认是解析壅塞的，除非被标记为异步或者经由过程其他的异步方法加载，不然会壅塞 HTML DOM 解析和 CSS 衬着的过程。
3．尽量预先设定图片等大年夜小
在加载大年夜量的图片元素时，尽量预先限制图片的尺寸大年夜小，不然在图片加载过程中会更新图片的排版信息，产生大年夜量的重排
4．不要在 HTML 中直接缩放图片
在 HTML 中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿，是以要尽量削减在页面中直接进行图片缩放。
HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时光就越长，所以应尽可能保持 DOM 元素简洁和层级较少。
<!--不推荐-->
<div>
对于返回内容雷同的请求，没需液每次都直接大年夜办事妒攀拉取，合理应用 AJAX 缓存能加快 AJAX 响应速度并减轻办事器压力。
<span>
<a href="javascript:void(0);">
<img src=http://news.51cto.com/art/201711/"./path/photo.jpg" alt="图片">
</a>
</span>
9．CSS 动画应用 translate、scale 代替 top、height
</div>
<!--推荐-->
<img src=http://news.51cto.com/art/201711/"./path/photo.jpg" alt="图片" >
CSS 解析匹配到 衬着树的过程是大年夜右到左的逆向匹配，在选择器末尾添加通配符至少会增长一倍多计算量。
7．削减应用关系型样式表的写法
直接应用独一的类名即可最大年夜限度的晋升衬着引擎绘制衬着树等效力
8．尽量削减应用 JS 动画
5．削减 DOM 元素数量和深度
JS 直接操作 DOM 极轻易引起页面的重排
尽量应用 CSS3 的 translate、scale 属性代替 top、left 和 height、width，避免大年夜量的重排计算
<meta http-equiv="Cache-Control" content="max-age=7200">
10．尽量避免应用 <table>、 <iframe>
<table> 内容的衬着是将 table 的 DOM 衬着树全部生成拆档一次性绘制到页面上的，所以在长表格衬着时很耗机能，应当尽量避免应用它，可以推敲应用列表元素 <ul> 代替。尽量应用异步的方法动态添加 iframe，因为 iframe 内资本的下载过程会壅塞父页面静态资本的下载与 CSS 及 HTML DOM 的解析。
11．避免运行耗时的 JavaScript
长时光运行的 JavaScript 会壅塞浏览器构建 DOM 树、DOM 衬着树、衬着页面。所以，任何与页面初次衬着无关的逻辑功能都应钙揭捉?迟加载履行，这和 JavaScript 资本的异步加载思路是一致的。
//不推荐
PWA（Progressive Web Apps）是 Google 提出的用前沿的 Web 技巧为网页供给 App 般应用体验的一系列筹划。
.opacity{
filter : progid : DXImageTransform.Microsoft.Alpha( opacity = 50 );
}
移动端浏览器前端优化策略
收集加载类
为了进一步晋升页面加载速度，可以推敲将页面的数据请求尽可能提前，避免在 JavaScript 加载完成后才去请求数据。平日数据请求是页面内容衬着中关键路径最长的部分，并且不克不及并行，所以如不雅能将数据请求提前，可以极大年夜程度上缩短页面内容的衬着完成时光。
推荐阅读
Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践 若何更好地保护小我隐私，是网平易近十分关怀的问题。在大年夜数据时代，人们在网上的一切行动，都在向计>>>详细阅读
本文标题：这么多前端优化点你都记得住吗？
地址：http://www.17bianji.com/lsqh/38705.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示