当前位置:千赢国际官网 > 千赢网页手机版登入 > 前端面试中的常见的算法问题,Chrome开发者工具

前端面试中的常见的算法问题,Chrome开发者工具

文章作者:千赢网页手机版登入 上传时间:2019-09-16

必看的 JavaScript 视频

2015/10/30 · 基础技术 · 视频

去年 Sergey Bolshchikov 发起了一个倡议,视频列表已挺丰富了。

小提示:

  • 视频均在 Youtube。如有搬运到国内的热心童鞋,请在评论中留言;
  • Clip Converter:Youtube 视频下载工具

前端面试中的常见的算法问题

2016/10/27 · JavaScript · 7 评论 · 算法

原文出处: Jack Pu   

虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题,这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。

Chrome开发者工具不完全指南(一、基础功能篇)

2015/06/23 · HTML5 · 2 评论 · Chrome

原文出处: 卖烧烤夫斯基   

就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生。根据最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。简单、快捷使它成为了新时代人们的新宠。如果你是一名web开发人员,我推荐你使用Chrome。作为前端开发的”IDE”,你只需要搭配一个编辑器就能完成几乎所有的开发任务了。关于它的使用和功能分析要么都是大而不全,要么是巨细糜烦。本系会比较详细地分享卤煮的一些Chrome(F12开发者功能)使用经验,从一些基础的功能开始到它的一些高级性能分析器(Timeline、Profiles),在最后,将会推荐几款好的插件,希望对您的开发工作有些许的作用。如果你对一些面板模块功能已经很了解可以直接跳过去阅读你感兴趣的部分。

一、Elements
图片 1
在Element中主要分两块大的部分
A:HTML结构面板
B:操作dom样式、结构、时间的显示面板
1.在A中,每当你的鼠标移动到任何一个元素上,对应的html视图中会给该元素蓝色的背景。
图片 2
2.如果你单击选中一个元素,在A部分的底部,会显示该元素在html结构中的位置关系
图片 3
3.然后你可以在B部分的styles选项中编辑该元素的样式,并且看到html结构的实时更新(大大的福利)
图片 4
4.你可以在B界面中切换到Event Listeners选项,观察该元素绑定的事件。
图片 5

click 是事件名称

.div1 事件是索引名称(也就是通过什么绑定的)

attachment 事件来源

handler里面包含事件的毁掉主体内容

useCapture表示该事件是否向上冒泡
5.选中一个元素,右击鼠标,你会看到有一个弹出窗口出现,里面有若干选项
图片 6
Add attribut : 为该元素添加属性
Edit attribute:修改该元素的属性
Force element state: 为元素激活某种状态(主要用在可以几乎的元素比如a、input、button等)
Edit as HTML:编辑该元素(你可以重写它的整个content)甚至修改它的标签名称
中间简单的掠过…….
Break on:为该元素添加dom操作事件监听。包含三个选项(树结构改变、属性改变、节点移除)。这个选项的作用是帮助我们监控和定位操作元素的代码。请参看下图事例:
图片 7
6.在A界面的弹出选项窗口中选择node removal,在B界面切换到DOM Breakpoints 选项,可以看到有注册信息。然后我们点击click me按钮触发删除div3的事件,可以看到浏览器自动为我们定位删除该元素的代码部分,并且停止执行js代码:
图片 8

 

7.在B界面中切换到Properties选项,可以看到选中元素的各种信息(英文单词里面的介绍比较简单,就不一一介绍了)。

图片 9

 

8.点击A界面的任意地方,按快捷键ctrl F可以看到底部有输入框,在输入框中输入你想要查找的任何内容,如果匹配到了,都回在A面板中高亮显示
图片 10
9.或者你可以点击左上角的问号图标,然后把鼠标移动到视图界面中,对准元素按下鼠标左键,对应的A界面会定位到选择的元素。
图片 11

 

 

二、Network
图片 12
1.Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态
图片 13
Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完成的状态
Type:请求的类型
Initiator:请求源也就是说该链接通过什么发送(常见的是Parser、Script)
Size:下载文件或者请求占的资源大小
Time:请求或下载的时间
Timeline:该链接在发送过程中的时间状态轴(我们可以把鼠标移动到这些红红绿绿的时间轴上,对应的会有它的详细信息:开始下载时间,等待加载时间,自身下载耗时)
图片 14
2.单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数header(表头信息、返回信息、请求基本状态—请参看http1.1协议内容对号入座)、Preview(返回的格式化转移后文本信息)、response(转移之前的原始信息)、Cookies(该请求带的cookies)、Timing(请求时间变化)
图片 15
3.在主面板的顶部,有一些按钮从左到右它们的功能分别是:是否启用继续http监控(默认高亮选中过)、清空主面板中的http信息、是否启用过滤信息选项(启用后可以对http信息进行筛选)、列出多种属性、只列出name和time属性、preserve log(目前不清楚啥用)、Dishable cahe(禁用缓存,所有的304返回会和fromm cahe都回变成正常的请求忽视cache conctrol 设定);
图片 16
4.最后在主面板的底部有记录了整体网络请求状态的一些基本信息
图片 17

三、Resources

Resources部分较简单,他主要向我们展示了本界面所加载的资源列表。还有cookie和local storage 、SESSION 等本地存储信息,在这里,我们可以自由地修改、增加、删除本地存储。

图片 18 至于webSql,我知道的并不多,在开发中很少用到。如果你想了解这方面的信息,我推荐你去阅读这篇博客

1 赞 28 收藏 2 评论

图片 19

2015

  1. Dr. Axel Rauschmayer: Using ECMAScript 6 today
    • Part 1 [40:44]
    • Part 2 [53:04]
  2. Brendan Eich: ECMAScript Harmony: Rise of the Compilers [19:17]
  3. Andreas Gal: Dirty Performance Secrets of HTML5 | HTML5 性能秘籍 [14:15]
  4. Andre Staltz: What if the user was a function | 假如用户是一个函数? [32:19] ♨

Q1 判断一个单词是否是回文?

回文是指把相同的词汇或句子,在下文中调换位置或颠倒过来,产生首尾回环的情趣,叫做回文,也叫回环。比如 mamam redivider .

很多人拿到这样的题目非常容易想到用for 将字符串颠倒字母顺序然后匹配就行了。其实重要的考察的就是对于reverse的实现。其实我们可以利用现成的函数,将字符串转换成数组,这个思路很重要,我们可以拥有更多的自由度去进行字符串的一些操作。

JavaScript

function checkPalindrom(str) { return str == str.split('').reverse().join(''); }

1
2
3
function checkPalindrom(str) {  
    return str == str.split('').reverse().join('');
}

2014

  1. Ilya Grigorik: Website Performance Optimization | 网站性能优化 (Udacity 课程) [1:13:57]
  2. Mark DiMarco: User Interface Algorithms | 用户接口算法 [27:41]
  3. Neil Green: Writing Custom DSLs [29:07]
  4. Philip Roberts: Help, I’m stuck in an event-loop [20:13]
  5. Eric Bidelman: Polymer and Web Components change everything you know about Web development [36:12]
  6. Alex Russell, Jake Archibald: Bridging the gap between the web and apps [48:40]
  7. Scott Hanselman: Virtual Machines, JavaScript and Assembler [25:56]
  8. Jafar Husain: Async JavaScript with Reactive Extensions [26:38]
  9. John-David Dalton: Unorthodox Performance [43:39]
  10. Gary Bernhardt: The Birth & Death of Javascript [29:22]
  11. Addy Osmani: Memory Management Masterclass [55:06]
  12. Reginald Braithwaite: Invent the future, don’t recreate the past [39:16]
  13. Kyle Simpson: Syncing Async [42:25]
  14. Ariya Hidayat: JavaScript and the Browser: Under the Hood [29:13]
  15. Jafar Husain: Version 7: The Evolution of JavaScript [1:11:53]
  16. David Nolen: Immutability: Putting The Dream Machine To Work [22:05]

Q2 去掉一组整型数组重复的值

比如输入: [1,13,24,11,11,14,1,2] 输出: [1,13,24,11,14,2] 需要去掉重复的11 和 1 这两个元素。

1
2
3
比如输入: [1,13,24,11,11,14,1,2]
输出: [1,13,24,11,14,2]
需要去掉重复的11 和 1 这两个元素。

这道问题出现在诸多的前端面试题中,主要考察个人对Object的使用,利用key来进行筛选。

JavaScript

/** * unique an array **/ let unique = function(arr) { let hashTable = {}; let data = []; for(let i=0,l=arr.length;i<l;i ) { if(!hashTable[arr[i]]) { hashTable[arr[i]] = true; data.push(arr[i]); } } return data } module.exports = unique;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* unique an array
**/
let unique = function(arr) {  
  let hashTable = {};
  let data = [];
  for(let i=0,l=arr.length;i<l;i ) {
    if(!hashTable[arr[i]]) {
      hashTable[arr[i]] = true;
      data.push(arr[i]);
    }
  }
  return data
 
}
 
module.exports = unique;

2013

  1. Nat Duca, Tom Wiltzius: Jank Free: Chrome Rendering Performance [40:53]
  2. Ilya Grigorik: Automating Performance Best Practices with PageSpeed [46:58]
  3. Eric Bidelman: Web Components [32:39]
  4. Alex Komoroske, Matthew McNulty: Web Components in Action [41:28]
  5. Paul Lewis, Peter Beverloo: Device Agnostic Development [40:44]
  6. John McCutchan, Loreena Lee: A Trip Down Memory Lane with Gmail and DevTools [42:09]
  7. Joe Marini: Upgrading to a Chrome Packaged App [43:49]
  8. Pete Hunt: React: Rethinking best practices [29:31]
  9. Martin Kleppe: 1024 Seconds of JS Wizardry [31:01]
  10. Yehuda Katz: A tale of two MVC’s [31:06]
  11. Vyacheslav Egorov: Performance and Benchmarking [25:41]
  12. Brendan Eich: JavaScript at 18: Legal to Gamble [25:44]
  13. Mathias Bynens: JavaScript ♥ Unicode [26:12]
  14. Mark Trostler: Testable JavaScript – Architecting Your Application for Testability [45:35]

Q3 统计一个字符串出现最多的字母

给出一段英文连续的英文字符窜,找出重复出现次数最多的字母

输入 : afjghdfraaaasdenas 输出 : a

1
2
3
输入 : afjghdfraaaasdenas
 
输出 : a

前面出现过去重的算法,这里需要是统计重复次数。

JavaScript

function findMaxDuplicateChar(str) { if(str.length == 1) { return str; } let charObj = {}; for(let i=0;i<str.length;i ) { if(!charObj[str.charAt(i)]) { charObj[str.charAt(i)] = 1; }else{ charObj[str.charAt(i)] = 1; } } let maxChar = '', maxValue = 1; for(var k in charObj) { if(charObj[k] >= maxValue) { maxChar = k; maxValue = charObj[k]; } } return maxChar; } module.exports = findMaxDuplicateChar;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function findMaxDuplicateChar(str) {  
  if(str.length == 1) {
    return str;
  }
  let charObj = {};
  for(let i=0;i<str.length;i ) {
    if(!charObj[str.charAt(i)]) {
      charObj[str.charAt(i)] = 1;
    }else{
      charObj[str.charAt(i)] = 1;
    }
  }
  let maxChar = '',
      maxValue = 1;
  for(var k in charObj) {
    if(charObj[k] >= maxValue) {
      maxChar = k;
      maxValue = charObj[k];
    }
  }
  return maxChar;
 
}
 
module.exports = findMaxDuplicateChar;

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:前端面试中的常见的算法问题,Chrome开发者工具

关键词: 千赢国际官网