前端面试题（二）

• css盒子模型

盒子模型是由内容、边框、填充（padding）、间隔（margin）组成

• 简述一下你对HTML语义化的理解？

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

• CSS优化、提高性能的方法有哪些？

  关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
  如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
  提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
  使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

• css中的外链是，内链式，嵌入式，有什么区别？

  内联式：直接写在body中所要修饰的标签内；例如：<span style="color:red;font-size:10px;"
  嵌入式：写在head中的类选择标签中；例如：.menu{text-align:center;}
  外联式：有个单独的html文件，在里面编写好css样式，用现有的文件去调用；

• 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ 

  localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  sessionStorage  数据在当前浏览器窗口关闭后自动删除。
  cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

• CSS哪些属性可以继承？

  font-size font-family color

• CSS优先级算法如何计算

  内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
  !important >  id > class > tag
  important 比 内联优先级高

• px、em、rem区别

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸
rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。

• ::before 和 :after中双冒号和单冒号 有什么区别? 

 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
 双冒号是在当前规范中引入的，用于区分伪类和伪元素。

• http状态码 

          100  Continue    继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

          200  OK         正常返回信息
          201  Created      请求成功并且服务器创建了新的资源
          202  Accepted     服务器已接受请求，但尚未处理

          301  Moved Permanently  请求的网页已永久移动到新位置。
          302 Found          临时性重定向。
          303 See Other      临时性重定向，且总是使用 GET 请求新的 URI。
          304  Not Modified 自从上次请求后，请求的网页未修改过。

          400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
          401 Unauthorized 请求未授权。
          403 Forbidden      禁止访问。
          404 Not Found      找不到如何与 URL 相匹配的资源。

          500 Internal Server Error  最常见的服务器端错误。
          503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

• 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

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

• 前端性能优化的方法有哪些？

    （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

    （2） 减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

    （3） 减少DOM操作次数，用innerHTML代替DOM操作，优化javascript性能。 

    （4） 当需要设置的样式很多时设置className而不是直接操作style。 

    （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
   
    （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
  
    （7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。 

    （8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

 对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。