前端优化|青训营笔记

53 阅读2分钟

1.加载优化

a.http请求

能不能合并,越少越好

b.图片的雪碧图

c.script标签位置

d.link标签(css引入)

2.图片优化

a.响应式图片

b.图片懒加载

c.webp代替兼容

d.小图标可以改用字体图标

e.图片压缩

3.渲染优化

a.尽量减少reflow和repaint,涉及样式,尺寸,节点增减的操作,都会触发reflow和repaint

b.用变量缓存dom样式,不要频繁读取

通过DocumentFragment或innnerHTML批量操作dom

c.dom隐藏,或复制到内存中,类似virtual dom 进行修改,完成再替换回去

d.动画元素一定要absolute,脱离文档流,不影响其他元素,动画不要用left,top等操作,要使用transform和 opacity,同时开启渲染层(will-change或translate3d(0,0,0))

e.动画尽量用requestAnimationFrame,不要用定时器

f.移动端硬件加速触发GPU渲染,还是translate3d(0,0,0)

4.首屏优化

a.代码分离,将首屏不需要的代码分离出去

b.服务端渲染或者预渲染,加载完html直接渲染,减少白屏时间

c.DNS prefetch,减少查询时间

e.减少关键路径css,可以将关键css关联,减少加载和渲染时间

5.vue优化

a.keep-alive 缓存组件

b.路由懒加载

c.内容使用

v-if/v-show、computed、watch、methods

d.Object.freeze 冻结对象 :纯展示类接口数据,冻结就可以了

e.使用ui组件按需引用

6、SEO 搜索引擎优化

1、网站多页面

2、title描述

3、图片alt,视频,音频属性很重要

4、网站越老越靠谱

5、网站不能出现死链接

网络请求

http和https区别

1.端口不同

http:80

https:443

https比http安全

https校验证书

跨域

1.jsonp vue反向代理(打包后无效,解决:.env文件)

1.后端:CORS

另:Object.assign的用法:

 ES6的官方文档的解释是:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象 

方法一: this.数据名 = this.$options.data().数据名;//重置某一个指定的数据 

方法二: this.d a t a = t h i s . data = this.data=this.options.data(); //初始化data里面的所有数据 

方法三: Object.assign(this.d a t a , t h i s . data, this.data,this.options.data()) //获取data源对象,覆盖当前data对象状态