这么多前端优化点你都记得住吗？

2．应用较小的图片，合理应用 base64 内嵌图片

在页面应用的背景图片不多且较小的情况下，可以将图片转化成 base64 编码嵌入到 HTML 页面或 CSS 文件中，如许可以削减页面的 HTTP 请求数。须要留意的是，要包管图片较小，一般图片大年夜小跨越 2KB 就不推荐应用 base64 嵌入显示了。

.class-name{
background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');
}

3．应用更高紧缩比格局的图片

运器具有较高紧缩比格局的图片，如 webp（须要设计降级兼容筹划）等。在一致图片画质的情况下，高紧缩比格局的图片体积更小，可以或许更快完成文件传输，节俭收集流量。

<img src=http://news.51cto.com/art/201711/"//cdn.domain.com/path/photo.webp" alt="webp格局图片" >

4．图片懒加载

为了包管页面内容的最小化，加快页面的衬着，尽可能节俭移动端收集流量，页面中的图片资本推荐应用懒加载实现，在页面滚动时动态载入图片。

PC 端优化的策略很多，如 YSlow（YSlow 是 Yahoo 宣布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面机能进行分析，提出对该页面机能优化的建议）原则，或者 Chrome 自带的 Audits 等，总结起来重要包含收集加载类、页面衬着类、CSS 优化类、JavaScript 履行类、缓存类、图片类、架构协定类等几类，下面一一介绍。
<img data-src=http://news.51cto.com/art/201711/"//cdn.domain.com/path/photo.jpg" alt="懒加载图片" >

console.log(this);

5．应用 MediaQuery 或 srcset 根据不合屏幕加载不合大年夜小图片

在介绍响应式的┞仿节中我们懂得到，针对不合的移动端屏幕尺寸和分辨率，输出不合大年夜小的图片或背景图能包管在用户体验不降低的前提下节俭收集流量，加快部分机型的图片加载速度，这在移动端异常值得推荐。

6．应用 iconfont 代替图片搁笔

在页面中尽可能应用 iconfont 来代替图片搁笔，如许做的好处有以下几个：

可以便利地修改图片大年夜小尺寸和出现色彩。

然则须要留意的是，iconfont 引用不合 webfont 格局时的兼容性写法，根据经验推荐尽量按照以下次序书写，不然不轻易兼容到所有的浏览器上。

@font-face{
font-family:iconfont;
src:url("./iconfont.eot");
src:url("./iconfont.eot?#iefix") format("eot"),
url("./iconfont.woff") format("woff"),
}

7．定义图片大年夜小限制

加载的单张图片一般建议不跨越 30KB，避免大年夜图片加载时光长而壅塞页面其他资本的下载，是以推荐在 10KB 以内。如不雅用户上传的图片过大年夜，建议设置告警体系，赞助我们不雅察懂得全部网站的图片流量情况，做出进一步的改良。

脚本类

1．尽量应用 id

选择器选择页面 DOM 元素时尽量应用 id 选择器，因为 id 选择器速度最快。

2．合理缓存 DOM 对象

对于须要反复应用的 DOM 对象，要优先设置缓存变量，避免每次应用时都要大年夜全部 DOM 树中从新查找。

$('#mod.active').remove('active');
$('#mod.not-active').addClass('active');
//推荐
let $mod=$('#mod');
</html>

$mod.find('.active').remove('active');

$mod.find('.not-active').addClass('active');

3．页面元素尽量应用事宜代劳，避免直接事宜绑定

应用事宜代劳可以避免对每个元素都进行绑定，并且可以避免出现内存泄漏及须要动态添加元素的事宜绑定问题，所以尽量不要直接应用事宜绑定。

//不推荐
$('.btn').on('click',function(e){
console.log(this);
});
//推荐
$('body').on('click','.btn',function(e){
console.log(this);
});

因为移动端屏幕的设计， touchstart 事宜和 click 事宜触发时光之存放在 300 毫秒的延时，所以在页面中没有实现 touchmove 滚动处理的情况下，可以应用 touchstart 事沂攀来代替元素的 click 事宜，加快页面点击的响应速度，进步用户体验。但同时我们也要留意页面重叠元素 touch 动作的点击穿透问题。

//不推荐
$('body').on('click','.btn',function(e){
console.log(this);
});
//推荐
$('body').on('touchstart','.btn',function(e){
});

5．避免 touchmove、scroll 持续事宜处理

须要对 touchmove、scroll 这类可能持续触发还调的事宜设置事宜撙节，例如设置每隔 16ms（60 帧的帧距离为 16.7ms，是以可以合理地设置为 16ms ）才进行一次事宜处理，避免频繁的事宜调用导致移动端页面卡顿。

//不推荐
$('.scroller').on('touchmove','.btn',function(e){
console.log(this);
3．应用 NativeView 代替 DOM 的机能劣势
});
//推荐
$('.scroller').on('touchmove','.btn',function(e){
let self=this;
setTimeout(function(){
console.log(self);
},16);
});

6．避免应用 eval、with，应用 join 代替连接符＋，推荐应用 ECMAScript6 的字符串模板

这些都是一些基本的安然脚本编写问题，尽可能应用较高效力的特点来完成这些操作，避免不规范或不安然的写法。

4/5 首页上一页 2 3 4 5 下一页尾页

　　推荐阅读

　　从大概率看，你的隐私数据是时代进步的牺牲品！

Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践若何更好地保护小我隐私，是网平易近十分关怀的问题。在大年夜数据时代，人们在网上的一切行动，都在向计>>>详细阅读

本文标题：这么多前端优化点你都记得住吗？

地址：http://www.17bianji.com/lsqh/38705.html

1/2 1