锦囊妙计（二）

最新推荐文章于 2022-10-27 15:57:23 发布
最新推荐文章于 2022-10-27 15:57:23 发布
阅读量332 收藏
点赞数
分类专栏： 面试锦囊
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leatitia/article/details/99310092
版权
  1. 页面布局中，如何理解结构与表现分离？(前端页面有哪三层构成？分别有什么作用？)
    如果盲人需要让屏幕阅读器朗读这部分内容，那它就是结构；如果不需要，那它就是表现。
  • 结构：HTML文件，页面的骨架
  • 表现：Css文件，页面样式，设置文档呈现效果
  • 行为：JS文件，页面的行为，实现文档行为
    （其中，表现层和行为层中间有一部分灰色重叠处理地带）
    是web开发的一种思路这样做便于后期代码的管理、维护

  1. 对于前后端分离，你是怎么理解的？
    前端只做展现交互 不做数据处理

  2. 如何自定义鼠标指针的图案？
    在这里插入图片描述

  3. 怎样去除html标签之间换行产生的空格？

  • 父元素上使用font-size:0
  • 不换行
  • 弹性布局、浮动布局
  1. 防抖和节流函数，适用于什么场景？

节流：规定在一个单位时间内，只能触发一次函数。
防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
两者的主要的区别是：在给定时间间隔内调用多次时，防抖采用最新调用而节流采用首次调用。

type Timeout = number // browser
// type Timeout = NodeJS.Timeout // node

/**
 * 防抖：生成一个函数，它在被调用后会等待一段时间再执行。
 * 如果在等待期间再次调用，之前还未执行的调用会被取消。
 * @param fn 要防抖的函数
 * @param timeout 超时时间
 */
function debounce(fn, delay) {
  let last = null
  return function debounce_fn() {
    if(last) {
      clearTimeout(last) // 若此时距离上次执行的时间小于delay，就相当于取消了前一次执行
    }
    last = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay) // 事件延迟执行，只有当后一次触发与当前触发≥delay时才会被执行！
  }
}
/**
 * 节流：生成一个函数，它在被调用后一段时间内再次被调用不起作用。
 * @param fn 要节流的函数
 * @param timeout 超时时间
 */
 //时间戳方法
function throttle(fn, delay) {
  let last = 0 // 这样能保证第一次触发能够立即被执行
  return function throttle_fn() {
    if(Date.now() - last >= delay) {
      fn.apply(this, arguments)
      last = Date.now()
    }
  }
}
//计时器方法
function throttle2(fn, delay) {
  let last = null
  return function throttle_fn() {
    if(last === null) {
      last = setTimeout(() => {
        fn.apply(this, arguments)
        last = null // 清除已执行的计时器标记
      }, delay)
    }
  }
}
  1. B/S和C/S架构区别是什么？

BS: Browser-Server 客户端是浏览器 也可以理解为web 这个受同源策略限制
CS: Client-Server 客户端是原生客户端 这个不受同源策略限制

  1. HTML5中canvas元素的作用
  • 最常见的就是做图表,数据可视化产品如百度的echarts
  • 做动画特效,在线画图,3d的webgl有threeJs, 2d的有zrender
    一般业务有的：web图像处理,在canvas上画图片,进行像素级的修改，如制作灰度图，对用户上传的图进行裁剪,模糊,多图合成等操作
    我常用的就是动态在线生成图片,如一般涉及安全的无痕打码,根据登录用户制作一张透明的事件穿透的图片覆盖在网页最上层,防内部截图外泄
  1. <hgroup> 是H5新增的标签可以用于对各级标题进行组合。实用性不强，W3C已废除
  2. shim和polyfill的区别

首先 polyfill是shim的一种.目的都是在没有相关API的环境上顺利执行代码
区别是:
shim:是js库, 用库定义的api去执行一些操作, 如jquery,$.ajax,底层用ActiveXObject或XMLHttpRequest实现,用户不直接用标准API,而是用库定义的api,具体环境判断和实现交给库.
polyfill: 用js模拟标准api，抹平环境差异，用户仍是使用标准api
如发现window.requestAnimationFrame不存在,polyfill会用setTimeout覆写window.requestAnimationFrame
polyfill的好处在于，可以动态监测浏览器版本,低版本加载,而在高本版浏览器可以不加载这段js，用户代码不修改直接可用
shim则是无论浏览器版本都要加载这段js，因为用的api是库定义的

  1. 函数声明和函数表达式有什么区别？

function fn() {
///…
}

函数表达式
const aa = function() {
///…
}

区别：
数声明会提升至作用域的顶端，函数表达式则会在赋值之后能调用
1.函数声明，函数名必须有，在函数表达式中可以省略函数名(声明+赋值)
2.函数声明会被预解析，函数表达式不会(声明,代码执行到此处才会赋值,所以在此之前,函数不能被调用)

  1. HTML如何创建分区响应图
  • 分区响应图:一张图片,分成多个模块,点击模块可以链接到不同的URL地址
  • 实现：map ,area
 <p>
    <img src="./1.png" usemap="#myMap" />
  </p>
  <map name="myMap">
    <area href="http://baidu.com" shape="rect" coords="50,106,220,273" />
    <area href="http://google.com" shape="rect" coords="260,106,430,275" />
    <area href="http://juejin.im" shape="default" />
  </map>
  1. 淘宝、京东、百度他们的网站首页秒开是如何做到的呢?

jd是首页部分可见区域做了ssr，配合懒加载

  1. HTML的轨道元素（跟踪元素）的理解

HTML5的跟踪元素提供了一种简单的标准方法，供用户将字幕、解说、屏幕阅读器说明和章节添加到视频和音频中；还可以用于其他种类的定时元数据。每个跟踪元素的源数据都是由定时 cues 列表组成的文本文件，插入点可包含 JSON 或 CSV 格式的数据。这种极其强大的结构可让您通过文本搜索、DOM 操作或与媒体播放同步的其他行为实现深层链接和媒体导航。

<video src="foo.ogv">
  <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>
  <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de"></track>
</video>

文档链接

  1. GPU的理解：

GPU：图形处理器，用于处理图形的有关的任务，渲染页面、
在css中使用 transform: translateZ(0),可以开启GPU硬件加速

  1. 你有做过骨架屏吗？它的原理是什么知道吗？

骨架屏为解决首屏加载导致白屏时间过长的一种优化方案。它可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。具体的实现方式可以是手写html、css，待数据请求回来再以真是数据替换。还可以使用图片来作为骨架屏。
骨架屏的目的和Loading是一样的，安抚用户，最速响应

  • 一般情况下是服务端渲染好html 直接把骨架屏结构先写在html里，用户打开直接先看到页面结构优化了白屏体验,后续js等资源加载完了才渲染出页面
  • 难点就在于通用的自构件产出骨架屏，因为每个入口页面结构都是不一样的不像Loading样式一致
    有方案是通过webpack打包编写插件,自构结构插入到输出的html文件里
  1. 什么是svg？说说svg有什么运用场景？

SVG是可缩放的矢量图形，是用XML来定义的图像，经过缩放不会有失真的情况。一个最基础的svg标签如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300px" height="100px"  />
</svg>

  1. 设备像素比（DPR）：物理像素和css像素的比例
    可以参考：https://blog.csdn.net/u013778905/article/details/78073566

  2. AJAX的工作原理

Ajax：用于网页和服务器进行异步通信的技术
基本原理：通过XMLHttpRequest向服务器发送异步请求，获取服务器返回数据，利用js更新页面
创建一个ajax请求的步骤：

  • 创建XMLHttpRequest对象；
  • 打开链接（指定请求类型、服务器地址、是否异步）
  • 向服务器发送请求（get直接发送请求，post请求需要设置请求头）
  • 接收服务器响应数据（根据XMLHttpRequest的readyState属性判断调用回调）
  • 更新页面

  1. 你知道什么是图床吗？它有什么好处？
    图床一般指的是存储图片的服务器。可以上传分享图片

  2. 什么是原型模式？主要运用场景

原型模式是一种设计模式，就是创建一个共享的原型实例，通过拷贝这些原型创建新的对象，也就是创建一个对象作为另一个对象的Prototype属性。
优点：用于创建重复的对象，可以提升性能。
结合优点，可以运用在以下几种场景：

  • 类初始化需要消耗很多资源
  • 有多个调用者调用且每个调用者会修改其值，相当于保存一份原有的对象拷贝相同对象进行修改，即保护性拷贝
  • 通过new对象时需要很多繁琐的准备或访问权限
  1. js的原型(每个对象的__proto__属性)和原型链(每个对象找原型的规则，直到null)
  • 原型：Javascript 规定，每一个函数都有一个 prototype 对象属性，指向另一个对象。prototype的所有属性和方法，都会被构造函数的实例继承。而prototype 就是调用构造函数所创建的那个实例对象的原型（proto）。一般是不可见的，变量的原型可以在Chrome浏览器的调试窗口通过__proto__查看。函数的原型可以通过prototype查看。
  • 原型的作用：可以通过设置原型给对象添加自定义的方法以供后续调用。
  • 原型链：每个对象都有一个指向它的原型prototype对象的内部链接，每个原型对象又有自己的原型。直到某个对象的原型为null为止，组成这条链的最后一环
    作用：可以通过原型链实现继承。

关系：只有有原型,才能形成原型链

  1. position的relative和absolute定位原点在哪？

position: relative，它偏移的参照位是其原先在正常文档流中的位置；
position: absolute，它偏移的参照位是父容器（position不为static）的左上角；

  1. 网站的TDK怎么设置？有什么作用？

TDK :即网站的title、description，keywords三者。用于网络搜索引擎优化seo，它是seo中页面的描述和关键词设置，也被称为seo界的三个标签。

  1. 过渡和动画区别是什么？
  • 过渡：需要事件触发，一次性动作，只能定义开始结束状态，无中间状态
    transition: width 2s;
  • 动画：时间性改变，周期性修改css属性值，通过百分比定义过程中的形态
    @keyframes bling-kf { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .bling { animation: bling-kf 2s ease-in infinite; }
  1. web安全色
  • 概念: 所谓web安全色，在不同的平台展示的效果和预期一致。举个例子，在mac和window展示的效果一致。
  • 公式: WEB安全色的RGB值均为51的倍数。举个例子，rgb(0,0,51),rgb(0,0,102), rgb(0,0,153) 都是web安全色。
  • 种类: 216，某些平台只支持216种颜色。
  • 为什么是51倍数，为什么某些平台只支持216种颜色，有空再研究。web安全色
  1. 对作用域链的理解

作用域链与函数执行栈相对应。js运行环境分为全局、函数以及eval三类，每当代码执行进入了一个新的运行环境就会将环境的执行上下文入栈，退出环境时将其出栈，从栈顶到栈底形成从内层到外层的嵌套关系。

由执行上下文创建的词法环境持有外层执行上下文的词法环境引用，当JS引擎在当前词法环境中找不到相应的变量时，会逐层向外查找，如此形成的链表即为作用域链。

  1. css中的calc()

calc()使得开发者能够使用四则运算表达式来填写CSS属性。
px、%、em等不同单位的数值均可参与计算，浏览器会进行自动转换。

当使用calc的时候，运算符号 左右需要有空格的哦，否则，属性不生效。例如： width: calc(100% - 30px);

  1. 怎么实现移动端的边框0.5px？
  • 一种是通过transform中的scale
 border: 1px solid red;
    transform: scaleY(.5);
  • 一种是通过meta viewport中设置init-scale为0.5
<meta name="viewport" content="width=device-width, initial-scale=0.5">

一种是设置hr

border: 0px;
border-bottom: 1px solid red;

一种是基于背景渐变实现

height: 2px;
background-image: linear-gradient(0deg, red 50%, transparent 50%)
  1. 域名解析是什么，实现过程是怎样？域名解析有哪几种方式？
  2. html标签的作用
  • 供浏览器识别这是一个HTML文档
  • 标识了HTML文档的头尾
  • 是HTML文件的根元素
  • H5之后可以通过设置html的manifest属性来实现离线缓存
  • 可以通过设置lang属性来设置页面的语言，常用的有zh和en
  1. 伪元素有哪些用途？

元素的伪元素可以调整布局
伪元素的content可以给元素预定义内容，类似作为实际DOM使用

  1. jsonp：一种实现跨域的技术

跨域是后端收到了请求并处理返回给前端,但浏览器发现跨域了抛出错误中止了请求
script标签可以实现跨域，而且可以实现跨域执行js文件，因此可以插入script标签来引入js文件，通后端根据前端请求动态生成*.js文件，前端构造script标签加载js文件,Js文件动态执行函数,将数据注入

  • 优点：兼容性较佳，支持服务器和浏览器的双向通信
  • 缺点：只支持get请求
	前端发送请求:url: xxx/xxx?jsonpCallBack=_callback123&&jsonpId = 123
	前端动态在window下构造函数
	window._callback123=(data) => // dosomething
	后端构造js文件, 123.js
	window._callback123({  userName: 'xxxx' })
	前端动态插入<script src="xxxx/xxx/123.js"></script>
  1. cookies、sessionStorage和localStorage的区别
  • Cookie 是网站为了对用户身份做标识而存放于浏览器中的数据；常用于会话管理，用户设置，行为跟踪等。在js中可以通过document.cookie来进行设置，获取或删除等操作；不过cookie有许多明显的缺点：
    —— cookie的大小限制在4KB；
    ——cookie会伴随http请求一起被发送，会浪费网络带宽
    ——cookie的正确操作比较困难
  • webStorage：H5新增的API，数据存放于客户端本地内存中；sessionStorage和localStorage操作一致，而sessionStorage的有效期限为一次session会话（即一个tab页从打开到关闭之间的时间段），localStorage是没有失效时间的（即永久保存，删除需要手动处理）；
  1. 请列举出多种减少页面加载时间的方法
  • 减少http请求数量
  • 请求数量：减小请求的文件大小，压缩js，和css
  • 缓存利用： 缓存 Ajax，使用 CDN、外部 JavaScript 和 css 文件缓存
  • 页面头部放css，body尾放js。
  • 服务器使用gzip压缩，减小网络数据的传输大小。
  • 尽量减少页面的dom元素，比如使用div布局替代冗余严重的table布局
  1. 你是如何更好地处理Async/Await的异常的？
  2. 进程和线程有什么区别？JS的单线程带来哪些好处？
  • 一个程序必包含至少一个进程
  • 一个进程必包含至少一个线程
    进程之间不共享内存
    多个线程共享内存，因此多线程可以提高程序的共发性
  • JS 单线程的好处：JS主要是面向浏览器的，因此是和用户实时交互的，如果多线程执行的话，你无法确定同时开始的任务哪个会先结束，以网页加载为例，可能导致网页HTML结构已经加载好，但是CSS样式还未加载完成，导致用户浏览体验差。或者两个线程同时对一个DOM结点进行修改和删除操作，则无法判断以哪个线程为准。
  1. 不依赖第三方库，怎么使用js读取pdf？
  • 前端不使用第三方库，如何将 PDF 文件显示在网页上。
    现代桌面浏览器都自带 PDF viewer 插件的，用 就能显示。（embed应该也可以）
  • 前端不使用第三方库，如何读取并解析 PDF 格式，利用 HTML 技术渲染 PDF 文件内容？
    这个就是 pdf.js 干的事情。思路是使用 FileReader API 读取文件二进制内容，根据 PDF 文件规范解析内容（PDF 是开源格式），根据 PDF 文件描述的文档内容和布局，用 canvas 或者 DOM 展现出来。内嵌的 font 或图片可以提取二进制然后用 blob URL 搞定，难点是如何用 DOM 实现 PDF 格式描述的布局 (不清楚 PDF 是如何描述布局的)。
  1. HTML的快捷键属性:accesskey（h5标准中的一个全局快捷键访问属性）
    按下ALT+ 特定键 会跳转的特定位置 mac是CTRL
<!-- ALT+h  访问百度 -->
<a href="http://www.baidu.com" accesskey="h">HTML</a><br />
  1. 说说你对二倍图的理解，移动端使用二倍图比一倍图有什么好处？
  • 一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。
  • 二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素，
  • 三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
    不同倍图可以在不同机型视网膜屏幕下保真显示
    移动端使用二倍图可以在Retina屏幕下保真展示
  1. 你知道的等高布局有多少种？写出来
  2. 写一个使两个整数进行交换的方法（不能使用临时变量）
a = a + b;
b = a - b;
a = a - b;
//法二  ES6
let a = 1, b= 2
[a, b] = [b, a]
  1. 媒体查询：做兼容处理用，查找对应范围使用不同的样式
  2. 你是怎样抽离样式模块的？
  3. 请说说你对事件冒泡的理解

事件流的执行顺序：捕获阶段-》目标阶段-》 冒泡阶段。冒泡从目标到windows对象
事件源触发事件后，会将事件反馈给父元素，一直到document
为了防止触发可以通过evet.target来判读或者直接event.stopPropagation()阻止事件冒泡。

  1. 你对事件循环机制有了解吗？
    事件循环机制和异步有关
  • 单线程模型：JS引擎有多个线程，但同时只执行一个任务，即引擎只在一个线程上运行，这个线程称为主线程
  • 事件循环机制JS 本身并不慢，慢的是读写外部数据，比如等待 Ajax 请求返回结果。如果等着 Ajax 返回结果出来，再往下执行，就会耗费很长的时间。所以 JS 设计了一种机制，CPU 可以不管 IO 操作，而是挂起该任务，先执行后面的任务，等到 IO 操作返回了结果，再继续执行挂起的任务。
    同步任务执行完后，引擎一遍又一遍检查那些挂起来的异步任务是否满足进入主线程的条件。这种循环检查的机制，就叫做事件循环机制。
  • 任务队列：JS 引擎运行时，除了一个正在运行的主线程，还提供一个或多个任务队列，里面是各种被挂起的异步任务。首先，主线程会去执行所有的同步任务，等到同步任务全部执行完，就会去看任务队列里面的异步任务，如果满足条件，那么异步任务就重新进入主线程开始执行，这时它就会变成同步任务。等到执行完，下一个异步任务再进入主线程开始执行。一旦任务队列清空，程序就结束执行。
  • 同步任务：没有被引擎挂起，在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。
  • 异步任务：被引擎挂起，不进入主线程，而进入任务队列的任务。只有引擎认为某个异步任务可以执行了，该任务才会进入主线程执行。排在异步任务后面的代码，不用等待异步任务结束会马上运行。
  1. 全屏滚动的原理

全屏滚动和轮播图类似，都是通过改变元素位置或者显示与隐藏来实现，配合JS的一些交互距离判断，实现类似原生滚动捕获的效果。这里全屏的话就需要将宽高都设置为窗口的大小，可以通过百分百实现。
关键CSS属性是父容器 overflow: hidden; 。
实现全屏滚动还可以简单的通过插件来实现，比如fullpage

  1. 说说你对web标准和W3C标准的理解和认识

WEB标准：网页主要由三个部分组成：表现、结构和行为。一些情况下，js改变会造成css和html的混乱，导致界限不清晰。web标准就是将这三部分独立分开，使其更具有模块化。
W3C标准：对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范
WEB标签语义化：正确的标签做正确的事

  1. 说说你对target="_blank"的理解？有啥安全性问题？如何防范？
  • 理解：在新的空白页, 打开该链接,
  • 安全性问题： 如果url中带有敏感信息, 会被第三方网站读取到document.referer
  • 防范：rel=“noopener noreferrer”

  1. HTTP是超文本协议，默认端口是80，以明文方式传输。
    HTTPS是HTTP协议的安全版，安全基础是SSL，以密文方式传输。

  2. css优化、提高性能的方法

  • 加载性能：压缩css，通过link方式加载，而不是@import
  • 选择器性能：减少层级，减少使用标签 通配符这些范围较大的选择器
  • 渲染性能：慎重使用高性能属性：浮动、定位；尽量减少页面重排、重绘；尽量减少使用昂贵属性；雪碧图；动画优化可以使用transform3d来使用GPU渲染提高性能
Leatitia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ActionScript 3.0锦囊妙计
06-07
ActionScript3.0基础教程
锦囊妙计（三）
Leatitia的博客
08-21 292
form表单是怎么上传文件的？你了解它的原理吗？ 简单来说就是把文件转换为字节流，然后使用http进行传输，后端接受后吧二进制转化为原先的文件格式； HTML表单中，可以上传文件的唯一控件是<input type="file"> 当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data（表明表单需要...
CTF入门笔记----------杂项全
因上努力，果上随缘的博客
04-20 2438
目录 杂项题的基本解题思路：1、文件操作与隐写1.1文件类型识别1.2文件分离操作1.3文件合并操作1.4文件内容隐写2、图片隐身术2.1 图片文字隐写2.2 图片文件隐写（---善用工具**）3、压缩文件处理3.1压缩文件分析4、流量取证技术4.1流量包文件分析4.2无线流量包密码4.3USB流量包文件分析4.4HTTPS流量包文件分析 杂项题的基本解题思路： 简单在于用工具 1、文件操作与隐写...
锦囊妙计2
weixin_42304063的博客
09-19 176
大结果集 无论结果集是如何获得的，只要结果集很大，就符合我们下面要讨论的大结果集的情况。 如果查询返回几万条记录，那么使用索引是没有意义的。借助哈希或合并连接进行全表扫描是合适的。 采取扫描方式不合适的情况下，应尽量减少要访问的数据的块数。最常用的手段就是使用索引（而不是表），尽管所有索引的总数据量经常比表还大，但单个索引则远比表要小。如果索引包含了所有需要的信息，则扫描索引而不扫描表是相当...
OKR 锦囊妙计
Tita OKR
10-27 179
我们以前制定目标的时候，类似于“上传下达”的那种形式，但是会出现员工不认可甚至是反抗，也会出现理解不一致的情况，这种现象让我们工作在最开始的时候就出现了一定的风险。我想问的是如果是用OKR管理模式，类似的场景要如何处理呢？相较于“控制式的被动管理”，员工更喜欢“主动式的管理“，他们希望参与到其中去，发表自己的意见，并在在这个过程中得到组织和他人的认可，”上传下达“的这种命令会被员工排斥。
锦囊妙计三十六.pptx
09-23
锦囊妙计三十六.pptx
程序员入职锦囊妙计
11-22
程序员入职锦囊妙计 新人入职必读，指导个人职业发展。
汤姆森的锦囊妙计.doc
09-29
汤姆森的锦囊妙计.doc
程序员入职的锦囊妙计
04-03
程序员入职的锦囊妙计
vue为什么要求组件模板只能有一个根元素
Leatitia的博客
08-02 6765
从两方面考虑： new Vue({el:’#app’}) 单文件组件中，template下的元素div 一、当我们实例化Vue的时候，填写一个el选项，来指定我们的SPA入口： var vm = new Vue({ el:'#app' }) 同时我们也会在body里面新增一个id为app的div <body> <div id='app'></div&...
前端笔记整理（Vue）
Leatitia的博客
05-23 2581
前端基础知识MVVM原理了解响应原理v-model双向绑定原理声明周期Vue 路由vue路由模式路由导航方式组件通信axios拦截器配置 MVVM MVVM即Model-View-ViewModel，将其中的 View 的状态和行为抽象化，让我们可以将UI和业务逻辑分开。MVVM的优点是低耦合、可重用性、独立开发。 原理了解 响应原理 Vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty劫持data属性的setter，getter，在数据变动时发布消息给订阅
前端笔记整理（JS）
Leatitia的博客
05-20 740
前端基础知识数据类型JS数据类型类型判断手写instanceof类型转换this闭包new 数据类型 JS数据类型 基本类型：number、string、null、symbol、boolean、undefined 对象类型：Object（Array、RegExp、Math、Map等）、Function 类型判断 typeof ：基本类型的数据中除了null，其它类型都可以通过typeof判断；对于对象类型来说，除function以外，其它类型判断的值均为object； instanceof ：通过
前端笔记整理（编程）
Leatitia的博客
05-23 295
前端基础知识数组去重遍历循环 .indexOf()利用Set类型 数组去重 遍历循环 .indexOf() let arr = [1,'1',2,'2',1,2,'x','y','f','x','y','f']; function unique1(arr){ let result = [arr[0]]; for (let i = 1; i < arr.length; i++) { let item = arr[i]; if(result.indexOf(item) === -1){
前端开发面试题-问答（四）
Leatitia的博客
05-17 295
1、变量提升 定义：函数以及变量的声明被提升到函数的最顶部。即在js中，变量可以在使用后再声明。其中，函数声明式的提升，即将整个代码块提升到它所在的作用域的最开始执行。 function test () { console.log(a); //undefined var a = 123; }; test(); 只有声明的变量会提升，初始化的不会。 2、let和var的区别 ES6新增了let命令，用来声明局部变量。用法类似于vr，但是所声明的变量，只在let命令所在的代码块中有效
实现双向数据绑定原理
Leatitia的博客
08-02 287
解析DOM节点和data中的数据进行一一对应，和数据进行绑定。还有就是绑定监听事件方法，事件触发时，将每一个DOM节点内容(比如innerHTM，value等等)赋值给相应的data 重写set,get方法，监听数据变化，但是拿不到某个数据对应的DOM节点内容(比如innerHTM，value等等) 定义watcher方法，再定义一个主题对象Dep。 在解析每一个DOM节点的时候，都new一...
前端开发面试题-问答（二）
Leatitia的博客
05-12 285
1、js实现防抖和节流 函数的节流和防抖都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或者卡顿现象 防抖（将多次操作合并为一次操作进行）：触发高频时间后n秒内函数只会执行一次，如果n秒内高频时间再次被触发，则重新计算时间； 节流（使得一定时间内只触发一次函数）：高频时间触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率； //防抖debounce代码： function debounce(fn,delay) { var timeout
详解Vue的diff算法
Leatitia的博客
08-02 258
vue的diff位于patch.js文件中，复杂度为O(n)。 diff过程其实就是调用patch方法，比较新旧节点，一遍比较一遍给真是DOM打补丁 虚拟DOM（将真实DOM的数据抽取出来，以对象的形式模拟树形结构） 虚拟DOM就是虚拟节点，是通过js的Object对象模拟DOM中的节点，然后通过特定的render方法将其渲染成真实的DOM节点（虚拟dom对应的是真实dom，使用document....
前端开发面试题-问答（一）
Leatitia的博客
05-10 243
1、谈谈你对前端性能优化的理解（减少页面加载方法） 请求数量：合并脚本和样式表、css sprites、拆分初始化负载； 请求宽带：精简JavaScript、移除重复脚本、图像优化； 缓存理由：使用CDN、使用外部JavaScript和css、天价Expires头、皮遏制ETag，使Ajax可缓存； 页面结构：将样式表放置顶部，将脚本放置底部，尽可能快速刷新文档的输出； 代码校验：避免css表达式、避免重定向 2、对盒模型的理解 盒模型分为IE6盒模型以及W3C盒模型（标准盒模型）。 页面文档的每个元
设计模式随笔－锦囊妙计
最新发布
06-07
好的，非常感谢您的提问。那么，您的问题是关于设计模式的，是吗？ 如果是这样，那么我可以和您分享一些关于设计模式的知识和经验。设计模式是一些被广泛使用的、可复用的解决方案，它们可以帮助我们在软件开发的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值