我所理解的前端性能优化

前端优化的目的是提升访问速度、改善用户体验。前端页面主要包括html、css、js，而作为web前端工程师，可以控制的正好是这三部分以及相应的背景图片，所以，我们可以从三个方面来优化前端性能。

       1、html部分
       
       a、要避免代码的深层级嵌套。因为层级越深的节点在初始化时更占内存。

       b、尽量不要使用h5摒弃的iframe标签，因为在页面加载的时候iframe标签会阻塞父文档onload事件的触发，这恰恰影响了初始化UI

       c、诸如img、link、script等元素的src或href属性的值不为空，因为就算我们写为src=""浏览器仍会发送http请求

       d、为页面中的图片设置宽高，这样做的好处是在页面加载完前就完成了布局，如若未指定宽高，在图片加载后还要调整其大小，影响时间。

       e、在html文档开始就指定文档字符集，这样做的目的是在有助于浏览器加载时就能立即解析html代码

       2、css部分：

       a、将样式表置顶，这样做的好处是文档加载完毕之前样式就已经加载完，不用等页面加载完毕后再重新加载样式

       b、避免使用css表达式

       c、使用外部css并且精简css，移除无用的css样式

       d、避免使用filter滤镜：这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。

       e、用link来代替@important

       3、js部分

       a、将脚本置底，避免script标签加载的时候页面等待加载

       b、使用外部脚本以及精简后的去除重复的脚本

       c、尽量减少dom访问，在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

       d、使用json格式来进行数据交换，因为JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。