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文件)文章来源：https://www.toymoban.com/news/detail-435240.html
1.后端：CORS文章来源地址https://www.toymoban.com/news/detail-435240.html
到了这里，关于前端优化 随笔的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
