web性能优化辅助工具
1.Lighthouse页面性能测试工具：github.com/GoogleChrom…
浏览器安装此插件，或者在node直接下载lighthouse
2.测试网站：www.webpagetest.org/
加载优化
- 压缩合并
- 代码分割code spliting，可以基于路由或动态加载
- 第三方模块放在cdn
- 大模块异步加载。例如：echarts可以使用require.ensure，加载成功后，再显示对应图表。
- 小模块适度合并，将一些零散的小模块合并在一起加载，速度较快。
- 可以使用pefetch预加载，在分布场景中非常适合
图片优化
- 小图使用雪碧图，iconFont，base64内联
- 图片使用懒加载
- webp代替其他格式
- 图片一定要压缩
- 可以使用的img的srcset，根据不同分辨率显示不同尺寸图片，既保证显示效果，又能节省带宽，提高加载速度。
CSS优化
- css写在头部
- 避免css的表达式
- 移除空置的css规则
- 避免行内style样式
JS优化
- js写在body底部
- js用defer放在头部，提前加载时间又不阻塞dom解析
- script标签添加crossorigin，方便错误收集
渲染优化
- 尽量减少reflow和repaint：涉及到样式，尺寸，节点增减的操作，都会触发reflow和repaint
- 用变量缓存dom样式，不要频繁读取
- 通过DocumentFragment或innerHTML批量操作dom
- dom隐藏，或复制到内存中，类似virtual dom，进行修改，完成后再替换回去。
- 动画元素一定要absolute，脱离文档流，不影响其他元素。
动画不要用left，top等操作，要使用transform和opacity，同时开启渲染层（will-change或translate3d(0,0,0)）
- 动画尽量用requestAnimationFrame，不要用定时器
- 移动端硬件加速，触发GPU渲染，还是translate3d(0,0,0)
首屏优化（显示快，滚动流畅，懒加载，懒执行，渐进展现）
- 代码分离，将首屏不需要的代码分离出去
- 服务端渲染或预渲染，加载完html直接渲染，减少白屏时间
- DNS prefetch，使用dns-prefetch减少dns查询时间，PC端域名发散，移动端域名收敛
- 减少关键路径css，可以将关键的css内联，这样可以减少加载和渲染时间
打包优化（主要是webpack优化）
- 拆包 extemals dllPlugin
- 提取公共包 commonChunkPlugin或splitChunks
- 缩小范围 各种loader配置include和exclude，noParse跳过文件
- 开启缓存 各种loader开启cache
- 多线程加速 happypack或thead-loader
- tee-shaking ES模块分析，移除死代码
- Scope Hoisting ES6 模块分析，将多个模块合并到一个函数里，减小内存占用，减小体积，提高运行速度
webpack长缓存优化：
- js文件使用chunkhash，不使用hash
- css文件使用contenthash，不使用chunkhash，不受js变化影响
- 提取vendor，公共库不受业务模块变化影响
- 内联webpack runtime到页面，chunkid变化不影响vendor
- 保证module id 稳定，不使用数字作为模块id，改用文件内容的hash值，使用HashedModuleIdsPlugin，模块的新增或删除，会导致其后面的所有模块id重新排序，为避免这个问题
- 保证chunkhash稳定，使用webpack-chunk-hash，替代webpack自己的hash算法，webpack自己的hash算法，对于同一个文件，在不同的开发环境下，会计算出不同的hash值，不能满足跨平台需求
vue优化
- 路由懒加载组件
- keep-alive缓存组件，保证原显示状态
- 列表项添加key，保证唯一
- 列表项绑定事件，使用事件代理v-for
- v-if和v-for不要用在一个标签上，它会在每个项上进行v-if判断
react优化
- 路由组件懒加载，使用react-loadable
- 类组件添加shouldComponent或PureComponent
- 函数组件添加React.memo
- 列表项添加key，保证唯一
- 函数组件使用hook优化，useMemo，useCallback
SEO优化
①网站结构布局优化
- 网站结构层次越少，越容易被抓取，也就容易被收录。
- 控制首页链接数量：可以爬取到内页
- 扁平化的目录层次：尽量在“蜘蛛”跳转三次可以到达任意一个内页
- 导航优化：图片标签加上alt和title
- 网站的结构布局
- 控制页面的大小，减少HTTP请求，提高网站加载速度
②网页代码优化
- <title>标签：强调重点
- <meta keywords>标签：强调重点
- <meta description>标签：高度概括网页内容
- <body>标签：代码语义化
- <a>标签：加上title加以说明
- <caption>标签：表格使用该标签说明标题
- <strong><em>标签：需要强调时使用，突出关键词
- <iframe>框架蜘蛛不会抓取
- diasplay:none会被搜索引擎过滤掉，应当设置z-index或设置到浏览器显示器之外
