luxuze.github.io

github pages

View on GitHub

前端题库

前端需要注意哪些 SEO

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

<img>的 title 和 alt 有什么区别

  1. 通常当鼠标滑动到元素上的时候显示
  2. alt 是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

从浏览器地址栏输入 url 到显示页面的步骤

  1. 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP，向服务器发起请求；
  2. 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
  3. 浏览器对加载到的资源（HTML、JS、CSS 等）进行语法解析，建立相应的内部数据结构（如 HTML 的 DOM）；
  4. 载入解析到的资源文件，渲染页面，完成。

如何进行网站性能优化

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

HTTP 状态码及其含义

  1. 1XX：信息状态码
    1. 100 Continue 继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息
  2. 2XX：成功状态码
    1. 200 OK 正常返回信息
    2. 201 Created 请求成功并且服务器创建了新的资源
    3. 202 Accepted 服务器已接受请求，但尚未处理
  3. 3XX：重定向
    1. 301 Moved Permanently 请求的网页已永久移动到新位置。
    2. 302 Found 临时性重定向。
    3. 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
    4. 304 Not Modified 自从上次请求后，请求的网页未修改过。
  4. 4XX：客户端错误
    1. 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
    2. 401 Unauthorized 请求未授权。
    3. 403 Forbidden 禁止访问。
    4. 404 Not Found 找不到如何与 URI 相匹配的资源。
  5. 5XX: 服务器错误
    1. 500 Internal Server Error 最常见的服务器端错误。
    2. 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

语义化的理解

  1. 用正确的标签做正确的事情！
  2. html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  3. 在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。
  4. 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
  5. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

对浏览器内核的理解

  1. 主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎
  2. 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
  3. JS 引擎则：解析和执行 javascript 来实现网页的动态效果
  4. 最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎

cookies，sessionStorage 和 localStorage 的区别

  1. cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
  2. cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递
  3. sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存
  4. 存储大小：
    1. cookie 数据大小不能超过 4k
    2. sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大
  5. 有期时间：
    1. localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
    2. sessionStorage 数据在当前浏览器窗口关闭后自动删除
    3. cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

iframe 有那些缺点

  1. iframe 会阻塞主页面的 Onload 事件
  2. 搜索引擎的检索程序无法解读这种页面，不利于 SEO
  3. iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
  4. 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别

  1. 行内元素有：a b span img input select strong
  2. 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
  3. 空元素：<br> <hr> <img> <input> <link> <meta>
  4. 行内元素不可以设置宽高，不独占一行
  5. 块级元素可以设置宽高，独占一行

HTML 全局属性(global attribute)有哪些

  1. class:为元素设置类标识
  2. data-*: 为元素增加自定义属性
  3. draggable: 设置元素是否可拖拽
  4. id: 元素 id，文档内唯一
  5. lang: 元素内容的的语言
  6. style: 行内 css 样式
  7. title: 元素相关的建议信息

Canvas 和 SVG 有什么区别

  1. svg 绘制出来的每一个图形的元素都是独立的 DOM 节点，能够方便的绑定事件或用来修改。canvas 输出的是一整幅画布
  2. svg 输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而 canvas 输出标量画布，就像一张图片一样，放大会失真或者锯齿

如何在页面上实现一个圆形的可点击区域

  1. svg
  2. border-radius
  3. 纯 js 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等