网页的性能优化
- 网页在加载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控制
