JS&CSS&HTML面试

发表于 | 分类于 |
字数统计: 3,378 | 阅读时长 ≈ 12

position的值

  • static 默认值。没有定位，元素出现在正常的流中
  • relative生成相对定位的元素，相对于其在普通流中的位置进行定位。
  • absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位。
  • fixed生成绝对定位的元素，相对于浏览器窗口进行定位。

对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

说说你对语义化的理解？

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
  • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

  • <!DOCTYPE>声明位于文档最前面。告知浏览器以何种模式来渲染文档。
  • 严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
  • 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  • DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

上下margin重合问题

解释下浮动和它的工作原理？

  • 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

清除浮动的技巧

  • 额外标签法，
    （缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
  • 使用after伪类 .parent:after{content:”.”;height:0;visibility:hidden;display:block;clear:both;}
  • 浮动外部元素
  • 设置overflow为hidden或者auto

浮动元素引起的问题

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

    解决方法： 使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

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

  • 文件合并
  • 文件最小化/文件压缩
  • 使用 CDN 托管
  • 缓存的使用（多个域名来提供缓存）

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

  • 优化图片
  • 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
  • 优化CSS（压缩合并css，如margin-top,margin-left…)
  • 网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）·
  • 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

    当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

  • 减少http请求（合并文件，合并图片）。

null和undefined的区别？

null (null是一个表示”无”的对象，转为数值时为0)

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

  • 作为函数的参数，表示该函数的参数不是对象。
  • 作为对象原型链的终点。

undefined (undefined是一个表示”无”的原始值，转为数值时为NaN。)

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

  • 变量被声明了，但没有赋值时，就等于undefined。
  • 调用函数时，应该提供的参数没有提供，该参数等于undefined。
  • 对象没有赋值的属性，该属性的值为undefined。
  • 函数没有返回值时，默认返回undefined。

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

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

js延迟加载的方式有哪些？

  • defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

如何解决跨域问题?

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

哪些操作会造成内存泄漏？

  • 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
  • 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
  • setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
  • 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

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

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

对Node的优点和缺点提出了自己的看法？

优点

  • 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求。
  • 因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
  • 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的。

缺点

  • Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子

你有哪些性能优化的方法？

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

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

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

    简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM

从输入 URL 到浏览器接收的过程中发生了什么事情

javascript对象的几种创建方式

  • 工厂模式
  • 构造函数模式
  • 原型模式
  • 混合构造函数和原型模式
  • 动态原型模式
  • 寄生构造函数模式

javascript继承的6种方法

  • 原型链继承
  • 借用构造函数继承
  • 组合继承(原型+借用构造)
  • 原型式继承
  • 寄生式继承
  • 寄生组合式继承

ajax过程

  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  • 设置响应HTTP请求状态变化的函数.
  • 发送HTTP请求.
  • 获取异步调用返回的数据.
  • 使用JavaScript和DOM实现局部刷新.异步加载和延迟加载

异步加载的方案

  • 动态插入script标签
  • 通过ajax去获取js代码，然后通过eval执行
  • script标签上添加defer或者async属性
  • 创建并插入iframe，让它异步执行js
  • 延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

GET和POST的区别，何时使用POST？

  • GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
  • POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
  • GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值

    也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

哪些地方会出现css阻塞，哪些地方会出现js阻塞？

js的阻塞

  • js的阻塞特性：所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载JS，但是JS下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。
  • 由于浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。
  • 嵌入JS会阻塞所有内容的呈现，而外部JS只会阻塞其后内容的显示，2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

CSS阻塞加载

  • CSS怎么会阻塞加载了？CSS本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6下CSS都是阻塞加载）
  • 当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

嵌入JS应该放在什么位置？

  • 放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
  • 如果嵌入JS放在head中，请把嵌入JS放在CSS头部。
  • 使用defer（只支持IE）
  • 不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用。