学习笔记

外观

SEO

约 1807 字大约 6 分钟

2021-03-07

前端需要注意哪些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查询：DNS缓存、将资源分布到恰当数量的主机名
  • 减少DOM元素数量

Server方面

  • 使用CDN
  • 配置ETag
  • 对组件使用Gzip压缩

Cookie方面

  • 减小cookie大小

css方面

  • 将样式表放到页面顶部
  • 不使用CSS表达式
  • 使用不使用@import

Javascript方面

  • 将脚本放到页面底部
  • 将javascript和css从外部引入
  • 压缩javascript和css
  • 删除不需要的脚本
  • 减少DOM访问

图片方面

  • 优化图片：根据实际颜色需要选择色深、压缩
  • 优化css精灵
  • 不要在HTML中拉伸图片

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验?

  • 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
  • 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
  • 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
  • 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
  • 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

如何提高首频加载速度?

  1. js外联文件放到body底部，css外联文件放到head内
  2. http静态资源尽量用多个子域名
  3. 服务器端提供html和http静态资源时最好开启gzip
  4. 在js,css,img等资源响应的http headers里设置expires,last-modified
  5. 尽量减少http requests的数量
  6. js/css/html/img资源压缩
  7. 使用css spirtes，可以减少img请求次数
  8. 大图使用lazyload懒加载
  9. 避免404，减少外联js
  10. 减少cookie大小可以提高获得响应的时间
  11. 减少dom elements的数量
  12. 使用异步脚本，动态创建脚本

实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

ajax无刷新页面切换，历史记录后退前进解决方案

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

  • 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
  • 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
  • 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
  • 当需要设置的样式很多时设置className而不是直接操作style。
  • 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
  • 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
  • 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
  • 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。 对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能

开启硬件加速

//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。
.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

减低页面加载时间的方法有哪些？

  • 压缩CSS、JS文件；
  • 合并CSS、JS文件，减少http请求；
  • 外部JS、CSS放在最底层；
  • 减少DOM操作，尽可能使用变量代替不必要的DOM操作；
  • 优化图片文件，减小其尺寸，特别是缩略图；
  • 使用多域名负载网页内的多个文件、图片；
  • 服务器开启gzip压缩；

制作一个访问量很大的网站，如何管理所有的css文件，js和图片？

从人手，分工和同步方面回答：

  • 前期团队必须确认好全局样式，编码模式；
  • 代码风格，编写习惯保持一致；
  • 标注样式编写人，各模块都要及时标注（标注关键样式调用的地方）；
  • 对自己负责的页面进行标注；
  • CSS和JS分文件夹存并行存放，命名都要统一；
  • JS分文件夹存放，明明以该JS功能为准的英文翻译；
  • 图片采用整合的.png格式存放，尽量整合在一起，方便将来管理；

简述什么是内容与表现分离？

首先对于html，css以及javascript，可以这样理解：
把网站理解成一个人，html就是构成人体的‘骨架’，css就是人体的‘装饰’，比如衣服，饰品等；而javascript就相当于人做出的‘动作’，这样就通俗易懂了。
对于内容和表现分离，个人理解是：尽量不要在html中插入行内样式，尽量将css抽成一个独立的模块，实现html‘骨架’和样式的分离，利于搜索引擎的同时，也便于后期维护。

如果网页内容需要支持多语言，需要考虑些什么？

  • 应用字符集的选择，选择utf-8编码；
  • 语言书写习惯以及导航结构；
  • 数据库驱动型网站；