前端笔记2

201.对前端开发的理解

Web 前端开发简单来说就是网站的开发。最基础的工作就是实现效果图，把视觉稿通过页面代码的方式表现出来能够真实反映视觉稿且能够通 过浏览器的兼容。与设计师和后台人员进行沟通，优化和完善前端项目。

作为一名前端开发人员，必须掌握基本的 Web 前端开发技术，其中包括：CSS(3)、HTML(5)、DOM、javascript、Ajax，jquery 等，了解其他框架如 angular、vue、react 等，适应前端技术发展，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的 Bug。需要了解网站性能优化和一些打包工具如 webpack、gulp，了解 SEO 等等一 下辅助开发的知识。 转载链接：整理学习：100多道前端面试题（一起加油，且行且珍惜）_阿珊和她的猫的博客-CSDN博客

202.PC 考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是 android 手机还是 ios 手机，一般浏览器使用的都是 webkit 内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

203.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等

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

205.new

①、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

②、属性和方法被加入到 this 引用的对象中。 3、新创建的对象由 this 所引用，并且最后隐式的返回 this

206.classList.toggle( className )； 如果classList中存在给定的值，删除它，否则，添加它；

207.转载链接:淦，为什么 "𠮷𠮷𠮷".length !== 3 - 掘金

'吉'.length 1 '𠮷'.length 2 UTF-16 编码

208.偏函数 转载链接：理解JS里的偏函数与柯里化 - 古兰精 - 博客园

偏函数应用——我们创造一个新函数，让现有的一些参数值固定

209.回调地狱 回调地狱 - cecelia - 博客园

210.splice javascript中splice（）函数的三个用法_luohui2017的博客-CSDN博客_splice()函数

splice（）函数先删除一段元素之后再插入一段元素

211.解构赋值 [a, b] = [10, 20];

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

212.Access-Control-Allow-Origin:#则允许所有域名的脚本访问该资源

213.外部”示例中使用了 JavaScript 的一项现代技术（async “异步”属性）来解决这一问题，它告知浏览器在遇到 <script> 元素时不要中断后续 HTML 内容的加载。

214.JS 注释过多对项目性能有影响吗

215.脚本调用策略小结：

• 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。

• 如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

216.disable 属性设置为 true 来禁用表单文本输入和按钮

217.可用性，光标，改进

218.大量代码去枚举和检查输入的内容，然后显示，低效率和不可行（没有办法列举出所有可能的输入），所以有了变量的产生

219.在初始化变量之后再实际声明它，并且仍然可以工作，这是因为变量的声明通常在其余的代码执行之前完成，这叫做预置

220.**幂 Math.pow( , )

221.段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数

222.dir 属性规定元素内容的文本方向 bdo dir="rtl",左到右

223.q 引用

224.花括号进行代码切割

225.匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。函数声明会进行声明提升（declaration hoisting），而函数表达式不会。

226."  &quot

227.target="_top" ， 属性作用使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

228.usemap是<img>标签的一个属性，用作指明所使用的图像地图名

229.单元格间距和边距的区别

边距是单元格里单元格内容与单元格外框之间的距离，如果不为0，则单元格里的内容不会触碰到单元格的边，会保持一定距离

单元格边距(cellpadding) 单元格间距(cellspacing)

230.button和input type=button的区别

转载链接：[原]<button>和<input type="button"> 的区别 - 雨知 - 博客园

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处

与标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

231.fieldeset 标签会在相关表单元素周围绘制边框

 

232.enctype="text/plain" 表示不对特殊字符进行编码，只会将空格转为加号

233.前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。

scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。

fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。

local：背景图相对于元素内容固定，

inhert:继承，没什么说的。

234.background:#5d9ab2 url('https://static.runoob.com/images/mix/img_tree.png') no-repeat top left;

235.italic 显示一个斜体的字体样式 展示字体自身的倾斜样式，不是我们强加给字体的属性，而是字体自身的一种状态

oblique 显示一个倾斜的字体样式 用于自身没有斜体效果的字体，强制向右倾斜文字

就像变色龙变色和猫咪变色，变色龙的变色是本能，猫咪变色则需要借助外界颜料变身。

转载链接：font-style italic 和 oblique的区别_椒盐薄荷糖-CSDN博客

236.font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

237.font-size/line-height，用来规定字体尺寸和行高

1. 网络事件不是 JavaScript 语言的核心——它们被定义成内置于浏览器的 JavaScript APIs。

239.node.js依赖定期监听事件的监听器和定期处理事件的处理器——虽然听起来好像差不多，但是实现两者的代码是非常不同的，Node.js 使用像 on ( ) 这样的函数来注册一个事件监听器，使用 once ( ) 这样函数来注册一个在运行一次之后注销的监听器。

240.不同的编程环境下事件机制是不同的

241.preventDefault()

242.addEventListener 第三个参数为true时捕获，false时冒泡。

243.JavaScript Object Notation (JSON) 是一种将结构化数据表达为 JavaScript 对象的标准格式，其常用于在网站上表达或传输数据（比如：从服务器向客户端发送数据，使之显示在网页上）

244.对象有时被称之为关联数组(associative array)——对象做了字符串到值的映射，而数组做的是数字到值的映射。

245.JavaScript有个内嵌的方法create(), 它允许您基于现有对象创建新的对象。

246.border-collapse:collapse;，合并成单一的边框

247.考虑到JavaScript的工作方式，由于原型链等特性的存在，在不同对象之间功能的共享通常被叫做 委托 - 特殊的对象将功能委托给通用的对象类型完成。这也许比将其称之为继承更为贴切，因为“被继承”了的功能并没有被拷贝到正在“进行继承”的对象中，相反它仍存在于通用的对象中。

248.border-right-width

249.异步callbacks 其实就是函数，只不过是作为参数传递给那些在后台执行的其他函数. 当那些后台运行的代码结束，就调用callbacks函数

250.将 async 关键字加到函数申明中，可以告诉它们返回的是 promise，而不是直接返回值。此外，它避免了同步函数为支持使用 await 带来的任何潜在开销。在函数声明为 async 时，JavaScript引擎会添加必要的处理，以优化你的程序

251.await 只在异步函数里面才起作用。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了

252.在表格里面【visibility:collapse】表现得和【display:none】一样

在平时【visibility:collapse】表现得就和【visibility:hidden】一样

253.clip 属性剪裁绝对定位元素

*object*.style.clip="rect(0px,50px,50px,0px)" (左上角)

clip:rect(A,B,C,D);

A：剪裁矩形距离父元素顶部的长度。

B：剪裁矩形距离父元素左边的长度 + 矩形宽度。

C：剪裁矩形距离父元素顶部的长度 + 矩形高度。

D：剪裁矩形距离父元素左边的长度。

转载链接：css ：clip rect 正确的使用方法 - fox_charon - 博客园

254.navigator对象通常用于检测浏览器与操作系统的版本

navigator中最重要的是userAgent属性，返回包含浏览器版本等信息的字符串，其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启cookie

255.a:after { content: " (" attr(href) ")"; }

菜鸟教程在线编辑器

256.IndexedDB API（有时简称 IDB ）是可以在浏览器中访问的一个完整的数据库系统，在这里，你可以存储复杂的关系数据。

257.可访问性：手机用户，低速网络环境，辅助技术或ATs

258.HTML语义化：更便于开发（易于理解），更适配移动端（更加轻便），更便于SEO优化

更通俗易懂，展开缩写，避免扩折号

259.WAI-ARIA 无障碍Web规范（屏幕阅读），TalkBack

260.应用于HTML的ARIA有两部分组成：role（角色）和带aria-前缀的属性，

261.防御性编程

262.初步规划>开发>测试/查错>修复/迭代

263.normalize.css

Normalize.css: Make browsers render all elements more consistently.

264.&laquo《 &raquo 》

265.onerror事件（信息，url,行）

266.

• main存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于body 中。最好不要把它嵌套进其它元素。

• article 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）

267.写代码和调试的关键其实是：熟悉语言本身和相关工具

268.在得到授权之前永远不要把你的src属性指向其他人网站上的图片。这被称为"盗链（hotlinking）"

269.像 MP3、MP4、WebM这些术语叫做容器格式。他们定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。

270.HTTPS减少了远程内容在传输过程中被篡改的机会，HTTPS防止嵌入式内容访问您的父文档中的内容

271.一个允许包含在其里的代码以适当的方式执行或者用于测试，但不能对其他代码库（意外或恶意）造成任何损害的容器称为沙盒

272.插件是一种对浏览器原生无法读取的内容提供访问权限的软件

273.矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。

274.在 Chrome 中测试时，通过如下方式禁用缓存：打开 DevTools ，并选中 Settings > Preferences > Network下Disable cache的选择框。否则，Chrome 会优先选择缓存图片而不是恰好适配的那个。

275.表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值

276.移动端

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

277.@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中

278.<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）

279.控制继承：继承，默认样式，自然值

280.什么是FOUC?如何避免FOUC?

FOUC即无样式内容闪烁（Flash Of Unstyled Content），是在IE下通过@import导入css文件引起的。

IE会首先加载整个HTML文档的DOM，然后再导入外部的css文件。因此，在页面DOM加载完成到css导入完成之间，有一段时间页面上的内容是没有样式的，这段时间的长短跟网速和电脑速度都有关系。

解决方法：在<head>之间加入一个<link>标签来导入css文件。

281.display: block忽略vertical-align

282.如需定义元素内容与边框间的空间，是可使用 padding 属性，但是不能为负值

283.箭头函数其实是没有 this的，这个函数中的 this只取决于他外面的第一个不是箭头函数的函数的 this。this一旦绑定了上下文，就不会被任何代码改变。

284.与var不同，初始化没有被提升。在我们声明（初始化）它们之前，它们是不可访问的。这被称为“暂时死区”。当我们在声明变量之前尝试访问变量时，JavaScript会抛出一个ReferenceError。

285.静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级，TypeError

286.所有对象键（不包括Symbols）都会被存储为字符串，即使你没有给定字符串类型的键

287.JavaScript 中的 trim() 方法用于删除字符串开头和结尾的空格。

288.javascript es6新增语法之${},可以配合反单引号完成拼接字符串的功能

1、反单引号怎么打出来？ 将输入法调整为英文输入法，单击键盘上数字键1左边的按键。

2、用法 step1： 定义需要拼接进去的字符串变量 step2： 将字符串变量用${}包起来，再写到需要拼接的地方

let str=`I love ${a}, because he is handsome.`;
//注意：这行代码是用返单号引起来的

转载链接:javascript es6新增语法之`${}` - 志不坚者智不达 - 博客园

289.JSON.parse()可以把JSON规则的字符串转换为JSONObject,JSON.parse()很方便,并且几乎支持所有浏览器。

290.作用域是在函数定义的时候确定的，与调用位置无关

291.函数会优先提升，所以如果变量和函数同名的话，变量的提升就忽略了

292.js是一门单线程的语言，但是为了执行一些异步任务时不阻塞代码，以及避免等待期间的资源浪费，js存在事件循环的机制，单线程指的是执行js的线程，称作主线程。

其他还有一些比如网络请求的线程、定时器的线程，主线程在运行时会产生执行栈，栈中的代码如果调用了异步api的话则会把事件添加到事件队列里，只要该异步任务有了结果便会把对应的回调放到【任务队列】里，当执行栈中的代码执行完毕后会去读取任务队列里的任务，放到主线程执行，当执行栈空了又会去检查，如此往复，也就是所谓的事件循环。

293.Object 是 JavaScript 中所有对象的父对象

294.事件委托给父元素后，可通过event.target对象来获取，从而得知事件是哪个子元素触发的

295.CORS(跨域资源共享)跨域资源共享跨域资源共享（我好像在哪见过你~）

Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER, Content-Type Access-Control-Max-Age: 86400

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

297.自适应功能

298.__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的,但是由于JS中函数也是一种对象，所以函数也拥有__proto__和constructor属性

299.直到原型链顶端null

300.前端可以利用id获取数据，也可以利用name获取数据

​        若后台获取前端提交的数据，只能利用name获取值

301.@*submit.prevent*阻止默认事件提交,并且不刷新

302.@change与@input的区别

@change当输入框失焦的时候触发，在elementUI中使用是@visible-change

@input是输入框发生变化时触发，也就是说输入框一动就触发了

转载链接：@change与@input的区别 - 写手在作画 - 博客园

303._.clone lodash的浅拷贝

304.@submit.prevent阻止默认事件提交

 

转载链接：@submit.prevent阻止默认事件提交_前端-舟遥遥的博客-CSDN博客

305.！input img对齐不了，不要给img设置高度啊，然后都加vertical-align:middle;，

align="absmiddle"听说给图片设置这个也可以

306.获取url参数可以用内置的URLSearchPramas构造函数

307.materialize.css将设备分为三类：手机、平板、电脑，通过两个值600px、992px作为分界线

@media only screen and (max-width: 992px) {
    /* 当设备宽度小于等于992px时 */
    .ct {
        background-color: #000;
    }
}

@media only screen and (max-width: 600px) {
    /* 当设备宽度小于等于600px时 */
    .ct {
        background-color: #0f0;
    }
}
@media only screen and (min-width: 993px) {
    /* 当设置宽度大于等于993px时 */
    .ct {
        background-color: #00f;
    }
}

转载链接：@media 响应式布局_沉迷学习 日渐消瘦-CSDN博客

308.之所以在一个网页中多次使用相同id样式能生效,那是浏览器容错性能好,按照html语法大家一定遵循一个id命名在一个网页中只能使用一次

309.渐变色的字

background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);为文本元素提供渐变背景。

webkit-text-fill-color: transparent 使用透明颜色填充文本。 webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

310.使用闭包的优点是可以避免全局变量污染，缺点是容易造成内存泄露（不再用到的内存，没有及时释放，就叫做内存泄漏）。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏

311.如何最小化重绘(repaint)和回流(reflow)？

尽量使用 css 属性简写,尽量使用 css 属性简写,尽量使用 css 属性简写

312.取消默认操作: w3c 的方法是 e.preventDefault()

阻止冒泡 w3c 的方法是 e.stopPropagation()

313.外部引入的脚本(script)会阻塞浏览器的并行下载，HTTP/1.1规范表明，浏览器在每个主机下并行下载的组件不超过两个(也就是说，浏览器一次只能够同时从同一个服务器加载两个脚本)；

314.单线程是指 JavaScript 在执行的时候，有且只有一个主线程来处理所有的任务

目的是为了实现与浏览器交互

当不知道应该以哪个线程为准。所以为了避免此类现象的发生，降低复杂度，JavaScript 选择只用一个主线程来执行代码，以此来保证程序执行的一致性。

315.fouc,无样式内容闪烁 @import过多嵌套导致串行下载，出现FOUC

316.使用let关键字（和const）声明的变量也会存在变量提升，但与var不同，初始化没有被提升。在我们声明（初始化）它们之前，它们是不可访问的。这被称为“暂时死区”。当我们在声明变量之前尝试访问变量时，JavaScript会抛出一个ReferenceError

317.hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）

318.网格布局的好处在于整体化，对于用户来说可以很方便快捷地在网站获取信息。但是整体化并不意味着常规化，网格本身就可以多样化，无论是形状、位置还是配色方面都是有创意可以发挥的。

319.图片底测空白缝隙解决方案：除了baseline，把图片设置为块级元素display:block

320.for-in 循环中的变量 应该使用 var 关键字明确限定作用域，从而避免作用域污染

321.为什么说对象字面量赋值比new Object()高效

{}是字面量，可以立即求值，而new Object()本质上是方法（只不过这个方法是内置的）调用，既然是方法调用，就涉及到在proto链中遍历该方法，当找到该方法后，又会生产方法调用必须的堆栈信息，方法调用结束后，还要释放该堆栈

转载链接：为什么说对象字面量赋值比new Object()高效？ - mushishi - 博客园

322.在验证 null 时，一定要使用 === ，因为 == 无法分别 null 和 undefined

323.undefined派生自null，你可以按原型链来理解吧，object的原型对象是null，然后所有包装对象都是object那出来的

324.如果未提供唯一的标识key，React将认为a和b对应的位置前后的组件类型不同，而选择完全销毁后重新创建；而如果提供了唯一的标识key，React将能够判断出a和b只是位置不同，更新位置即可

325.js是词法作用域，在写代码阶段就作用域就已经确定了，换句话说，是在函数定义的时候确定的，而不是执行的时候

（js烧脑面试题大赏 - 街角小林 - 博客园 第16题，17题也很好）

326.$route.path 字符串,等于当前路由对象的路径,会被解析为绝对路径,

327.1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

　　2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了

328.router-link:to和$router.push

• <router-link :to='/myroute'>

  跳转到我的路由

  </router-link>

  • 使用router-link方式跳转，会在页面渲染的时候就加载对应的路由

  • 比起直接写<a href = ''>的方式的优点：不管是h5的history还是hash模式，切换的时候很方便；会默认阻止浏览器的默认事件；写路径的时候不用写基路径了。

• $router.push('/myroute')

  • 跳转到对应的路径，可在页面中写对应的点击事件，然后执行对应的方法中写跳转，可在跳转前再写一些别的逻辑。

• 注意点

  • 退出登录不能直接使用router-link方式，因为router-link会在页面加载时就渲染，所以会在页面加载的时候直接退出，无法进入具体的应用；

  • 使用@click.native而不是@click的原因：vue官方库中有自己的事件处理机制，router-link会默认阻止浏览器的默认行为，可以使用.native来触发原生事件。

329.filter CSS属性将模糊或颜色偏移等图形效果应用于元素 网站变灰

330.