关于前端优化
优化的目的在于让页面加载的更快,对用户操作响应更及时,为用户带来更好的用户体验,对于开发者来说优化能够减少页面请求数,能够节省资源。
前端优化的方法可以分为两大类:第一类是页面级别的优化如http请求数、内联脚本的位置优化等,第二类是代码级别的优化,如JavaScript中的DOM操作优化、CSS选择符优化、图片优化及HTML结构优化等
页面级别优化
- http请求数
- 从设计实现层面简化页面,保持页面简洁,减少资源的使用
- 资源合并与压缩,尽可能的将外部的脚本、样式进行合并,多个合为一个
- 雪碧图的使用
- 使用base64表示简单的图片
- 缓存
- DNS缓存
- CDN部署与缓存
- http缓存
- 移动端优化
- 使用长cache,减少重定向
- 首屏优化,保证首屏加载数据小于14kb
- 不滥用web字体
- 长列表滚动优化,IOS尽量使用局部滚动,android尽量使用全局滚动。同时,需要给body添加上-webkit-overflow-scrolling: touch来优化移动段的滚动
- 函数防抖和节流
- 使用touch代替click
- viewport设置
- 开启GPU渲染加速
代码级别优化
- 优化网页渲染
- css文件放首部,js文件放尾部
- 尽量避免内联样式
- DOM操作优化
- 要避免在document上直接进行频繁的DOM操作
- 可以使用classname代替大量的内联样式修改
- 适当使用canvas
- 尽量减少css表达式的使用
- 操作细节
- 避免图片或者frame使用空src
- 在css属性为0时,去掉单位
- 对于css中可继承的属性,如font-size,尽量使用继承,少一点设置
- 缩短css选择器,多使用伪元素等帮助定位
数据
- 图片加载处理
- 图片预加载
- 提前加载内容,往往会被用在图片资源比较大的时候
- 图片懒加载
- 在最初给图片的src设置一个比较简单的图片,然后将图片的真实地址设置给自定义的属性,做一个占位,然后给图片设置监听事件,一旦图片到达视口范围,从图片的自定义属性中获取出真是地址,然后赋值给src,让其进行加载。
- 首屏加载时进度条的显示
- 图片预加载
- 异步请求的优化
- 使用正常的json数据格式进行交互
- 部分常用数据缓存
- 数据埋点和统计
附:
- 合并、压缩、混淆html/css/js文件(webpack实现,减小资源大小)
- Nginx开启Gzip,进一步压缩资源(减小资源大小)
- 图片资源使用CDN加速(提高加载速度)
- 符合条件的图标做base64处理(减小资源大小)
- 样式表放首部,JS放尾部(JS单线程,会阻塞页面;资源加载方式)
- 设置缓存(强缓存和协商缓存,提高加载速度)
- link或者src添加rel属性,设置prefetch或preload可预加载资源。(加载时机)
- 如果使用了UI组件库,采用按需加载(减小资源大小)
- SPA项目,通过import或者require做路由按需(减小资源大小)
- 服务端渲染SSR,加快首屏渲染,利于SEO
- 页面使用骨架屏,提高首页加载速度(提高加载速度)
- 使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png,当页面图片较多时,这点作用非常明显
- 使用图片懒加载-lazyload
相关推荐
liduote 2020-10-16
PncLogon 2020-08-16
89253818 2020-07-19
Phoebe的学习天地 2020-07-28
ChinaGuanq 2020-05-09
hjucook 2020-03-09
FruitHardCandy 2014-01-15
zhangruiweb 2019-11-18
林大夏 2019-11-07
LONGSHAN 2019-11-04
林大夏 2019-10-19
FruitHardCandy 2015-03-04
haimianxiaojie 2019-09-05
chwzmx 2019-09-05
叨校长灬 2018-12-24
无名大强在前端 2018-11-05
前端学习笔记 2015-04-17
guoyuexuan 2015-08-13
lanzhusiyu 2019-07-01