浅谈前端优化
来源:互联网 发布:数据库王珊第五版答案 编辑:程序博客网 时间:2024/06/05 18:13
前端可以优化的点非常多,在这里做一个小结,知道了新的方法随时补充。本文主要从三个方面谈谈前端优化:
网络优化,页面优化,其他优化。
一.网络优化:
1.减少请求数
- 小图片合并雪碧图(background-position实现)。
- css,js文件合并
- 减少重定向
2.减小请求资源大小
- 发布前进行文件,图片压缩
- 开启gzip压缩
3.缩短请求资源距离
- 使用CDN,将静态资源分布到离用户最近的cache服务器内
4.缓存
- HTTP缓存:强缓存,协商缓存
- 离线存储:appCache
- LocalStorage
5.使用HTTP2
- 多路复用
- HEAD压缩
- 请求优先级
- 服务器推送
二.页面优化
1.css代码优化
- css选择符优化,提高选择符解析效率。(选择符解析时从右到左)
- 使用外链css,放在页面头部。
2.JS代码优化
- 减少作用域链查找。将作用域链深处的变量缓存到局部作用域。
- 减少DOM的访问。缓存DOM
- 改善循化性能。减少每次迭代的运算量和循环次数。
- 使用事件代理。
- 减少重排和重绘。批量更新元素减少重排次数,如设置类class统一更新样式。
- 元素将触发页面多次重排的情况下:文档片段,隐藏元素,copy到脱离文档流的元素。
- 使用外链js,放在页面尾部。
4.图片优化
- 使用css、svg、canvas或iconfont代替图片。
- 加载优化。(预加载,懒加载)
5.资源加载优化
1.延迟加载。
非首屏必须资源可延迟加载。懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
- 使用setTimeOut或setInterval进行加载延迟
- 图片滚动加载lazyload(图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的尺寸很小的图片,只有图片在可视区域才去请求加载。)
- 条件加载。满足某条件或触发某事件开始加载。(onload事件,DOM ready后加载)
2.预加载
预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。
- link标签prefetch
onload+ajax
http://www.alloyteam.com/2015/10/prefetching-preloading-prebrowsing/
三.其他方面的优化
1.安全性
- XSS攻击
- CSRF攻击
- 使用https协议
2.兼容性
跨浏览器的处理 。
3.SEO
语义化标签
0 0
- 浅谈前端优化
- 浅谈前端性能优化
- 浅谈前端性能优化
- 浅谈web前端的简单优化
- 前端优化带来的思考,浅谈前端工程化
- 前端优化带来的思考,浅谈前端工程化
- 浅谈前端性能优化(七)——图像优化
- 浅谈前端性能优化(八)——cookie优化
- 实战录 | 浅谈前端项目构建与优化
- 从前端角度浅谈如何做好网站的SEO优化
- 浅谈前端
- 浅谈前端性能优化(九)——DNS解析优化
- 前端优化
- 前端优化
- 前端优化
- 前端优化
- 前端优化
- 前端优化
- Mac开发环境搭建笔记
- 包学会之浅入浅出Vue.js:结业篇
- 会场安排问题
- 初始界面UI
- 题目1029:魔咒词典(map)
- 浅谈前端优化
- sql连接查询与hibernate连接查询
- 多进程
- github更新fork之后的项目代码
- 因子和与因子个数的应用(一)
- 按键精灵实现交易开拓者TB自动化优化参数
- 《错误》(郑愁予)
- poj2828 Buy tickets 线段树+贪心
- 剑指offer--从尾到头打印链表