优化社交分享需懒加载js、微信签名须服务端生成且url严格一致、twitter/linkedin宜用url scheme、按钮交互要防假点击。
直接嵌入第三方分享按钮会阻塞页面加载
很多网站直接复制微博、微信、QQ 的 JS SDK 到 或底部，结果首屏渲染变慢，LCP 指标恶化。这些脚本默认同步加载，且常带完整 UI 渲染逻辑，哪怕用户根本不点分享按钮，也白白消耗资源。
实操建议：
- 把所有社交分享 JS 放在 底部，用 defer 属性加载
- 更推荐懒加载：监听用户 hover 或 click 事件后再动态插入脚本
- 微信分享必须走后端签名，jsapi_ticket 和 nonceStr 不能前端硬编码，否则签名校验失败
微信分享需要服务端配合生成 signature
微信 JS-SDK 的 wx.ready() 不触发、config:invalid signature 错误，90% 是因为 signature 算错了。前端传给后端的 url 必须和实际访问 URL 完全一致（含 hash？不含！微信不认 hash），且必须是已配置在公众号 JS 接口安全域名里的地址。
关键点：
- 后端需用 access_token 换取 jsapi_ticket，再按规则拼接字符串并 SHA1 加密
- 前端调用 wx.config() 时的 nonceStr、timestamp、url 必须和后端签名时用的一致
- url 要用 location.origin + location.pathname + location.search，坚决不用 location.href
Twitter 和 LinkedIn 分享可纯前端实现
这两个平台提供标准的 URL Scheme 分享方式，无需加载任何 JS，兼容性好、零依赖、无隐私风险。适合快速上线或对性能敏感的静态页。
示例写法：
- Twitter：@#@#@#@#@#@#@#@#@#@0
- LinkedIn：@#@#@#@#@#@#@#@#@#@1
- 注意：URL 必须完整且 encodeURIComponent，中文 text 字段也要编码
- LinkedIn 的 share-offsite 不支持自定义 text，只读页面 <meta property="og:title"> 和 <meta property="og:description">
避免把分享按钮做成“假点击”陷阱
常见错误是按钮绑了 click 但没加 preventDefault()，或者用了 <button onclick="window.open(...)"></button> 却没设 type="button"，导致表单意外提交或页面跳转。更隐蔽的是：微信分享按钮点了没反应，其实是 wx.ready() 还没执行完就调了 wx.shareTimeline()。
安全做法：
- 所有分享操作封装成函数，内部检查 window.wx 是否存在、是否已 ready
- 微信按钮初始状态设为 disabled，ready 后才启用
- Twitter/LinkedIn 链接统一加 rel="noopener noreferrer"
- 不要用 javascript:void(0) 做 href，用真实链接或 # + event.preventDefault()
微信分享的 signature 生成逻辑和服务端交互细节最容易被前端忽略，而它恰恰决定按钮能否真正弹出。其他平台能用 URL Scheme 解决的，就别引 SDK。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
