第二十一天web前端面试题

1,手写promise封装axios

2,如何解决回调地狱

首先回调地狱是什么?函数作为参数层层嵌套

什么是回调函数(一个函数作为参数需要依赖另一个函数执行调用)

一、拆解function

function拆分的方式其实仅仅只是拆分代码块,时常会不利于后续维护;

二、事件发布/监听模式

发布者订阅者模式是通过保存事件,然后在需要使用的时候直接发布事件,就可以触发保存的回调

事件发布/监听方式模糊了异步方法之间的流程关系;

三、Promise

Promise虽然使得多个嵌套的异步调用能够通过链式的API进行操作,但是过多的then也增加了代码的冗余,也对阅读代码中各阶段的异步任务产生了一定干扰;

四、Generator

通过generator虽然能提供较好的语法结构,但是毕竟generator与yield的语境用在这里多少还有些不太贴切。

五、async/await

所以就有了async/await语法糖


内容详细

3,请详解移动端点透发生场景、原因及解决方案(最优)

发生场景总结如下:

1,A/B两个层上下z轴重叠(上下重叠,A盖着B)。

2,上层的A点击后消失或移开。(这一点很重要)

3,B元素本身有默认click事件(如a标签) 或 B绑定了click事件。

原因:

点透问题出现的原因就是因为我们上边说过的移动端click事件300ms延迟问题,当点击上层元素时,先触发touchstart事件,然后在300ms后会触发click事件,而此时上层元素已经消失,所以下边的元素会触发click事件,这就是点透

解决方案:

1,fastclick.js

fastclick.js既然可以解决click300ms延迟,那必然可以解决点透问题,使用方法如上文所述。

2,对于B元素本身存在默认click事件的情况,使用touchend代替touchstart事件并阻止掉时A元素touchend的默认行为preventDefault(),因为触发touchend需要200ms,从而阻止click事件的产生。

3,使用一个(透明)遮罩层,屏蔽所有事件,然后400ms(对于IOS来说是个理想值)后自动隐藏

4,延迟一定的时间(300ms+)来处理事件

5,直接使用click事件,不考虑延迟问题

6,下层避开click事件,如a链接改为span等标签,使用js跳转页面

4,详述前端性能优化的手段

我只是总结小点,详细见网址

一、页面级优化

1,减少 HTTP请求数  

主要途径包括:(1). 从设计实现层面简化页面 (2). 合理设置 HTTP缓存 (3). 资源合并与压缩 (4). CSS Sprites (5). Inline Images

2. 将外部脚本置底(将脚本内容在页面信息内容加载后再加载)

3. 异步执行 inline脚本(其实原理和上面是一样,保证脚本在页面内容后面加载。)

4. Lazy Load Javascript(只有在需要加载的时候加载,在一般情况下并不加载信息内容。)

5. 将 CSS放在 HEAD中

6. 避免重复的资源请求

5,浏览器输入网址回车发生了什么

1,当发送一个 URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,

浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览

器获得请求对应的 IP 地址。

2,浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。

第一次握手: 建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;

第二次握手: 服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;

第三次握手: 客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。

该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端

尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。

一旦 TCP/IP 连接建立,浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找

3,到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。

4/此时,Web 服务器提供资源服务,客户端开始下载资源。

6,页面的渲染过程

1,用户输入url地址,浏览器根据域名寻找IP地址

2,浏览器向服务器发送http请求,如果服务器段返回以301之类的重定向,浏览器根据相应头中的location再次发送请求

3,服务器端接受请求,处理请求生成html代码,返回给浏览器,这时的html页面代码可能是经过压缩的

4,浏览器接收服务器响应结果,如果有压缩则首先进行解压处理,紧接着就是页面解析渲染

  解析渲染该过程主要分为以下步骤:

        1,解析HTML

        2,构建DOM树

        3,DOM树与CSS样式进行附着构造呈现树

        4,布局

        5,绘制

7,列举你知道的浏览器内核

IE浏览器 :Trident内核

Firefox(火狐浏览器):Gecko内核

Safari(苹果浏览器): Webkit内核

Chrome/opera:Blink内核:是基于Webkit内核的子项目

8,如何优化SPA首屏加载慢的问题

1、安装动态懒加载所需插件

babel-plugin-syntax-dynamic-import

配置/laravel/.babelrc

{

  "plugins": ["syntax-dynamic-import"]

}

2、去掉.extract()

它包含需要编译的文件类型,现在vue等静态资源从CDN加速

3,配置output输出形式

chunkFilename: 'js/chunk/[name].js?v=[chunkHash]'

4、配置externals

它所包含的文件类型将被排除,避免不必要的静态资源包含进来,导致编译出的文件过大

5、在首页HTML挂载点之前引入静态资源CDN

6、配置vue路由

由require()方式修改为() => import()方式

{ path: '/home/wx/auth', component: () => import ('./views/home/wx/Auth')},

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

推荐阅读更多精彩内容