20210308

佛罗伦萨的太阳
171 阅读12分钟

  1. Math.round()

    Math.round(）函数返回一个数字四舍五入后最接近的整数 如果参数的小数部分大于0.5，四舍五入到相邻的绝对值更大的整数 如果参数的小数部分小于0.5，四舍五入到相邻的绝对值更小的整数 如果参数的小数部分等于0.5，四舍五入到相邻的在正无穷（+∞）方向上的整数。

    例：
x=Math.round(2019.49) ;      //2019
x=Math.round(2019.5);         //2020
x=Math.round(-2019.5);        //-2019
x=Math.round(-2019.51);      //-2020

  2. 如何优化滚动性能？

    为什么要优化滚动性能？

    用户 scroll 和 resize 行为（即是滑动页面和改变窗口大小）会导致页面不断的重新渲染

    滚动行为作用哪些效果？图片的懒加载 下滑自动加载数据 侧边浮动导航栏

    【www.cnblogs.com/coco1s/p/54…

    • 在滚动中对滚动函数进行节流处理‘

    • 滚动中减少导致重绘的操作

    • 滚动中减少导致重排的操作

    • 通过给滚动内的子元素开启硬件加速，开启GPU硬件加速的方法，是浏览器的软件渲染引擎执行，检查到css规则时自动开启。GPU硬件加速会增加内存的使用，导致严重的性能问题，主要是移动端

      3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。

  3. 此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等）如何优化(背)

    1. 防抖（Debouncing）

      当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

      function debouncing(func,wait){
  var timeout=null;
    return function(){
        if(timeout==null)
        clearTimeout(timeout)
        timeout=setTimeout(func,wait);
    }
}

function workFun(){
    console.log("Success");
}
window.addEventListener('scroll',dedouncing(workFun,1000));

// 没采用防抖动

window.addEventListener(``'scroll'``,realFunc);

每次打印Success 延时1秒，如果 1s 内没有连续触发两次 scroll 事件，那么才会触发我们真正想在 scroll 事件中触发的函数。

  1. 节流（Throttling）

    当持续触发事件时，保证一定时间段内只调用一次事件处理函数

    例子：在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现

    var throttle = function(func, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

  2. requestAnimationFrame

    window.requestAnimationFrame() 这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数。这个方法接受一个函数为参，该函数会在重绘前调用

    rAF 被调用的频率是每秒 60 次，也就是 1000/60 ，触发频率大概是 16.7ms 。（当执行复杂操作时，当它发现无法维持 60fps 的频率时，它会把频率降低到 30fps 来保持帧数的稳定。）

    使用 requestAnimationFrame 来触发滚动事件，相当于上面的：

    throttle(func, xx, 1000/60)

  3. pointer-events: none

    主要是禁止hover带来的渲染

  4. 说一说常见的请求头和响应头都有什么呢？

    Request头

    GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)
    Accept: */*(客户端能接收的资源类型)
    Accept-Language: en-us(客户端接收的语言类型)
    Connection: Keep-Alive /Close(维护客户端和服务端的连接关系) TCP保持这个链接继续访问或关闭需要重连
    Host: localhost:8080(连接的目标主机和端口号)
    Referer: http://localhost/links.asp(告诉服务器我来自于哪里)
    User-Agent: Mozilla/4.0(客户端版本号的名字)
    Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型)都是压缩算法，两者都是基于哈夫曼的无损算法，deflate改进了哈夫曼算法。
    If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间) 
    Cookie(客户端暂存服务端的信息)
    Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)

    GZIP和deflate压缩算法的不同，默认且目前仅使用deflate算法压缩data部分，当应用Gzip压缩到一个纯文本文件时，效果是非常明显的，大约可以减少70％以上的文件大小。Google就可以通过直接读取gzip文件来比普通手工抓取更快地检索网页。deflate与gzip解压的代码几乎相同，可以合成一块代码。

    If-Modified-Since是缓存页面的最后修改时间

    在发送HTTP请求时，把浏览器端If-Modified-Since一起发到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。

    如果时间一致，那么返回HTTP状态码304（不返回文件内容），客户端接到之后，就直接把本地缓存文件显示到浏览器中。

    如果时间不一致，就返回HTTP状态码200和新的文件内容，客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示到浏览器中。

    Response

     HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)
    Location: http://www.baidu.com(服务端需要客户端访问的页面路径) 
    Server:apache tomcat(服务端的Web服务端名)
    Content-Encoding: gzip(服务端能够发送压缩编码类型) 
    Content-Length: 80(服务端发送的压缩数据的长度) 
    Content-Language: zh-cn(服务端发送的语言类型) 
    Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)
    Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)
    Refresh: 1;url=http://www.it315.org(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)
    Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)
    Transfer-Encoding: chunked(分块传递数据到客户端）  
    Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)
    Expires: -1//3种(服务端禁止客户端缓存页面数据)
    Cache-Control: no-***(服务端禁止客户端缓存页面数据)  
    Pragma: no-***(服务端禁止客户端缓存页面数据)   
    Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)  
    Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)
在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息，解决跨域的一种方法。

  5. css中“>”是什么意思

    css3特有的选择器，A>B 表示选择A元素的所有子B元素。

    与A B的区别在于，A B选择所有后代元素，而A>B只选择一代

    <div class="box">
       <div>
              <p>YY</p>
       </div>
</div>

    .box p 能选到p元素

    .box>p选不到p元素

    .box,p逗号表示群选择器能同时多个选择

  6. ID选择器>类选择器=伪类选择器>标签选择器

  7. 如何判断一个js对象是否是Array,arr为要判断的对象，其中最准确的方法是？

    【www.nowamagic.net/librarys/ve…

    typeof(arr) //object
arr instanceof Array // 单句有效，多个frame嵌套无效
arr.toString==='[object Array]'; //语句错误
arr.toString()返回也是数组的打印

    Object.prototype.toString.call(arr) === '[object Array]';

  8. @import 和 link的区别

    @import url()link
    读取完文件之后，再加载css样式，所以一开始是没有css样式，会闪烁一下加载页面前将css加载完成
    ie5不支持支持
    不可控制dom利用JavaScript操作dom的样式
    只能加载css除了能加载css外还能定义RSS，定义rel连接属性
    link的css权重大于@import

  9. label不能写id

    标签写法错误

    label只有两个属性for（规定 label 绑定到哪个表单元素）和form（规定 label 字段所属的一个或多个表单）

  10. !this.hasOwnProperty('myObj')可以判断一个对象是否存在

  11. 点 · 是否被解析为小数点

    (2).toString() 2 .toString() 2..toString()

    可以避免 . 被解析为小数点

  12. 哪些标签默认有margin值

    链接：www.nowcoder.com/questionTer… 来源：牛客网

    h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值

    dl标签：有默认margin

    ol,ul标签：有默认margin

    table标签没有默认的margin,padding值；th,td标签没有默认的margin值，有默认的padding值。

    p标签有默认margin(top,bottom)值,没有默认padding值。

    select标签在Chrome,Safari,Maxthon中有默认的margin：2px；在Opera,Firefox,IE6.0,7.0,8.0没有默认的margin值。

  13. 长度单位包括包括：

    • 相对单位

      • em,ex,ch,rem,vw,vh,vmax,vmin

        相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax

        比如宽300mm，高200mm，宽按100等分，3mm为最大,vmax

    • 绝对单位

      • cm,mm,q,in,pt,pc,px

    VM无，是微米

  14. prototype Funtion计算题

    function A(x){
	this.x = x;
}
A.prototype.x = 1;

function B(x){
	this.x = x;
}
B.prototype = new A();
var a = new A(2), b = new B(3);
delete b.x;

    B.prototype = new A();//将Class B的prototype设置为Class A，Class B实例化出来的object的prototype就是{x：undefined}因为当前实例化时，没有传参进入，所以x为undefined
var a = new A(2);
b = new B(3);//属于b本身的是{x:3}，但它同时继承prototype为{x:undefined}，当前b:{x:3}因为子类覆盖继承而来的属性
delete b.x;//此时b删除了子类this.x = x的属性，所以找到父类x:undefined

  15. 左右两分布局

    页面上显示了一个数据列表，要求在页面的左侧显示数据的标题，右侧显示一张导航图标

    最优解：
<div style="float:left">文本标题</div>
<div style="float:right">图标</div>
下面写法也行
<div style="float:left">文本标题</div>
<div style="float:left">图标</div>

  16. 将集合A转化为数组？

  17. promise的all方法

    iterable是一个全部为promise对象的数组，只要数组中有一个promise实例被reject，那么最终的promise触发catch，只有数组中全部promise实例都resolve才会触发then，并且要带上iterable中全部promise，其中promise实例将会被结果代替

    let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve({succ:'success'})
})

let p3 = Promise.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', {succ:'success'}]
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

    可见返回结果是所有值，promise的结果哪怕不一致也包裹再数组中

  18. relative可以基于absolute进行定位 √

    absolute 可以基于static定位 ×

    relative和absolute都可以基于（相对于）relative、absolute、fixed定位，而且层级也是默认叠加的，不仅仅只局限于我们所熟知的“子绝父相”。 flxed：只基于窗口定位

    staticabsoluterelativefixed
    static 为 position 属性的默认值，relative 元素周围的元素将会忽略 relative 元素的移动。
    static 元素会遵循正常的文档流，absolute 元素将会脱离正常的文档流relative 元素遵循正常的文档流fixed 元素将会脱离正常的文档流
    且会忽略 top,bottom,left,right 等属性子绝父相当 relative元素未使用定位属性进行相对定位时，它不会被周围的元素忽略，但利用定位属性进行定位后，周围的元素会忽略relative 元素的移动，它们会认为 relative 元素仍然在原来的位置，并未进行移动，它永远是相对最外层的 window 进行定位的

  19. JS文件按在HTML中引入的顺序依次载入（不是最后载入），在载入后马上执行，执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）

  20. 在 HTML5 中，contextmenu 和 spellcheck 是事件

    oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

    注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持

    spellcheck 属性规定是否对元素进行拼写和语法检查。（不是很明白怎么进行检查的）

    • input 元素中的文本值（非密码）
    • textarea元素中的文本
    • 可编辑元素中的文本

  21. caption不是HTML5新增元素

  22. 各家浏览器的内核

    一直到IE9，都是Trident内核

    firefox是Gecko内核

    chrome是webkit内核

  23. 介绍 Flex 布局，flex 是什么属性的缩写（背）

    弹性盒布局，CSS3新属性，方便布局，多个元素排列垂直居中，不继承

    flex属性是 flex-grow、flex-shrink 和 flex-basis 的简写

    flex-grow一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
    默认为0，即 即使存在剩余空间，也不会放大；
    所有项目的flex-grow为1：等分剩余空间（自动放大占位）
    flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。
    flex-shrink一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
    默认为1，即 如果空间不足，该项目将缩小；
    所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；flex-shrink为0：空间不足时，该项目不会缩小；
    flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍
    flex-basis项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

    flex属性的默认值为：0 1 auto （不放大会缩小）

    flex为none：0 0 auto （不放大也不缩小）

    flex为auto：1 1 auto （放大且缩小）

    flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

avatar
文章
阅读
粉丝