前端面试总结(三)

1.SEO
搜索引擎最佳化(Search Engine Optimization),又称为搜索引擎优化,为近年来较为流行的网络营销方式,主要的目的是增加特定关键字的曝光率以增加网站的能见度,进而增加销售的机会。而网站的SEO化所指的是针对搜索引擎去使网站内容较容易被搜索引擎取得并接受,搜索引擎在收到该网站的资料后进行比对及运算而后将PR值(Page Rank)较高的网站放在网络上其他使用者在搜索时会优先看到的位置,进而促使搜索者可以得到正确且有帮助的资讯。

2.一个页面从输入URL到页面加载显示完成,这个过程都发生什么?

1、首先,在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存
   中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步
   操作。
3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。
5、握手成功后,浏览器向服务器发送http请求,请求数据包。
6、服务器处理收到的请求,将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容,浏览器渲染,解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询

3.前端模块化的那些事儿
1)、什么是模块?

定义:具有相同属性和行为的事物的集合
在前端中:将一些属性比较类似和行为比较类似的内容放在同一
个js文件里面,把这个js文件称为模块
目的:为了每个js文件只关注与自身有关的事情,让每个js文件各行其职

2)、什么是模块化?CommonJS是什么?AMD和CMD又是什么?

①模块化:指的就是遵守commonjs规范,解决不同js模块之间相互调用问题

②CommonJS:

1>. A.js文件中调用另一个B.js文件,一定要在A.js中引入B.js

require("B.js");
2>. 另一个被调用的js,也就是B.js一定要对外提供接口。

module.exports=B;
过程如下:

B.js

javascript
var b = "Hello,I'm module B.";
module.exports = b;
//暴露一个接口,与b对接。这个接口既可以是函数,也可以是对象,甚至是数组。
A.js

javascript
var _b = require("./B.js");
//实际过程中应当是B.js相对于A.js的路径,这比使用绝对路径去获取要规范得多
//此时_b获得了B.js的接口,这个接口指向B.js中的变量b
console.log( _b );//"Hello,I'm module B.";

这就实现了一个简单的模块化工作方式,即:
  模块间相互调用,协同工作,实现某特定功能。

③AMD规范:Async Module Define 异步模块声明

④CMD规范:Common Module Define 公共模块声明

⑤模块化的核心价值:模块化最核心的价值在于解决不同文件之间的分工和调用问题,即依赖关系。

4.为什么使用MVC?
1)低耦合:
MVC将业务分为三层,减少了数据与业务的耦合性,增强了各层次功能的独立性,使得在需求改变时可能只需要改变其中一层就能完成服务;

2)复用性高:
三层业务功能分明,耦合度低,使各模块可以独立完成自身功能,降低了依赖性,具有很高的复用性。

3)利于批量生产和扩展:
复用性高使得在批量生产的时候可以根据需求进行模块的重用,加快了生产效率。并且模块化使得扩展也非常方便,模块只需根据规范进行编写,经审核后引入便可以实现扩展。

4)利于协作开发:
扩展性强使协作开发也变得非常方便,每个人根据自己的分工设计自己的模块,不与他人冲突,引入时也各行其职。

5)推广普及度高:
由于对协作开发的友好,使得MVC模式大受开发者的欢迎,使用这个模式的产品的推广和普及变得容易得多。

5.什么是同源策略?为什么要这样做?
1).什么是同源策略

为什么需要同源策略,这里举个例子:
  假设现在没有同源策略,会发生什么事情呢?大家知道,JavaScript可以做很多东西,比如:读取/修改网页中某个值。恩,你现在打开了浏览器,在一 个tab窗口中打开了银行网站,在另外一个tab窗口中打开了一个恶意网站,而那个恶意网站挂了一个的专门修改银行信息的JavaScript,当你访问 这个恶意网站并且执行它JavaScript时,你的银行页面就会被这个JavaScript修改,后果会非常严重!而同源策略就为了防止这种事情发生.  
   比如说,浏览器的两个tab页中分别打开了http://www.baidu.com/index.html和http: //www.google.com/index.html,其中,JavaScript1和JavaScript3是属于百度的脚本,而 JavaScript2是属于谷歌的脚本,当浏览器的tab1要运行一个脚本时,便会进行同源检查,只有和www.baidu.com同源的脚本才能被执 行,所谓同源,就是指域名、协议、端口相同。所以,tab1只能执行JavaScript1和JavaScript3脚本,而JavaScript2不能 执行,从而防止其他网页对本网页的非法篡改。

2)如果没有同源策略不同源的数据和资源(如HTTP头、Cookie、DOM、localStorage等)就能相互随意访问,根本没有隐私和安全可言。为了安全起见和资源的有效管理,浏览器当然要采用这种策略。

6.我们如何从本地存储中添加和移除数据?

添加到本地存储的数据使用“键”和“值”。下面的示例代码显示了国家数据“India”添加的键值为“Key001”。
localStorage.setItem(“Key001”,”India”);
要检索本地存储的数据,我们需要使用“getItem”来提供键名。
var country = localStorage.getItem(“Key001”);
你还可以使用下面的代码存储JavaScript对象到本地存储。

var country = {};
country.name = “India”;
country.code = “I001”;
localStorage.setItem(“I001”, country);
var country1 = localStorage.getItem(“I001”);

如果你想用JSON格式存储,那么可以使用“JSON.stringify”函数,如下面所示的代码。
localStorage.setItem(“I001”,JSON.stringify(country));

7.bom对象有哪些?

.BOM的常用对象:
window navigator history location dicument screen event

    navigator:保存浏览器配置信息的对象

           cookicEnablcd:判断是否启用cookic

           userAgent:判断浏览器的名称和版本号

           plugins:保存浏览器中所有插件信息的集合

    screen:保存显示屏幕的对象信息

    history:保存当前的历史记录栈

         history.go(-1):后退

         history.go(1):前进一次

         history.go(0):刷新

         <a href="javascript:history.go(1);">前进一次</a>

     location:指代当前窗口正在访问额url地址对象

     location.href:保存了当前窗口正在访问的url地址

              设置href属性为新url,会在当前窗口打开新的url
               location.href="http://www.baidu.com"

     location.assign(url):在当前窗口打开新的url
               location.assign("http://www.baidu.com");         

     location.reload(true/false);true:无论是否更改,都获得最新的

                       false:被更新的页面,会从新获取

                           未被修改的页面在缓存中取
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,235评论 0 25
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 113,805评论 24 450
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,302评论 1 5
  • 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/...
    风起云帆阅读 325评论 0 0
  • HTML5面试题总结1.基础问题 = 和 == 和 === 的区别?= : 用于赋值 == : 用于判断 === ...
    LorenaLu阅读 1,103评论 0 4