面经系列-优化

SEO 优化

• 合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减⼩， title值强调重点即可，重要关键词出现不要超过 2 次，⽽且要靠前，不同⻚⾯ title 要有所不同； description 把⻚⾯内容⾼度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同； keywords 列举出重要关键词即可
• 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解⽹⻚
• 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取
• 重要内容不要⽤ js 输出：爬⾍不会执⾏ js 获取内容
• 少⽤ iframe ：搜索引擎不会抓取 iframe 中的内容
• ⾮装饰性图⽚必须加 alt
• 提⾼⽹站速度：⽹站速度是搜索引擎排序的⼀个重要指标

server 优化

• 减少HTTP请求，合并文件、雪碧图
• 减少DNS查询，使用缓存
• 减少Dom元素的数量
• 使用CDN
• 配置ETag,http 缓存的手段
• 对组件使用Gzip压缩
• 减少cookie的大小

css 优化

• 将样式表放在页面顶部
• 使用less scss表达式
• 使用link 不适用@import引入样式
• 压缩css
• 禁⽌使⽤ gif 图⽚实现 loading 效果（降低 CPU 消耗，提升渲染性能）
• 使⽤ CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）
• 对于⼀些⼩图标，可以使⽤base64位编码，以减少⽹络请求。
• ⻚⾯头部的 <style> <script> 会阻塞⻚⾯；（因为 Renderer 进程中 JS 线程和渲染线程是互斥的）
• 当需要设置的样式很多时设置 className ⽽不是直接操作 style

js 方面

• 将脚本放到页面底部
• 将js 外部引入
• 压缩js
• 使用Eslint语法检测
• 减少Dom的操作
• 熟练使用设计模式
• 禁⽌使⽤ iframe （阻塞⽗⽂档 onload 事件）
• ⻚⾯中空的 href 和 src 会阻塞⻚⾯其他资源的加载
• ⽹⻚ gzip ， CDN 托管， data 缓存 ，图⽚服务器

webpack 优化点

• 代码压缩插件 UglifyJsPlugin
• 服务器启⽤gzip压缩
• 按需加载资源⽂件 require.ensure
• 优化 devtool 中的 source-map
• 剥离 css ⽂件，单独打包
• 去除不必要插件，通常就是开发环境与⽣产环境⽤同⼀套配置⽂件导致
• 开发环境不做⽆意义的⼯作如提取 css 计算⽂件 hash 等
• 配置 devtool
• 优化构建时的搜索路径 指明需要构建⽬录及不需要构建⽬录

其他优化点

为什么利⽤多个域名来存储⽹站资源会更有效？

• CDN 缓存更⽅便
• 突破浏览器并发限制
• 节约 cookie 带宽
• 节约主域名的连接数，优化⻚⾯响应速度
• 防⽌不必要的安全问题

Other 篇

从⽤户刷新⽹⻚开始，⼀次 js 请求⼀般情况下有哪些地⽅会有缓存处理？

• dns 缓存
• cdn缓存
• 浏览器缓存
• 服务器缓存

常⻅ web 安全及防护原理

• sql 注⼊原理：就是通过把 SQL 命令插⼊到 Web 表单递交或输⼊域名或⻚⾯请求的查询字符串，最终达到欺骗服务器执⾏恶意的SQL命令
  • 永远不要信任⽤户的输⼊，要对⽤户的输⼊进⾏校验，可以通过正则表达式，或限制⻓度，对单引号和双 "-" 进⾏转换等
  • 永远不要使⽤动态拼装 SQL，可以使⽤参数化的 SQL 或者直接使⽤存储过程进⾏数据查询存取
  • 永远不要使⽤管理员权限的数据库连接，为每个应⽤使⽤单独的权限有限的数据库连接
  • 不要把机密信息明⽂存放，请加密或者 hash 掉密码和敏感的信息
• XSS防范⽅法：Xss(cross-site scripting) 攻击指的是攻击者往 Web ⻚⾯⾥插⼊恶意 html 标签或者 javascript 代码。⽐如：攻击者在论坛中放⼀个看似安全的链接，骗取⽤户点击后，窃取 cookie 中的⽤户私密信息；或者攻击者在论坛中加⼀个恶意表单，当⽤户提交表单的时候，却把信息传送到攻击者的服务器中，⽽不是⽤户原本以为的信任站点
  • ⾸先代码⾥对⽤户输⼊的地⽅和变量都需要仔细检查⻓度和对 ”<”,”>”,”;”,”’” 等字符做过滤；其次任何内容写到⻚⾯之前都必须加以encode，避免不⼩⼼把 html tag 弄出来。这⼀个层⾯做好，⾄少可以堵住超过⼀半的XSS 攻击
• XSS与CSRF有什么区别：XSS 是获取信息，不需要提前知道其他⽤户⻚⾯的代码和数据包。 CSRF 是代替⽤户完成指定的动作，需要知道其他⽤户⻚⾯的代码和数据包。要完成⼀次 CSRF 攻击，受害者必须依次完成两个步骤，1.登录受信任⽹站 A ，并在本地⽣成 Cookie 。2.在不登出 A 的情况下，访问危险⽹站 B
  • 服务端的 CSRF ⽅式⽅法很多样，但总的思想都是⼀致的，就是在客户端⻚⾯增加伪随机数
  • 通过验证码的⽅法