记录一些前端面试题（带答案）

Posted on 2017-02-06 19:49  Mr豆花  阅读(555)  评论(0)  编辑  收藏  举报

  • img的title和alt有什么区别
    title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
    alt是img的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片 高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

  • doctype是什么,举例常见doctype及特点

  • 我们通常称doctype为doctype声明，doctype是document type(文档类型)的简写，用来说明我们的HTML或者XHTML是什么版本，它告诉浏览器应该用兼容模式还是使用标准模式来渲染文档。

  • 在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容

  • 常见dotype：

    • HTML4.01 strict
    • HTML 5: <!doctype html>

  • HTML全局属性

  • class

  • id

  • style

  • title

  • contextmenu

  • draggable

  • tabIndex

  • hidden

  • 什么Web是语义化？有什么好处
    Web语义化包含两部分：HTML标签的语义化与CSS命名语义化

  • HTML标签语义化指使用具有一定语义的标签来恰当的表示文档结构

  • CSS命名语义化表示为HTML标签添加有意义的class与id

使用Web语义化的好处

  • 样式去掉后页面结构清晰
  • 利于盲人阅读
  • 利于搜索引擎理解页面，有利于收录
  • 利于后期维护

HTTP

http是什么

是超文本传输协议，是互联网上应用最为广泛的一种网络协议。

http作用

浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。

　

HTTP method

get post delete put head OPTIONS TRACE

  • get：GET是最常用的方法，通常用于请求服务器发送某个资源。
  • post：向指定的资源提交要被处理的数据。实际上，通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。
  • delete：DELETE请求服务器删除请求URL指定的资源

　

get与post的区别

get

  • GET 请求可被缓存
  • GET 请求保留在浏览器历史记录中
  • GET 请求可被收藏为书签
  • GET 请求不应在处理敏感数据时使用
  • GET 请求有长度限制
  • GET 请求只应当用于取回数据

post

  • POST 请求不会被缓存
  • POST 请求不会保留在浏览器历史记录中
  • POST 不能被收藏为书签
  • POST 请求对数据长度没有要求

性能优化

页面级优化

  • 减少hHTTP请求
  • 将页面设计简单
  • 合理利用HTTP缓存
  • 静态资源进行合并与压缩
  • CSS Sprites
  • Lasy Load
  • 将外部脚本置于底部
  • 按需加载javascript
  • 将CSS放在HEAD中
    防止浏览器还没有下载CSS就开始渲染页面了，导致页面出现五CSS到有CSS的跳转。
  • 避免重复资源的请求

代码级优化

  • 编写高质量代码，注意代码质量
  • 减少DOM操作
    • HTML Collection（html搜集器）
      document.images,document.froms,document.getElementsByTagName()返回的都是html collection集合，是一个类数组，也是动态查询。每次访问该集合都会重新查询。
      解决方案：转为数组
  • 慎用with语句
    with会延长作用于链
  • 避免使用eval和Function，脚本引擎每次都需要将里面的源代码转为可执行代码，非常耗时，比简单的函数调用慢100倍。
  • 减少作用域链查找
    • 把全局变量改为局部变量
  • 字符串拼接
    +比数据的join方法效率低
  • CSS选择符
    CSS选择符是从右向左开始解析的。

Web综合

  • 什么是W3C标准
    W3C而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：

前端需要注意哪些SEO

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

grunt glup webpack区别

Gulp/Grunt是一个构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案

  • seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。
  • browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。

common AMD CDM ES6

　commonjs是用在服务器端的，同步的，NodeJS是这种规范的实现
根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。
Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式

　

AMD是异步加载模块，是用在浏览器端的，异步的，requirejs采用的是AMD
AMD规范适用define方法定义模块。

//通过数组引入依赖 ，回调函数通过形参传入依赖 
define(['someModule1', ‘someModule2’], function (someModule1, someModule2) { 
    function foo () { 
        // someing 
        someModule1.test(); 
    } 
    return {foo: foo} 
}); 
// AMD规范允许输出模块兼容CommonJS规范，这时define方法如下： 
define(function (require, exports, module) { 
    var reqModule = require("./someModule"); 
    requModule.test();  
    exports.asplode = function () { 
        //someing 
    } 
});

　

CMD是通用模块定义，是用在浏览器端的，异步的，seajs采用的CMD

CMD和AMD的区别:CMD相当于按需加载，定义一个模块的时候不需要立即制定依赖模块，在需要的时候require就可以了，比较方便；而AMD则相反，定义模块的时候需要制定依赖模块，并以形参的方式引入factory中。

requireJS与seaJS

联系

RequireJS 和 Sea.js 都是模块加载器，倡导模块化开发理念，核心价值是让 JavaScript 的模块化开发变得简单自然。

区别

  • 定位有差异。RequireJS 想成为浏览器端的模块加载器，同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端，同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。
  • 遵循的规范不同。RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
  • 推广理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS，目前只有少数社区采纳。Sea.js 不强推，采用自主封装的方式来“海纳百川”，目前已有较成熟的封装策略。
  • 对开发调试的支持有差异。Sea.js 非常关注代码的开发调试，有 nocache、debug 等用于调试的插件。RequireJS 无这方面的明显支持。
  • 插件机制不同。RequireJS 采取的是在源码中预留接口的形式，插件类型比较单一。Sea.js 采取的是通用事件机制，插件类型更丰富。

MV*

MVC

MVC的意思是软件可以分为三部分

  • 视图（View）：用户界面。
  • 控制器（Controller）：业务逻辑
  • 模型（Model）：数据保存
    Paste_Image.png

View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

互动模式有两种

  • 一种是通过 View 接受指令，传递给 Controller。
    Paste_Image.png
  • 另一种是直接通过controller接受指令。
    Paste_Image.png

　

MVP

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
Paste_Image.png

  • 各部分之间的通信，都是双向的。
  • View 与 Model 不发生联系，都通过 Presenter 传递。
  • View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

　

MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
Paste_Image.png
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel

git svn

  • Git是分布式的，SVN是集中式的
    SVN 是集中式的，会出现耦合。但从另外一个方面来说，这也要求开发人员代码的规范：不要一个函数干很多事情，不要一个文件写很多个类。
  • git仍然能够提交文件，查看历史版本记录，创建项目分支

集中式与分布式区别

集中式：是将项目集中存放在中央服务器中，在工作的时候，大家只在自己电脑上操作，从同一个地方下载最新版本，然后开始工作，做完的工作再提交给中央服务器保存。这种方式需要联网，现在云开发就是这样的处理方式。
分布式开发：只要提供一台电脑作为版本集中存的服务器放就够了，但这个服务器的作用仅仅是用来方便“交换”大家的修改，没有它也一样干活，只是交换修改不方便而已。而每一台电脑有各自独立的开发环境，不需要联网，本地直接运行，相对集中式安全系数高很多。

Copyright © 2024 Mr豆花
Powered by .NET 9.0 on Kubernetes