前端小tips(三)

19.iframe的优缺点

优点:

  1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
  2. Securitysandbox
  3. 并行加载脚本
    缺点:
  4. iframe会阻塞主页面的Onload事件
  5. 即时内容为空,加载也需要时间
  6. 没有语意

20. 如何实现浏览器内多个标签页之间的通信?

调用 localstorge、cookies 等本地存储方式

21.webSocket 如何兼容低浏览器?

Adobe Flash Socket 、ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

22.线程与进程的区别

  1. 一个程序至少有一个进程,一个进程至少有一个线程
  2. 线程的划分尺度小于进程,使得多线程程序的并发性高
  3. 另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率
  4. 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制
  5. 从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别

23. 你如何对网站的文件和资源进行优化?

期待的解决方案包括:

  1. 文件合并
  2. 文件最小化/文件压缩
  3. 使用 CDN 托管
  4. 缓存的使用(多个域名来提供缓存)
  5. 其他

24. 请说出三种减少页面加载时间的方法

  1. 优化图片
  2. 图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)
  3. 优化CSS(压缩合并css,如margin-top, margin-left...)
  4. 网址后加斜杠(如www.campr.com/目录,会判断这个目录是什么文件类型,或者是目录。)
  5. 标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。
    当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了)
  6. 减少http请求(合并文件,合并图片)

25. null和undefined的区别?

null是一个表示"无"的对象,转为数值时为0
undefined是一个表示"无"的原始值,转为数值时为NaN

当声明的变量还未被初始化时,变量的默认值为undefined
null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象

undefined表示 “缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是:

  1. 变量被声明了,但没有赋值时,就等于 undefined
  2. 调用函数时,应该提供的参数没有提供,该参数等于 undefined
  3. 对象没有赋值的属性,该属性的值为 undefined
  4. 函数没有返回值时,默认返回 undefined

null表示“没有对象”,即该处不应该有值。典型用法是:

  1. 作为函数的参数,表示该函数的参数不是对象
  2. 作为对象原型链的终点

26. new操作符具体干了什么呢?

  1. 创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型
  2. 属性和方法被加入到 this 引用的对象中
  3. 新创建的对象由 this 所引用,并且最后隐式的返回 this

27. 对JSON 的了解?

JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式。它是基于javascript的一个子集。数据格式简单, 易于读写, 占用带宽小。

28. s延迟加载的方式有哪些?

  1. defer和async
  2. 动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)
  3. 按需异步载入js

29. 如何解决跨域问题?

  1. jsonp(jsonp 的原理是动态插入 script 标签)
    2.document.domain + iframe
  2. window.name、window.postMessage
  3. 服务器上设置代理页面

30. documen.write和innerHTML 的区别

document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分

31. .call() 和.apply() 的作用?

动态改变某个类的某个方法的运行环境

32. 哪些操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

  1. setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
  2. 闭包
  3. 控制台日志
  4. 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

33.如何判断当前脚本运行在浏览器还是node环境中?

通过判断 Global 对象是否为window,如果不为window,当前脚本没有运行在浏览器中

34. 什么叫优雅降级和渐进增强?

  1. 优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

  2. 渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

35.对Node的优点和缺点提出了自己的看法?

优点:

  1. 因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
  2. 与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。

缺点:

  1. Node是一个相对新的开源项目,所以不太稳定,它总是一直在变。
  2. 缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子(第三方库现在已经很丰富了,所以这个缺点可以说不存在了)。

36. 对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。

  1. 实现界面交互
  2. 提升用户体验
  3. 有了Node.js,前端可以实现服务端的一些事情

前景:

  1. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好
  2. 参与项目,快速高质量完成实现效果图,精确到1px;
  3. 与团队成员,UI设计,产品经理的沟通;
  4. 做好的页面结构,页面重构和用户体验;
  5. 处理hack,兼容、写出优美的代码格式;
  6. 针对服务器的优化、拥抱最新前端技术。

37.你有哪些性能优化的方法?

  1. 减少http请求次数:CSS Sprites, JS、CSS 源码压缩、图片大小控制合适;网页 Gzip,CDN 托管,data 缓存,图片服务器
  2. 前端模板 JS+ 数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX 请求结果,每次操作本地变量,不用请求,减少请求次数
  3. 用innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 javascript 性能
  4. 当需要设置的样式很多时设置 className 而不是直接操作 style
  5. 少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作
  6. 避免使用CSS Expression(css表达式)又称 Dynamic properties(动态属性)
  7. 图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳

38.http状态码有那些?分别代表是什么意思?

  1. 100-199 用于指定客户端应相应的某些动作
  2. 200-299 用于表示请求成功
  3. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
  4. 400-499 用于指出客户端的错误
    400:语义有误,当前请求无法被服务器理解
    401:当前请求需要用户验证
    403:服务器已经理解请求,但是拒绝执行它
  5. 500-599 用于支持服务器错误
    503:服务不可用

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

分为4个步骤:

  1. 当发送一个URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
  2. 浏览器与远程Web 服务器通过 TCP 三次握手协商来建立一个TCP/IP 连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
  3. 一旦TCP/IP 连接建立,浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。
  4. 此时,Web 服务器提供资源服务,客户端开始下载资源。

请求返回后,便进入了我们关注的前端模块
简单来说,浏览器会解析 HTML 生成 DOM Tree,其次会根据 CSS 生成 CSS Rule Tree,而 javascript 又可以根据 DOM API 操作 DOM

40. 平时如何管理你的项目?

  1. 先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等
  2. 编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行)
  3. 标注样式编写人,各模块都及时标注(标注关键样式调用的地方)
  4. 页面进行标注(例如 页面 模块 开始和结束)
  5. CSS 跟 HTML 分文件夹并行存放,命名都得统一(例如 style.css)
  6. JS 分文件夹存放 命名以该 JS 功能为准的英文翻译
  7. 图片采用整合的images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

41. 说说最近最流行的一些东西吧?常去的哪些网站?

最流行的一些东西:

  1. node.js
  2. MongoDB
  3. npm
  4. MVVM
  5. MEAN
  6. three.js
  7. React

常去的网站:

  1. 牛客网
  2. Github
  3. CSDN

42.javascript对象的几种创建方式

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

推荐阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 113,837评论 24 450
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,418评论 1 19
  • by孤鸟差鱼 雨比鱼重 你比鱼轻 便我揣兜里
    孤鸟差鱼阅读 129评论 0 1
  • 上一篇《开发平台之组织架构设计》 背景 平台里面有一些数据会经常被访问,比如:菜单的链接、数据字典、常用配置等,而...
    架构老A阅读 1,687评论 0 9