您现在的位置是：首页 >其他 >前端优化 随笔网站首页其他

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