2.前端性能优化
主要分为两大类：
- 有利于seo
- 有利于扩展维护
- 有利于减少性能消耗
具体实现的方案：
-
尽量减少使用闭包的使用（原因：闭包会开辟不释放的私有占内存）
-
方案A：给元素做循环绑定事件的时候，可以用冒泡事件（事件委托）来做，减少DOM绑定
-
方案B：给元素做循环绑定事件的时候，可以用自定义属性绑定
-
方案C：可以在最外层形成一个闭包，吧一些后续需要的公共信息进行存储（单例模式）
-
方案D：尽可能手动的释放不被占用的内存…
-
-
尽量合并css和js文件
（把需要引入的css和js都尽量各自合并到同一个css/js文件，减少请求次数，并且尽量把文件代码进行压缩，减少http请求资源大小）
-
方案A：webpack这种自动化构建工具，可以帮我们实现代码的压缩和合并（工程化开发）
-
方案B：在移动端开发（或者追求高性能的pc端开发，我们可以把css和js搞成内嵌式，在html里面写）
-
-
尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片
（字体图标是矢量图，不会失真，并且是基于代码写出来的，渲染速度快，相对比位图要小些）
-
减少对DOM的操作（主要减少DOM重绘[css发生改变时]和重排回流[DOM结构发生改变时]）
-
方案A：关于重排的分离读写
-
方案B：使用文档碎片或者字符串拼接做数据绑定（DOM的动态创建）
-
-
在JS中避免嵌套循环（会增加很多循环次数）和死循环（浏览器卡死）
-
采用图片懒加载（延迟加载，目的是减少页面第一次加载过程中http的请求次数）
步骤：开始加载的时候，所有图片都不发送http请求，而是给一张类似正在加载的一张背景图，当页面加载完成时，在屏幕可视区内的图片进行请求加载（让页面第一次打开速度变快）
-
利用浏览器和服务端的缓存技术（304缓存），把一些不经常更新的静态资源文件做缓存处理
例如：JS，CSS，静态图片都可以做缓存
原理：减少http请求大小（先向服务器发请求，服务器说你本地有缓存，让浏览器304本地拿取）
-
尽量减少css表达式的使用（老古董，不会写，就是在css中写js代码，用express写）
-
css选择器解析规则是从右向左解析的，（.container .link a）这会先找到所有的a标签，再在.link下面赛选，所以尽量减少直接的标签选择器的使用
-
CSS精灵图（也叫CSS雪碧图），吧所有相对较小的资源图片汇总到一张大图上，后期只需要决定定位到对应的小图片就行
-
减少对于cookie的使用（追主要的减少本地cookie存储内容的大小），因为客户端操作cookie的时候，这些信息总会在客户端和服务端之间和传来传去
-
页面中的数据获取采用异步编程和延迟分批加载，使用异步获取数据，是降低HTTP通道的堵塞，不会因为数据没有请求而耽误下面的信息加载，提高页面的打开速度（我们可以这样处理：需要动态绑定数据的区域先隐藏，等数据返回并且绑定完成后再显示）（延迟加载类似图片懒加载，是为了减少第一次http请求的次数）
-
页面中出现音屏视屏标签时候，不要让其去请求数据，而是等到我们点击播放再去加载（设置preload=“none”），这样点击视屏才会加载
-
在客户端和服务端进行信息交互时候，对于多项数据，我们尽可能基于json格式的数据进行传输（json数据资源偏小，并且处理方便，相对于XML格式传输才会有这个优势）
-
尽可能实现JS的封装，减少冗余代码，减少http的请求大小
-
减少递归的使用，避免死递归，避免发生嵌套式的栈内存开辟
-
使用window.requestAnimationFrame（JS中的帧动画代替传统的定时器动画）
-
避免使用iframe（不好管理样式，而且意思是相当于在一个页面加载了另外一个页面，消耗比较大）
-
利用H5提供的localStorage本地储存或者是manifest离线缓存，做一些本地存储，下一次页面加载可以直接从本地拿取，减少http的请求次数
-
基于Script调取js的时候，可以使用defer或者async来异步加载
-
重量级优化：CDN加速（非常烧钱的机器）
额外
- 把css放到上面，把js放到下面（先加载css是为了保证元素是带着样式渲染的，而js是操作DOM的，等到元素加载完成再操作）
- 能用css的前外不要用js ，能用原生搞定的，千万不要用插件，禁止使用flash，能用css做动画效果的千万不要用js，css的动画能开启硬件加速功能，渲染更加快
- 不要使用with，非常消耗性能
1742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
