基础篇｜前端优化

前端优化这个话题个人认为非常大，小到img标签要填写的alt，大到整个项目的打包都可以提问，日常工作中也会遇到各种各样需要优化的点，面试当中也会被问各种各样的问题，整理遇到的问题以及被问到的题，作为记录，欢迎大家补充。

前端需要注意哪些SEO？

• 合理的title、description、keywords：搜索引擎对着这几项的权重逐个减小
  • title值强调重点即可，重要的关键词出现不要超过2次，而且要靠前，不同页面的title要有所不同；
  • description把页面内容高度概括，长度合适，不可过分堆砌鹅关键词，不同页面description有所不同；
  • keywords列举出重要关键词即可；
• 语义化的HTML代码；符合W3C规范：语义化代码让搜索引擎容易理解网页；
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取；
• 重要内容不要用JS输出：爬虫不会执行js获取内容；
• 少用iframe：搜索引擎不会抓取iframe内容；
• 非装饰性图片必须加alt；
• 提高网站速度：网站速度也是搜索引擎排序的一个重要指标。

如何进行网站性能优化？

• content方面
  • 减少HTTP请求：合并文件、CSS精灵、inline Image;
  • 减少DNS查询：DSN缓存、将资源分布到恰当数量的主机名；
  • 减少DOM元素数量
• Server方面
  • 使用CDN
  • 配置ETag
  • 对组件使用gzip压缩
• Cookie
  • 减小cookie大小
• css方面
  • 将样式表放在页面顶部
  • 不使用CSS表达式
  • 使用link不使用@import
• JavaScript方面
  • 将脚本放在页面底部
  • 将javascript和css从外部引入
  • 压缩javascript和css
  • 减少DOM访问
  • 删除不需要的脚本
• 图片方面
  • 优化图片：根据实际颜色需要选择色深
  • 优化css精灵
  • 不要在HTML中拉伸图片

你有用过哪些前端性能优化的方法？

• 尽可能的避免使用iframe，实在无法避免时采用js动态添加src；
• 减少http请求次数：
  • css Sprites
  • JS、CSS源码进行压缩
  • 图片大小控制合适
  • 网页gzip
  • CDN托管
  • data缓存
  • 图片服务器
• 前端模版JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求以做到减少请求次数；
• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能；
• 样式设置使用className而不是行内样式style;
• 少用全局变量、缓存DOM节点查找的结果，减少IO读取操作；
• 避免使用css表达式或动态属性；
• 图片预加载和按需加载；
• 将样式表放在顶部，将脚本放在底部，加上时间戳；
• 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢；
• 用css3实现动画代替js动画；
• 禁止使用gif图片实现loading效果；

谈谈性能优化问题

• 代码层面：
  • 避免使用css表达式
  • 避免使用高级选择器、通配选择器；
• 缓存利用：
  • 缓存ajax，
  • 使用CDN
  • 使用外部js和css文件以便缓存
  • 添加Expires头
  • 服务端配置ETag
  • 减少DNS查找
• 请求数量：
  • 合并样式和脚本
  • 使用css图片精灵
  • 初始首屏之外的图片资源按需加载
  • 静态资源延迟加载
• 请求带宽：
  • 压缩文件，开启gzip

前端性能优化最佳实践有哪些？

• 性能评级工具：PageSpeed或YSlow
• 合理设置HTTP缓存：Expires和Cache-control
• 静态资源打包：开启gzip压缩，节省响应流量
• 图标使用base64：降低请求数
• 模块延迟（defer）加载或异步(async)加载
• cookie隔离：节省请求流量
• 本地存储：使用localStorage
• 访问最近服务器：使用CDN加速
• 启用HTTP/2：多路复用，并行加载
• 前端自动化：gulp、webpack

未完待续。。。