- 在js中尽量减少闭包的使用（原因：闭包会产生不释放的栈内存）
A：循环给元素做事件绑定的时候，尽可能的把后期需要的信息（例如索引）存储到元素的自定义属性上，而不是创建闭包存储
B：可以在最外层形成一个闭包，把一些后续需要的公共信息进行存储，而不是每一个方法都创建闭包（例如单例模式）
C：尽可能的手动释放不被占用的内存（赋值为null） - 尽量合并css和js文件，原理是在减少http请求次数，尽可能把合并后的代码进行压缩，减少http请求资源大小
A：webpack这种自动化构建工具，可以帮我们实现代码的合并和压缩（工程化开发）
B：在移动端开发（或者要求高性能的PC端开发），如果css或者js不是需要很多，我们可以选择把css和js编成内嵌式 - 尽量使用字体图标或者SVG图标,用来代替传统的PNG等格式的图片（因为字体图标等是矢量图（基于代码编写出来的），放大不会变形，而且渲染速度快，相对比位图小一点）
- 减少对DOM的操作（主要是减少DOM的重绘和回流（重排））
A：关于重排的分离读写
B：使用文档碎片或者字符串拼接做数据绑定（DOM的动态创建） - 在js中避免“嵌套循环”（这会额外增加很多循环次数）和“死循环”
- 采用图片懒加载（延迟加载），目的是为了减少页面的第一次加载过程中http的请求次数，让页面打开速度变快
步骤：开始加载页面的时候，所有的真实图片都不会发送http请求加载，而是给一张占位的背景图，当页面加载完，并且图片在可视区域内，我们再去做图片的加载 - 利用浏览器和服务器端的缓存技术（304缓存），把一些不经常更新的静态资源文件做缓存处理（例如：js,css,静态图片等都可以做缓存），原理也是减少http请求次数和请求大小
- 尽可能使用事件委托（事件代理）来处理事件绑定的操作。
- 尽量减少css表达式的使用(expression)
input {
star : expression(
onmouseover=function(){this.style.backgroundColor="#D5E9F6"},
onmouseout=function(){this.style.backgroundColor="#ffffff"})
}
- css选择器的解析规则是从右向左解析
.container .link a{
// 先找到所有的a, 再筛选是在.link样式类中的，再次筛选是在.container样式中...，先找到的是所有的a，操作起来是耗性能的，我们在使用css选择器的时候尽可能的减少对标签选择器的使用
}
- css雪碧图技术（css sprite / css图片精灵），把所有相对较小资源图片汇总到一张大图上，后期只需要把大图加载下来，用背景定位的方式展示对应的小图即可
.bg{
background: url('***.png');
}
.box1{
background-position: ** **;
}
.box2{
background-position: ** **;
}
<div class="bg box1"></div>
- 减少对cookie的使用（最主要是减少本地cookie存储内容的大小），因为客户端操作cookie的时候，这些信息总会在客户端和服务器端传来传去
- 页面中的数据获取采用异步编程和延迟分批加载，使用异步获取数据，是为了降低http通道的堵塞，不会因为数据没有请求回来耽搁下面信息的渲染，提高页面的打开速度
- 页面中出现音视频标签，我们不让页面加载的时候就去加载这些资源（要不然页面加载速度会变慢）（方案：只需要设置preload='none'即可），等待页面加载完成，音视频播放的时候我们再去加载音视频资源
- 在客户端和服务器端进行信息交互的时候，对于多项数据我们尽可能基于JSON格式来进行传送（JSON格式的数据处理方便，资源偏小）==> 相对于XML格式的传输才会有这个优势
- 尽可能实现js的封装（低耦合，高内聚），减少页面的冗余代码（减少http请求资源的大小）
- css中设置定位后，最好使用z-index改变盒子的层级，让所有的盒子不在相同的平面上，这样后续处理的时候，性能有那么一丢丢的提高
- 在css导入的时候尽量减少使用@import导入式，因为@import是同步操作，只有把这个对应的css导入，才会向下加载，而link是异步操作
- 减少递归的使用，避免死递归，避免优于递归导致的栈内存嵌套（建议使用尾递归）
- 避免使用iframe
- 利用h5提供的localStorage本地存储或者是manifest离线缓存，做一些信息的本地存储，下次加载页面的时候直接从本地获取，减少http请求次数
- 基于script调取js的时候，可以使用defer或者async来异步加载
重量级优化：做CDN加速（烧钱机器，成百上千万的烧）
==额外技巧（对性能影响不大）==
- 我们一般都把css放在body上面，js放在body下面（原因：让其先加载css再加载js，保证元素是带着样式渲染的）
- 能用css搞定的绝对不用js，能用原生搞定的绝对不用插件，绝对不适用FLASH（除了音视频的低版本浏览器播放）
=> css处理动画等功能的性能优于js，而且css中的transform变形还开启了硬件加速 - 页面中不要出现无效的链接（利于SEO优化），还有其他技巧： 提高关键字曝光率、img需要加alt、设置meta标签、标签语义化...
网友评论