基础补漏

发表于

适配移动端

  1. 固定高度，宽度自适应

    1
    2
    <meta name="viewport" content="width=device-width,initial-scale=1">
    水平方向百分百，flex，定值都可以，不用管手机屏幕的尺寸

  2. 固定宽度，viewport缩放

    设计图、页面宽度、viewport width使用一个宽度，浏览器帮我们完成缩放。单位使用px即可。

    根据屏幕宽度来动态生成viewport，动态生成缩放比

    1
    <meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

  3. 宽度使用rem

    即给<html>设置font-size

继承

原型是什么？

在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。

原型链是什么？

JavaScript万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

继承方式：

  1. 原型链

    Sub.prototype = new Super();

    缺点：所有子类实例共享继承来的引用属性。

  2. 构造函数

    1
    2
    3
    function Sub(val){
        Super.call(this, val);   // 核心
    }

    缺点：没有用到原型啊，每个子类都有一个新的foo函数，影响性能，浪费内存，冗余。

  3. 组合继承（常用）

    1
    2
    3
    4
    function Sub(){
        Super.call(this);   // 核心
    }
    Sub.prototype = new Super();    // 核心

    构造函数里定义实例属性，原型上绑定函数（实现了函数复用）

    优点：

    • 调用父类构造方法–> 继承父类的基本属性，并且可以传参
    • 子类原型指向父类实例–> 实现函数复用。

    缺点：

    • 父类构造函数被调用了两次，内存浪费

  4. 寄生组合继承（优化）

页面渲染

第一步：渲染引擎开始解析html，根据标签构建DOM节点
第二步：根据css样式构建渲染树，包括元素的大小、颜色，隐藏的元素不会被构建到该树中。
第三步：根据css样式构建布局树，主要是确定元素要显示的位置。
第四步：根据前面的信息，绘制渲染树。

cookies，sessionStorage 和 localStorage

  • 相同点：存储在客户端

  • 不同点：

    1. 存储大小

      cookie数据大小不能超过4k。

      sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

    2. 有效时间

      localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

      sessionStorage 数据在当前浏览器窗口关闭后自动删除。

      cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

    3. 数据与服务器之间的交互方式

      cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

      sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

兼容性

  1. html：H5新标签在IE9以下的浏览器识别

2.css样式的兼容性：

  • css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同

    IE的条件注释hack：

  • 被点击过后的超链接不再具有hover和active属性

    解决办法:按lvha的顺序书写css样式，

    “:link”: a标签还未被访问的状态；

    “:visited”: a标签已被访问过的状态；

    “:hover”: 鼠标悬停在a标签上的状态；

    “:active”: a标签被鼠标按着时的状态；

3.JavaScript的兼容性

  • 标准的事件绑定方法函数为addEventListener，但IE下是attachEvent

  • 事件的捕获方式不一致。标准浏览器是由外至内，而IE是由内到外，主流是冒泡。

  • ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject

  • 获得DOM节点的父节点、子节点的方式不同

    其他浏览器：parentNode parentNode.childNodes

    IE：parentElement parentElement.children

页面是如何呈现的

1，浏览器首先会查询本机的系统，获取主机名对应的IP地址。

2，若本机查询不到相应的IP地址，则会发起DNS请求，获取主机名对应的IP地址。

3，使用查询到的IP地址，直接访问目标服务器。　

4，浏览器发送HTTP请求。

　　HTTP请求由三部分组成，分别是：请求行、消息报头、请求正文

5， 从请求信息中获得客户机想访问的主机名。

6，从请求信息中获取客户机想要访问的web应用。（web应用程序指提供浏览器访问的程序，简称web应用）

7，从请求信息中获取客户机要访问的web资源。（web资源，即各种文件，图片，视频，文本等）

8，读取相应的主机下的web应用，web资源。

9，用读取到的web资源数据，创建一个HTTP响应。

10，服务器回送HTTP响应。

　　HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文

11，客户浏览器解析回送的资源，并显示结果。

简述 JS drag 事件以及模拟 drag 事件的方案

一个完整的 drag and drop 流程通常包含以下几个步骤:

  1. 设置可拖拽目标. 设置属性 draggable=”true” 实现元素的可拖拽.
  2. 监听 dragstart 设置拖拽数据
  3. 为拖拽操作设置反馈图标 (可选)
  4. 设置拖放效果, 如 copy, move, link
  5. 设置拖放目标, 默认情况下浏览器阻止所有的拖放操作, 所以需要监听 dragenter 或者 dragover 取消浏览器默认行为使元素可拖放.
  6. 监听 drop 事件执行所需操作

实现 drag

  1. onmousedown + onmousemove → startDrag()
  2. onmouseup → stopDrag()
  3. 偏移值，两次事件的鼠标位置记录： e.pageX || e.clientX + scrollX; e.pageY || e.clientY + scrollY;

盒模型

盒模型有两种，W3C和IE盒子模型

W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度，IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border。

我个人认为IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。

对于行内元素，margin-top和margin-bottom无效，margin-left和margin-right有效

对于相邻的块级元素margin-bottom和margin-top 取值方式

1）都是正数： 取最大值

2）都是负数： 取最小值

3）一正一负： 正负相加

定位

所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位

absolute定位会脱离文档，浮动起来

absolute定位忽略父元素的padding

1
2
3
4
5
<link href="index.css" rel="stylesheet">  
<style type="text/css">  
@import "index.css";  
</style>

不同：

  • link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件
  • 兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的
  • 在样式表文件可以使用import导入其它的样式表文件，而link不可以
  • link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  • link支持使用Javascript控制DOM去改变样式；而@import不支持。
    注意：
    import的写法比较多，引号，url（推荐）

伪类&伪元素

伪类 伪元素
:active ::first-letter
:focus ::first-line
:hover ::before
:link ::after
:visited ::selection
:first-child

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

css选择器的优先级

顺序：!important > style > 权重值

权重规则

  • 标签：1
  • class：10
  • id：100

元素居中

元素水平居中

  • 行内元素：父元素设置text-align:center;

  • 块级元素：maigin:0 auto;（父元素定宽）

  • 浮动元素：

    1
    2
    3
    position:relative;
    left:50%;   
    transform: translate(-50%,-50%);

元素垂直居中

  • 行内元素：height和line-hight一样

  • 块级元素：

    1. 父元素display:table-cell;vertical-align:middle;

    2. 父元素高度确定：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      .outer{  
          width: 500px;  
          height:300px;  
          line-height: 300px;  +++
      }  
       .inner{  
           background: blue;  
           width: 300px;  
           height: 100px;  
           display: inline-block;  +++
           vertical-align: middle;  +++
       }

    3. 子元素定宽定高：相对父元素定位：left:50%;right:50%;此时位置在中心向右向左偏移了子元素的宽度或高度的一半，用margin-top:-子元素高度/2,margin-left:-子元素宽度/2

    4. 子元素不定宽高：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      .center{  
          width: 500px;  
          height:300px;   
          position: relative;
      }  
       .inner{
           width:30%;  
           height:30%;
           position: absolute; +++
           left: 0;  +++
           right: 0;   +++
           top:0;   +++
           bottom: 0;   +++
           margin: auto;   +++
       }

      ​

块元素与行内元素

  • 块元素：div/p/ul/ol/dl/table/form/blockquote/h1-h6/
  • 行内元素：a/abbr/br/cite/em/i/img/input/label/select/span/strong/sub/sup/textarea/u

清除浮动

更严谨的说法其实是叫“闭合浮动”：主要是解决元素浮动后父元素高度塌陷的问题。

  • 添加额外标签
  • 给container添加overflow属性
  • container也浮动
  • ::after伪元素

事件流

从页面接收事件的顺序，起初：

  • IE：事件冒泡流(主流)

    • button -> body -> document -> window

  • 事件流，包括三个阶段：

    • 事件捕获阶段

      • addEventListener最后一个参数，true代表事件捕获模式，false表示事件冒泡模式(默认)。

    • 处于目标阶段

      • 事件到了具体元素，被看成冒泡阶段的一部分

    • 事件冒泡阶段

      可以被阻止：

      1. IE模型，window.event.cancelBubble = true
      2. w3c模型：e.stopPropagation()

DOM0级、DOM2事件处理程序

  1. Dom0级：事件流的冒泡阶段被处理

    btn.onclick=function(){};

  2. Dom2级：true捕获

    addEventListener(事件名，处理函数，bool)和removeEventListener(事件名，处理函数，bool)

    主流都是在冒泡阶段调用事件处理程序，所以默认为false, true表示捕获阶段调用。

事件委托

将事件委托到父元素或祖先元素来实现。

  1. 一一添加事件监听麻烦

    当我们想要给一系列元素添加一些事件，又不想对每个元素一一去添加事件监听时，可以采用委托来实现。

  2. 委托可以有效的提高页面性能。

    给大量元素都添加事件监听时，会照成页面过多的性能损耗，所以碰到要给一系列元素添加事件时，建议采用事件委托，

CSS中可以 / 不可以被继承的属性

  • 字体属性：

    font-family, font-size, font-style, font-variant, font-weight, font

  • 文本属性：

    word-spacing letter-spacing text-align text-transform text-indent line-height可以继承

    text-decoration vertical-align不可继承

  • 颜色背景属性：

    color可以继承

    background不可继承

  • 边框属性：

    border不可以继承

    (border-top border-right border-bottom border-left)(border-width border-style border-color)

  • 定位和布局属性：

    margin padding width height float clear position left top overflow z-index display不可以继承

  • 列表属性：

    list-style-image, list-style-position,list-style-type, list-style可以继承

  • 所有元素可继承：

    visibility和cursor

CSS3有哪些新特性？

1
2
3
4
5
6
7
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba 
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局(columns属性) 
border-image

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

HTML5 主要是关于图像，位置，存储，多任务等功能的增加。

  • 拖拽释放(Drag and drop) API

    语义化更好的内容标签（header,nav,footer,aside,article,section）

    音频、视频API(audio,video)

    画布(Canvas) API

    地理(Geolocation) API

    本地离线存储 localStorage /sessionStorage

    表单控件，calendar、date、time、email、url、search

    新的技术webworker, websocket, Geolocation

  • 移除的元素

    纯表现的元素：basefont，big，center，font, s，strike，tt，u；

    对可用性产生负面影响的元素：frame，frameset，noframes；

  • IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式：

  • 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

  1. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
  2. ​

跨域

  1. 修改window.domain 方式(同源跨域)

  2. jsonp

    利用js脚本的src属性发送一个get请求，如果没有jjsonp，会正常返回一个json数据，利用jsonp服务端接受callback参数，用该参数包装要返回的json数据，如果我们的页面正好有一个callback的函数，一返回结果就会执行该函数。

  3. postmessage

    HTML5新特性，可以完成jsonp无法完成的post请求

    A给B跨域发送：iframeWin.postMessage('hello world!',"*");//限制接收窗体的url

    B监听发送来的消息：window.addEventListener('message', onMessage, false);

  4. 代理

  5. cors

    Access-Control-Allow-Origin

Event Loop

  • 同步任务都在主线程上执行，形成一个执行栈。

  • 异步任务不进入主线程，而是进入任务队列

  • 同步——》异步——》回调

    先执行同步代码，for，但不给settimeout传参（回调最后执行），等for循环执行完传参。

    回调放进消息队列。每执行一次for循环，就放一个settimeout到消息队列中排队。同步执行完了再去调用消息队列中的回调方法。

web性能优化

  1. 减少http请求：合并css、js，合并图片（css sprites），图片多的时候用延迟加载lazyload（判断在视口中的位置，给img标签填充src属性，jquery有lazyload插件）

  2. 开启Gzip。是一种压缩技术，可以将资源在服务端进行压缩，然后发送给浏览器后再进行解压，这种方式会降低传输大小，提高网页加载性能。

  3. 按需加载资源。

    资源（特别是图片）的按需加载或者说惰性加载，可以有助于你的 Web 应用在整体上获得更好的性能。对于使用大量图片的页面来说惰性加载有着显著的三个好处：

    • 减少向服务器发出的并发请求数量（这就使得页面的其他部分获得更快的加载时间）
    • 减少浏览器的内存使用率（更少的图片，更少的内存）
    • 减少服务器端的负载

  4. 少操作dom，dom的变化（改变文字大小，窗口大小，内容改变，属性改变等）可能会让浏览器重新计算元素的宽高，会引起页面reflow也就是重新布局，过于频繁cpu使用就会上涨

    通过设置class，包含有动画属性的元素是否可以采用absolute或者fixed的布局，少进行对dom的查询修改，尤其是少进行对dom的循环操作，总之就是减少reflow的影响范围。

    reflow何时发生：

    1、添加或者删除可见的DOM元素；

    2、元素位置改变；

    3、元素尺寸改变——边距、填充、边框、宽度和高度

    4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

    5、页面渲染初始化；

    6、浏览器窗口尺寸改变——resize事件发生时；

    很多浏览器都会优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

    虽然有了浏览器的优化，但有时候我们写的一些代码可能会强制浏览器提前flush队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，

    直接改变className

    不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存

    reflow的开销大于repaint,所以用marginLeft, width ,height等属性改变dom时我们要注意减少影响的范围。基本原则就是，把动画元素用position:absolute踢出文档流，这样R&R就限制在了absolute元素的子节点。

  5. 用json进行数据交换：js的原生格式，轻量，相比xml的数据体积要小。处理json:eval()和json.parse()

  6. html的语义化，正确使用常用标签：css没有成功加载时呈现好的内容结构；利于SEO

  7. css选择器，从右向左匹配，!important标签、伪类，类型选择器

  8. CDN：网络各处都放置了节点服务器，根据网络流量、各节点负载，到用户的距离把用户的请求重定向到离用户最近的服务节点上。

  9. js和css压缩：减少文件体积

稳定排序和不稳定排序

衡量方法：排序前两个相等的数排序后的位置是否颠倒。如果Ai = Aj，Ai原来在位置前，排序后Ai还是要在Aj位置前。

  1. 冒泡、插入、归并

    稳定

  2. 选择排序、快排

    每个位置选当前元素最小的。不稳定

深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Copy(p, c) {
      var c = c || {};
      for (var i in p) {
      　　if (typeof p[i] === 'object') {
      　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
      　　　　　Copy(p[i], c[i]);
      　　} else {
      　　　　　c[i] = p[i];
      　　}
      }
      return c;
} 
var a={};  
  a.key2 = ['小辉','小辉'];
  var b={};
  b = Copy(a,b);        
  b.key2.push("大辉");
  alert(b.key2);    //小辉，小辉，大辉
  alert(a.key2);    //小辉，小辉

Ajax

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
26
27
28
29
30
31
32
33
function getInfo() {
        //创建ajax请求对象
        var req;
        if (window.XMLHttpRequest) {
           req = new XMLHttpRequest();
        }else{
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }        
        req.open("get", "server.json");
        //发送请求
        req.send();
        req.onreadystatechange = function () {
            if (req.readyState === 4) {
                if (req.status === 200) {
                    success(req.responseText);
                } else {
                    error(req.status);
                }
            }
        }
    }
    function success(responseText) {
        // alert(responseText);
        var obj = JSON.parse(responseText);
        $("#name").val(obj["name"]);
        $("#age").val(obj["age"]);
    }
    function error(status) {
        $("#info").text("error" + status);
    }
    $("button").on("click", getInfo);