前端基础知识总结—理论篇
1.重绘与重排 重排（也叫回流）reflow/Relayout 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。 浏览器渲染页面：浏览器渲染是基于“流式布局”的模型，流实际就使我们常说的文档流。浏览器根据渲染树中每个渲染对象...
关于变量提升和作用域相关的题目
1.变量提升，且提升的是申明，赋值不会提升 变量提升是js的预解析过程，在代码块执行前会进行隐性操作。 提升只针对var申明的变量和function具名函数。 console.log(a) // undefined，如果后面没有申明变量a，这里就不是undefined而是直接报错：is not defined var a = 1 // 同理如下 var a1 = a2+1 var a2 = 10 co...
Access-Control-Allow-前后端设置跨域CORS详解
跨域访问的项目常在过滤器或者拦截器中添加Access-Control-Allow-（访问权限控制，access-访问）前缀的响应头配置…
图片懒加载实现方式
懒加载原理 当浏览器滚动到相应的位置时再渲染相应的图片。主要利用图片src属性的重新赋值来实现。 将img标签中的src的路径设置为空或默认图片(空白图片、Loading图），缓存真正的图片路径，当浏览器滚动到相应的位置时，再给src属性重新赋值。 懒加载目的 优化前端压力，减少首屏请求数，延迟请求。对服务器压力有一定...
html、js、css渲染顺序
浏览器通过http或者本地文件收到http响应数据报文后，根据主体中content-type字段值，判断是否为html文档。为html文档时，新建渲染进程，网络进程和渲染进程通过管道通信共享数据。渲染进程一边从管道获取数据一边进行解析(HtmlParse)。 如果此时遇到外部资源，会再次启动网络接口（http）获取外部资源，对于相应的外部...
前端重点知识总结—CSS3
1.CSS3有哪些新属性，举例 边框属性：border-radius、box-shadow 背景属性：background-size、background-origin 2D、3D转换：transform 动画属性：animation 2.nth-child和:nth-of-type的区别 ele:nth-of-type(n)是指父元素下第n个ele元素， ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择...
CSS clip:rect 矩形剪裁功能，截取图片某一块
最近我在制作一款主题的时候，在自适应css设计中，为了调整图片大小，又不愿意改变图片比例的情况下，用到了CSS剪裁功能。 说实话，这个功能在国内运用的比较少。CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似...
HTTP/2 的优势及性能优化
历史悠久的超文本传输协议，即HTTP标准。HTTP/2在2015年5月被批准，目前浏览器已经支持HTTP/2。 HTTP/2构建在Google SPDY协议基础之上。NGINX是最早支持SPDY的，也同样率先支持了HTTP/2。NGINX还发布了详尽的白皮书（PDF），介绍了HTTP/2以及它如何基于SPDY构建，并展示了如何实现这个新协议。 SPDY是HTTP/2的上一代，总...
前端重点知识总结—CSS基础
1.什么是盒子模型? 在网页中，一个元素所占空间类似于一个盒子，包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。4个部分一起构成了元素的盒模型。 box-sizing 属性控制盒模型的尺寸。默认情况下，box-sizing的值为content-box。代表一个盒子的整体宽高由设置的wid...
前端重点知识梳理—DOM
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构进行操作。 1. js怎样添加、移除、移动、复制、创建和查找节点? 1)创建新节...