HTML5可以优化的细节
介绍一些最近整理的优化细节。图片压缩什么的就不说了,这是优化必须做的。今天就说一下大家写代码时可以培养的优化的细节点。
-
不滥用float。不滥用web字体。
Float在渲染时计算量比较大,并且会脱标、塌陷。我们可以用flex布局来代替。web字体引入需要不小的消耗,最好跟设计提一下不要太多。
-
css中避免多余的样式设置。
color、font、line-height等都是可以继承的,所以他们的子元素如果属性一样就要重复写了,特别是font-family。
-
复杂的一个方法,可以缓存函数的返回值。
function cached (fn) {
var cache = Object.create(null);
return (function cachedFn (str) {
var hit = cache[str];
return hit || (cache[str] = fn(str))
})
};
var fk = function (str) {
return str.charAt(0).toUpperCase() str.slice(1)
}
var cacheFk = cached(fk)
// 1 step
cacheFk('ui')
//2 step
cacheFk('ui')
这是我看vue源码时发现的一段代码,作用就是可以缓存一个复杂函数的值,如果参数一样就不重复计算。但这里要注意的是,这个缓存函数是通过闭包来做的,所以要做一些权衡。
-
尽量减少layout。
// 触发两次 layout
var newWidth = p.offsetWidth 50;
p.style.width = newWidth 'px';
var newHeight = p.offsetHeight 50;
p.style.height = newHeight 'px';
// 只触发一次 layout
var newWidth = p.offsetWidth 50;
var newHeight = p.offsetHeight 50;
p.style.width = newWidth 'px';
p.style.height = newHeight 'px';
所有可触发layout的操作都会被暂时放入 layout-queue 中,等到必须更新的时候,再计算整个队列中所有操作影响的结果,如此就可只进行一次的layout,从而提升性能。
动画元素最好脱标,不影响其他模块。这样也是为了不影响其他元素。
-
transform代替position。
做一些css位移效果,最好用transform而不要用定位。我刚入门的时候用position做动画卡的一匹~~~
-
选择dom元素使用id,但不要为设置css而定义id。
如果用id选择器,就不要加其他class约束。定义过多id会使重用性降低,维护更困难,所以css中不建议多用id。
-
多次使用length的时候,要用变量保存。
var len = dom.length;
for(var i = 0;i < len;i ){};
这样好处就是每次循环,不用都计算dom的长度了。
-
requestAnimationFrame代替setTimeout
var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.left = Math.min(progress / 10, 200) 'px';
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
//window.requestAnimationFrame(callback);
返回值是一个 long 整数,请求 ID ,是回调列表中唯一的标识。是个非零值,没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。
requestAnimationFrame就是不用设置时间的定时器,每1/60s运行一次,这是根据浏览器刷新帧数来定的。但兼容是个问题,用的话需要写好兼容。
-
如果可以,尽量避免全局查找。
//dom = document.querySelector("#id");
function test() {
dom = document.querySelector("#id");
}
比如上面的,如果只做test内使用dom 就不要在全局定义,因为执行的时候会现在test函数内部作用域查找,速度会快。
-
除非不知道遍历的长度或者遍历对象 不要用for in
function t1(){ //20ms
var i = 0;
for(item in anObj) {
i
}
if( i === 100000){
console.log('for in ok')
}
}
function t2(){ //4ms
var len = anObj.length;
var i = 0;
for(var i = 0 ;i < len;i ){
i
}
if( i === 100000){
console.log('for ok')
}
}
这是我自己试验循环100000个元素的数组,得出的执行时间(看代码)。所以最好别用,一般实际也不会用到遍历对象。如果真有特殊情况遍历对象,也要注意 !!!遍历出来的东西是不是自己。以为for in是会遍历其原型链的。
-
骨架屏
这个是增强用户体验,类似增强版loading。有自动化生成方案。感兴趣可以看看。
-
ios禁止页面识别手机号。Android禁止识别邮箱。
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
-
头部css 底部js。
这个大家都知道,js将阻塞解析dom,增加白屏时间。所以一定要注意啊。
其实优化的细节很多,所以要好好培养自己的编码习惯,积少成多,慢慢的不断积累,代码的质量肯定就不同了。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfhhca
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01