前端优化前端优化

网页的性能优化

网页在加载js时,可以把js放在最后加载,或者用h5的async/defer加载.

在加载图片时,对小图片可以用base64位的图片加载,把多个图片放在一张图片里面,通过位置的不同显示不同的图片,这样可以减少请求图片的请求,称为雪碧图,对图片进行压缩处理,

减少加载的js和css个数进行合并减少iframe的使用

写高性能DOM:回流和重绘.回流:DOM结构中每个元素都有自己的盒子模型,浏览器要根据它的样式来计算它在浏览器中出现的位置,称为回流。重绘:当各种盒子的位置,颜色,字体大小都确定后,浏览器就根据它的特性对元素进行绘制.称为重绘。DOM元素的添加,删除,替换都会触发回流+重绘.仅修改DOM元素的字体，只触发重绘(不需要调整布局).回流一定触发重绘,重绘不一定触发回流。如何避免触发回流和重绘,display的值会影响布局,从而影响布局元素位子发生改变,1:减少DOM的操作,2:添加多个DOM节点时,先拼接好,再一次性添加上去.3:对于要多次使用的DOM,可以先用变量保存起来,不要每次都去查找耗资源

减少闭包的使用,内存要得到及时的释放

用div+css代替table布局

代码优化

减少HTTP请求, http优化,使用语义化标签,减少iframe,避免重定向

css优化布局代码写在前面,删除空样式,不滥用浮动,字体,更具需求加选择器优化避免使用表达式避免使用id选择避免使用 important

js 优化压缩减少重复代码少使用闭包

图片的优化图片合并使用css sprite技术

减少DOM操作缓存已经访问过的元素离线跟新节点在添加到树中,避免用js输出布局 css控制