前端开发的优化问题
前端开发的优化问题
聊到前端性能优化，老生常谈，但细节决定成败。下面这十二个关键点，可以说是从“根儿”上解决问题的经典思路，咱们逐一拆解。
（1）减少HTTP请求次数
核心思路就一个：合并。把多个小图标拼成一张图，用CSS Sprite技术来定位；或者将小型图片、字体图标直接转换成Base64编码的Data URI，内嵌在CSS或HTML里。这样一来，页面加载时需要的网络请求次数就大大减少了。
（2）JS，CSS源码压缩
上线前，务必对Ja vaScript和CSS源代码进行压缩。去掉所有注释、空格、换行符，甚至缩短变量名。这一步能显著减小文件体积，是提升传输效率最直接的手段之一。
（3）前端模板 JS+数据
这里有个常见的带宽浪费陷阱：重复的HTML标签结构。采用“前端模板（JS）+ 纯数据”的模式，服务器只传数据，由前端的Ja vaScript根据模板动态生成HTML。更进一步，可以把AJAX请求的结果用变量缓存起来，后续操作直接读写本地变量，避免向服务器发起重复请求。
（4）用innerHTML代替DOM操作
频繁的DOM操作代价高昂。当需要插入或更新一大段HTML内容时，直接操作`innerHTML`属性，通常比逐个创建、追加DOM节点要快得多。这是优化Ja vaScript性能的一个立竿见影的技巧。
（5）用setTimeout来避免页面失去响应
Ja vaScript长时间运行会阻塞页面渲染，导致用户感觉页面“卡死”。对于耗时的计算任务，可以将其拆分成多个小块，利用`setTimeout`或`setInterval`分步执行，把控制权间歇性地交还给浏览器去更新UI，保持页面的响应流畅。
（6）用hash-table来优化查找
当程序中需要频繁进行数据查找时，数组遍历（O(n)复杂度）的效率可能成为瓶颈。此时，使用对象（即哈希表）来存储和查找数据，可以将时间复杂度降至接近O(1)，性能提升非常明显。
（7）当需要设置的样式很多时设置className而不是直接操作style
通过Ja vaScript逐个修改元素的`style`属性，会触发多次重排（Reflow）或重绘（Repaint）。更好的做法是，预先在CSS中定义好不同的样式类（className），在Ja vaScript中只需切换元素的`className`，一次修改就能应用一组样式，渲染效率更高。
（8）少用全局变量
全局变量生命周期长，不易被垃圾回收，且容易造成命名冲突和难以追踪的bug。尽量将变量封装在函数作用域或模块内，这是编写可维护、高性能代码的基本素养。
（9）缓存DOM节点查找的结果
像`document.getElementById`、`document.querySelector`这类DOM查询方法，执行成本并不低。如果一个节点会被多次使用，务必将其查找结果保存在一个变量中，后续直接使用这个变量，避免重复查询DOM树。
（10）避免使用CSS Expression
CSS Expression（仅限旧版IE）是一种将Ja vaScript表达式写在CSS中的黑科技。但它的问题在于，会在页面滚动、缩放甚至鼠标移动时被反复计算，对性能的拖累是灾难性的。在现代开发中，这已是必须摒弃的旧习。
（11）图片预载
对于已知必定会展示的图片（如轮播图下一张、鼠标悬停后显示的图片），可以在页面初始加载或空闲时，提前在Ja vaScript中创建Image对象并设置其src，让图片默默加载到浏览器缓存中。当真正需要显示时，就能瞬间呈现，消除加载等待。
（12）避免在页面的主体布局中使用table
最后一点关于HTML结构。`
