网站服务器诊断,中国公司排名500强,温州做网站掌熊号,安卓下载软件Vh虽然获取到了视口高度#xff0c;但是vh会随着屏幕的、大小变化#xff0c;所以当减去一个数字之后#xff0c;就会显示错误。 生成id 如果没有设置id#xff0c;则可以通过new Date.getTime()获取一个时间#xff0c;作为一个单独的id#xff0c;也可以通过下载uuid生…Vh虽然获取到了视口高度但是vh会随着屏幕的、大小变化所以当减去一个数字之后就会显示错误。 生成id 如果没有设置id则可以通过new Date.getTime()获取一个时间作为一个单独的id也可以通过下载uuid生成新的id。 word-wrap: break-word 使用CSS属性word-wrap: break-word。这个属性可以让超出宽度的文本自动换行并在合适的位置将单词断开。 重排和重绘
重排重新排布渲染树的一部分必须更新并且节点尺寸发生了变化浏览器则需要重新构造渲染树。
如页面初始化 添加或删除可见的dom元素 元素的位置、尺寸改变使用动画引起位置的变化 内容改变 浏览器的窗口尺寸改变resize 事件是在浏览器窗口大小发生变化时触发利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。 设置style属性的值 计算offsetWidth、offsetHeight、offsetTop和offsetLeft等布局信息 激活CSS伪类如 :hover 查询某些属性或调用某些方法如getComputedStyle()、getBoundingClientRect() 重绘一个元素的外观被改变浏览器根据新属性重新绘制使元素呈现新的外观。 外观属性包括界面、文字等可用状态向量描述的属性如 界面appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip、border-radius、background-size、visibility 文字text、font、word callapply和bind的作用和区别 相同点 1都能改变this指向 2都能传递参数 3都能通过方法.方法名调用 不同点 1函数名不同 参数传递方式不同注意看第二个 改变this指向的时机不同(bind在复制时改变其他两个在调用时改变) 参数传递时机不同注意看第三个 宏任务和微任务
宏任务从浏览器事件中取出事件交给javascript引擎执行、异步队列取出毁掉函数执行。I/O事件队列中取出事件执行。一般是延时函数如setTimeoutsetIntervalsetImmdeiate
微任务微任务产生后推到执行队列中等执行完宏任务后优先执行队列中的微任务直到微任务队列为空再去执行下一个宏任务。一般是Promise产生的 数组去重
function unique(arr){var result [];for(var i0; iarr.length; i){if(result.indexOf(arr[i]) -1){result.push(arr[i]);}}return result;}const arr [1,1,2,3,4,4]
const x unique(arr)
console.log(x); //[1,2,3,4] 数组扁平化
将一个多维数组变成一个一维数组主要由flatten函数实现意思是摊平
方法1:
function flatten(arr) {let result [];// 此处也可使用for...of遍历for (let i 0; i arr.length; i) {if (Array.isArray(arr[i])) {result result.concat(flatten(arr[i]));} else {result.push(arr[i]);}}return result;}
方法2:
function flatten(arr) {return arr.toString().split(,).map((item) Number(item));}, 方法3: 方法4:
直接使用ES6提供的flat方法实现扁平化。falt()方法会按照指定的深度递归遍历数组arr.flat([depth])参数depth不填时默认值为1depth为Infinity表示展开任意深度的嵌套数组。
function flatten(arr) {return arr.flat(Infinity);}
柯里化 一个接受多个参数的函数。它将把这个函数转换成一系列函数其中每个小函数将接受一个参数直到所有参数都完成。
// 非柯里化
const add (a, b, c) {return a b c}
console.log(add(2, 3, 5)) // 10
// 柯里化
const addCurry (a) {return (b) {return (c) {return a b c}
}}
console.log(addCurry(2)(3)(5)) // 10 偏函数 当给定的参数少于预期的参数时函数将转化为偏函数并返回一个期望剩余参数的新函数。
const addPartial (x, y, z) {return x y z}
const partialFunc addPartial.bind(this, 2, 3)partialFunc(5) // 10
IndexOf()查找字符串中某一字符从头开始第一次出现的索引
B标签加粗标签 I标签斜体 U标签下划线 深拷贝与浅拷贝的区别
假设源对象是A拷贝后的对象是B。
总的来说浅拷贝后的A和B两个对象指向同一个地址深拷贝后两者指向不同的地址。
具体来说浅拷贝后修改B对象内的值后A对象内对应的值也会改变而深拷贝则不会。
浅拷贝只克隆了最外一层而深拷贝需要递归拷贝每一层。这只是对于数组、json等对象来说存在区别对于基本数据类型来说两者意义相同。 类数组转换成数组
类数组定义
var alo {0: a, 1: b, 2: c, length: 3}; 类数组是一个对象拥有length属性其他属性为非负数 例如arguments和DOM方法的返回结果都是类数组 转换方法
var arr Array.prototype.slice.call(alo);// es5方法Array.isArray(alo); // falseArray.isArray(arr); // truevar arr1 Array.from(alo); // es6方法// 关于扩展运算符 ...// ... 只适用于具有遍历器接口 Symbol.iterator 的对象// 如果一个对象没有部署这个接口就无法转换 SEO SEO是指通过了解搜索引擎的规则和算法对网站进行内部和外部的优化提高网站在搜索引擎自然排名中的位置从而增加网站的曝光度和流量。SEO的目的是为了提高网站的可见性吸引更多的访问者并将这些访问者转化为潜在客户或购买者。具体来说SEO包括网站结构优化、页面优化、内容质量优化和外部链接优化等方面。同时通过监测和分析网站收录情况、排名情况、外部链接数据和流量数据等指标可以量化地检测SEO的效果。 em和rem
em是相对于父级的字体大小rem是相对于根元素的字体大小。 什么叫优雅降级和渐进增强
渐进增强 progressive enhancement 针对低版本浏览器进行构建页面保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation 一开始就构建完整的功能然后再针对低版本浏览器进行兼容。
区别 a. 优雅降级是从复杂的现状开始并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的能够起作用的版本开始并不断扩充以适应未来环境的需要 c. 降级功能衰减意味着往回看而渐进增强则意味着朝前看同时保证其根基处于安全地带
浏览器的内核分别是什么? IE: trident内核 Firefoxgecko内核 Safariwebkit内核 Opera以前是presto内核Opera现已改用Google Chrome的Blink内核 ChromeBlink(基于webkitGoogle与Opera Software共同开发)
强缓存和弱缓存协商缓存
优点减少不必要的数据传输、减轻对服务器的压力、加快网页加载速度
缺点可能会出现缓存失效
无法保证缓存数据与数据库中的数据保持同步。
强缓存 强缓存其实就是强制缓存的意思。当浏览器去请求某个文件的时候服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制具体表现为
respone header 的cache-control常见的设置是max-age public private no-cache no-store等1.cache-control: max-agexxxxpublicmax-age表示缓存的时间有效期public表示客户端和代理服务器都可以缓存该资源但是当用户重新刷新页面时就会重新 发送请求获取资源2.cache-control: max-agexxxxprivateprivate表示只让客户端可以缓存该资源代理服务器不缓存3.cache-control: max-agexxxximmutableimmutable表示即使用户重新刷新页面也不会重新发送请求还是直接读取缓存4.cache-control: no-cacheno-cache表示不走强制缓存但可以走协商缓存5.cache-control: no-storeno-store表示不走缓存
协商缓存 当强制缓存时间过期后这是客户端就会去请求服务器在请求服务器的过程中可以设置协商缓存。
协商缓存主要由 ETag 和 Last-Modified 两个字段来实现
ETag 是一个用于映射 web 资源的映射 token具有唯一性
Last-Modified 则通常是文件最后更新的日期时间戳 总结
强制缓存发生在浏览器端 协商缓存发生在服务器端
强制缓存在浏览器强制刷新的情况下不会生效 而协商缓存则不受影响。
强制缓存返回的报文状态码为 200 协商缓存返回的报文状态码为 304
样式合集
font-familyajax设置英文字体可以不带双引号background-position背景图像位置注意背景图像你想让它在页面的哪个位置显示它就可以在哪个位置显示但前提是你要使用这个属性通常同时设置 x 轴横轴和 y 轴纵轴。例如 background-position300px 400px。z-index控制网页的叠放顺序为元素设置重叠效果。属性使用纯整数为0时位于最下方适用于绝对定位或者相对定位。white-space:控制空格的输入有normal、pre保留空格和不换行nowrap
布局 常规布局
块级默认为:displayblock;
行级元素display: inline; 弹性盒子布局
display: flex;
flex-direction:默认是row横向排放
column纵向排放
row-reverse——你会看到仍然有多行布局但是每一行元素排列的方向和原来是相反的了。
flex-wrap: wrap 换行显示
flex200 为页面中的每个内容至少设置为200px宽 网格布局
display: grid;grid-template-columns: 1fr 1fr 1fr;创建三个1fr的列。这里的数字代表显示的比例可根据情况更改。grid-column-gap定义列之间的间隙。grid-row-gap定义行之间的间隙。grid-gap: 同时定义行和列之间的间隙。这里的grid- 可以省略只写gap也可以grid-auto-rows: minmax(100px, auto);minmax(100px,auto),定义了一个行/列尺寸至少为100px并且尺寸大于100px就会进行自动调整。position: absolute;绝对定位的元素不再存在于正常文档布局流中。它坐在它自己的层独立于一切。默认情况下 position 属性都是 static。 多列布局
.container {column-count: 3;//会将页面等分成三列column-width: 200px;//设置列宽column-gap: 20px;//改变列之间的间隙column-rule: 4px dotted rgb(79, 185, 227);//在列之间加入一条分割线
}
链接状态
样式合集2:
outline属性在声明中设置多个轮廓属性的简写属性例如outline-style, outline-width和outline-color, outline: green solid 3pxoutline和border设置的值类似但是不同的是outline不占据空间绘制于元素内容周围。outline-offset 里面元素边框和外面设置的outline之间的间隙overflow:visible/hidden/clip(类似于hidden/scroll/auto/overlay这三个都能把隐藏的内容以滚动的形式呈现出来。overflow-xoverflow-y和overflow的属性值一样分别控制了内容是横向滚动还是纵向滚动。overflow-wrap 应用于行级元素用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符以防止文本溢出其行向盒。属性值normal单个字符串过长会横向溢出anywhere会造成下方溢出break-word这个不造成溢出会正确的显示
缓存种类
1.私有缓存 通常是浏览器缓存不与其他客户端共享因此私有缓存存储在该用户的个性化响应中。个性化的内容由cookie控制但是单独的cookie不会响应成为私有的。 请注意如果响应具有 Authorization 标头则不能将其存储在私有缓存或共享缓存除非 Cache-Control 指定的是 public中。 只想将响应存储在私有缓存中则Cache-Control: private
2.共享缓存 位于客户端和服务端之间存储用户之间的响应分为代理缓存和托管缓存。
1代理缓存进行访问控制、实现缓存、减少网络流量。
2托管缓存由服务开发人员部署降低源服务器负载。 Http的重定向
重定向操作由服务器向请求发送特殊的重定向响应而触发。对于用户来说重定向的影响几乎是不可见的。
永久重定向表示原 URL 不应再被使用而选用新的 URL 替换它。 临时重定向有时候请求的资源无法从其标准地址访问可以从另外的地方访问。 特殊重定向304Not Modified会使页面跳转到本地的缓存副本中可能已过时
而 300Multiple Choice则是一种手动重定向将消息主体以 Web 页面形式呈现在浏览器中列出了可能的重定向链接用户可以从中进行选择。 HTTP 重定向不是定义重定向的唯一方法。
1.借助 HTML 的 meta 元素的 HTML 重定向机制。在页面的 head 中添加一个 meta 元素。 2.借助 DOM 的 JavaScript 重定向机制。原理是设置 window.location 的属性值然后加载新的页面。
window.location https://example.com/;
只有在执行 JavaScript 的客户端上才能使用。
优先级HTTP协议HTML重定向javascript重定向机制。 HTTP1.0和HTTP1.1和HTTP2.0的区别https://www.jianshu.com/p/be29d679cbff
影响一个 HTTP 网络请求的因素主要有两个
带宽(之前是拨号上网现在基本上不会影响和延迟。
延迟浏览器阻塞、
DNS查询浏览器需要知道目标服务器的 IP 才能建立连接。将域名解析为 IP 的这个系统就是 DNS。这个通常可以利用DNS缓存结果来达到减少这个时间的目的。、
建立连接HTTP 是基于 TCP 协议的浏览器最快也要在第三次握手时才能捎带 HTTP 请求报文达到真正的建立连接但是这些连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显慢启动则对文件类大请求影响较大。 HTTPS与HTTP的一些区别
1.https需要付费
2.http协议运行在TCP上传输的内容是明文Https运行在SSL/TLS之上SSL/TLS运行在TCP上所有的传输内容则是经过加密的
3.传输方式不同/端口不同http协议明文传输端口是80、Https加密传输端口是443。
4.HTTPS有效防止运营商劫持 服务端推送是什么 把客户端需要的资源随着index.html一起发送到客户端省去客户端重复请求的步骤加快静态资源通过服务端推送的方式的速度。 HTTP2.0多路复用的好处
HTTP 性能优化的关键并不在于高带宽而是低延迟。TCP 连接会随着时间进行自我调谐起初会限制连接的最大速度如果数据成功传输会随着时间的推移提高传输的速度。这种调谐则被称为 TCP 慢启动。由于这种原因让原本就具有突发性和短时性的 HTTP 连接变的十分低效。
HTTP/2 通过让所有数据流共用同一个连接可以更有效地使用 TCP 连接让高带宽也能真正的服务于 HTTP 的性能提升。 SPDY
优化HTTP1.X的请求延迟解决HTTP1.X的安全性具体如下
1.降低延迟采用多路复用多个请求stream共享一个tcp连接的方式降低延迟提高了带宽利用率。
2.请求优先级多路复用带来新问题关键请求可能被阻塞。给每个request设置优先级这样重要的请求被优先响应如浏览器首页之后加载各种静态资源、脚本文件保证用户第一时间看到网页的内容。
3.header压缩很多都是重复多余的选择合适的压缩算法减少包的大小和数量。
4.增加基于HTTPS的加密传输协议
5.由服务端推送就是当请求一个style.css,服务器传输style.css同时传输了style.js当再请求style.js的时候就会直接在缓存中获取到不用再多发一次请求。
HTTP2.0 与 SPDY 的不同点
不同于SPDY的是HTTP2.0支持明文HTTP的传输而SPDY强制使用HTTPS。
消息头的压缩算法不同。 HTTP2.0与HTTP1.x相比之下的新特性
HTTP2.0的解析是基于二进制的HTTP1.x是基于文本的。
多路复用连接共享一个request对应一个id。request可混杂通过id归属不同的分类。
header压缩HTTP1.x的header有大量信息每次都要重复发送HTTP2.0使用encoder来减少需要传输的header大小通讯双方各自cache一份header fields表既避免了重复header的传输又减小了需要传输的大小。
服务端推送。 HTTP2.0的多路复用和HTTP1.X中的长连接复用的区别 网络模型自上而下分为 应用层、传输层、网络层和网络接口层。 上面的元素设置了 margin-bottom下面的元素设置了 margin-top这种情况下会按照较大者去显示。
CSS变量
在样式中以—开头的都是CSS变量之后通过var进行使用。变量值不能有单位不能是‘20px’这样
/*** var()函数就是用于读取变量* color: var(—黑色, #fff); //第二个参数就是默认值* 假设—黑色为空情况下会使用#fff**/body {color: var(--1)—黑色: #000000 //这里是变量background-color: var(--黑色, #fff)}
Vue 中 computed 和 watch 区别
Computed
1.支持缓存只有依赖的数据发生变化后才会重新计算不支持监听异步操作。
2.其值默认走缓存计算属性是基于他们的响应式依赖进行缓存的即data声明过/父组件通过props传递的。
3.如果一个属性是由其他属性计算而来的这个属性依赖其他的属性一般会使用computed
4.在computed中属性有一个get方法和一个set方法,当数据发生变化时会调用set方法。
Watch
1.不支持缓存数据变化则触发操作
2.支持监听异步操作
3.监听的函数接收两个参数一个最新值一个变化前的
4.当一个属性变化就需要执行相应的操作
5.监听数据必须是data中声明的或者父组件传递过来的props中的数据 当发生变化时会触发其他操作函数有两个的参数:
immediate: 组件加载立即触发回调函数
deep: 深度监听发现数据内部的变化在复杂数据类型中使用例如数组中的对象发生变化。需要注意的是deep无法监听到数组和对象内部的变化。
当想要执行异步或者昂贵的操作以响应不断的数据变化的时候则就需要watch。
严格模式中函数独立调用 this 默认绑定 undefined而在草率模式中则绑定 globalThis。
一旦代码中使用了 class 关键字类区块中的所有语法将在严格模式下执行。类作用域默认能且仅能支持严格模式。
严格模式下禁止使用with语句但是Vue的编译器依赖with语句实现。序列化就是不直接使用 with 语句而是间接使用比如把 with 语句变成字符串然后交给 eval/Function 执行但是这里的eval必须是间接调用直接调用的话还是会被全局下的严格模式捕获。 判断全局是否开启了严格模式函数独立调用时在严格模式下 this 绑定 undefined在草率模式下则绑定 globalThis。 无法判断局部开启了严格模式。 filter 过滤的内容是浅拷贝过程
内部机制
所谓内部机制指的就是
1判断x是否有valueOf方法如果有的话根据其返回值做出不同的反映
返回值为symbol类型报错
返回值为引用类型, 跳到2
返回值y为其它非引用类型最终结果为String(y)
2如果没有valueOf方法或valueOf返回引用类型则接着判断是否有toString方法如果有的话根据其返回值做出不同的反映
返回值为symbol类型报错
返回值为引用类型报错
返回值y为其它非引用类型的y最终结果为String(y)
3 如果没有toString方法则返回Object.prototype.toString,call(x) 假值
也就是不能通过if()判断的值 false
0
-0
NaN
null
undefined
Boolean(false)
这些易混淆的是真值可以通过if判断
![]
!({})
!123n
!Symbol(0)
!Object(false) || ??
|| 和 ??的作用相同都是代表“或”的意思。??只对undefined和null生效当输出
0 ?? 20时执行结果为0不是20。 isNaN和Number.isNaN的区别
isNaN的作用是检查其参数是否是非数字值如果是则返回true反之false。
Number.isNaN的作用是判断传递的值是否为 NaN并且检查其类型是否为 Number。
如果值为 NaN 且类型为 Number则返回 true否则返回 false。 Object.is(a,b)的判断机制是
检查是否符合两种特例如果不符合则直接返回ab的结果
特例一a和b都是NaN此时应该返回true
特例二a和b都是0只不过一个为正一个为负此时需要返回false
手写Object.is
ps: 1 / Infinity 0;的结果是true.
function myObjectIs (a, b) { if(Number.isNaN(a) Number.isNaN(b)) return true; if(a0 b0 1/a!1/b) return false; return ab;
} (123).toString(16) //输出’7b type和interface的区别
对象扩展的情况下使用接口继承比交叉类型的性能更好。
interface可以重复申明Type不可以重复申明
继承方式不一样interface使用extends实现
Type使用交叉类型方式。 1px
有些设备显示的1px会有点粗并没有显示真正1px的效果。是因为不同的设备之间有一个比例关系。
window.devicePixelRatio 设备的物理像素 / CSS像素
像在浏览器里面输出为2在移动端则输出是3。
输出的结果是几就证明该设备是用几个物理像素单元来进行渲染的。
解决方案就是按比例缩小值。例如
#container[data-device2] { border:0.5px solid #333
} CDN
内容分发网络同过互联网互相连接的电脑网络系统利用最近的服务器进行传递文件等。组成部分
分发服务系统 最基本的工作单元就是Cache设备cache边缘cache负责直接响应最终用户的访问请求把缓存在本地的内容快速地提供给用户。同时cache还负责与源站点进行内容同步把更新的内容以及本地没有的内容从源站点获取并保存在本地。Cache设备的数量、规模、总服务能力是衡量一个CDN系统服务能力的最基本的指标。
负载均衡系统 主要功能是负责对所有发起服务请求的用户进行访问调度确定提供给用户的最终实际访问地址。两级调度体系分为全局负载均衡GSLB和本地负载均衡SLB。全局负载均衡主要根据用户就近性原则通过对每个服务节点进行“最优”判断确定向用户提供服务的cache的物理位置。本地负载均衡主要负责节点内部的设备负载均衡
运营管理系统 运营管理系统分为运营管理和网络管理子系统负责处理业务层面的与外界系统交互所必须的收集、整理、交付工作包含客户管理、产品管理、计费管理、统计分析等功能。 提高webpack打包速度的方法
1优化loader因为Babel将代码转为字符串生成ASTAST生成新代码项目越大转换的代码越多效率越低。
方法
1.缩小优化范围只优化src文件夹下的内容。
module.exports { module: { rules: [ { // js 文件才使用 babel test: /\.js$/, loader: babel-loader, // 只在 src 文件夹下查找 include: [resolve(src)], // 不会去查找的路径 exclude: /node_modules/ } ] }
} 2.缓存已编译的内容下次只需要编译新的代码文件即可。
loader: babel-loader?cacheDirectorytrue 2webpack打包是单线程的HappyPAck可以把loader的同步改成并行的。
module: { loaders: [ { test: /\.js$/, include: [resolve(src)], exclude: /node_modules/, // id 后面的内容对应下面 loader: happypack/loader?idhappybabel } ]
},
plugins: [ new HappyPack({ id: happybabel, loaders: [babel-loader?cacheDirectory], // 开启 4 个线程 threads: 4 })
] 3DllPlugin将特定的类库提前打包然后引入减少打包类库的次数更新版本才重新打包。
4代码压缩webpack3中使用UglifyJS但这个是单线程的使用webpack-parallel-uglify-plugin 来并行运行 UglifyJS从而提高效率。
webpack4中直接将mode设置为production默认开启上面的功能。 Promise有三种状态
pending待处理fulfilled成功rejected失败。
当Promise对象被创建时初始状态为pending。成功完成异步操作后状态变为fulfilled。异步操作失败时状态变为rejected。 预防XSS攻击
1.使用CSP
CSP 指的是内容安全策略它的本质是建立一个白名单告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则如何拦截由浏览器自己来实现。
通常有两种方式来开启 CSP一种是设置 HTTP 首部中的 Content-Security-Policy一种是设置 meta 标签的方式
2.不使用服务端渲染/对需要插入到 HTML 中的代码做好充分的转义
3.对敏感信息进行保护比如cookie使用http-only让脚本无法获取。或者使用验证码避免让脚本伪装成用户执行操作。 CSRF攻击
“跨站请求伪造”攻击引诱用户点击第三方网站然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态那么攻击者就可以利用这个登录状态绕过后台的用户验证冒充用户向服务器执行一些操作。本质是利用cookie会在同源请求中携带发送给服务器的特点冒充用户。
类型
GET 类型的 CSRF 攻击比如在网站中的一个 img 标签里构建一个请求当用户打开这个网站的时候就会自动发起提交。
POST 类型的 CSRF 攻击比如构建一个表单然后隐藏它当用户进入页面时自动提交这个表单。
链接类型的 CSRF 攻击比如在 a 标签的 href 属性里构建一个请求然后诱导用户去点击。
预防攻击
使用Token验证在每个表单中添加一个独特的Token并将其与用户的会话相关联。当用户提交表单时服务器会验证Token的有效性以确保请求是合法的。
检查Referer头服务器可以检查请求的Referer头确保请求来自与当前网站相同的源。然而这种方法并不可靠因为Referer头可以被篡改或禁用。
使用双重Cookie验证除了常规的会话Cookie之外服务器还可以在用户浏览器中设置一个额外的Cookie并将其值与会话相关联。当用户提交请求时服务器会验证这两个Cookie的值是否匹配以确保请求是合法的。
启用CSRF保护框架使用专门的CSRF保护框架如OWASP CSRFGuard或 Django CSRF Middleware可以自动处理CSRF攻击的防御减轻开发人员的负担。 防抖和节流
防抖就是多次触发只执行最后一次节流就是规定时间内只触发一次。 对项目中的图片进行优化
1.对没必要的装饰作用的图片用CSS实现
2.移动端一般使用CDN加载计算出适配屏幕的宽度请求相应裁好的图片。
3.小图使用base64格式。
4.将图标文件整合到一张雪碧图中通过CSS调整位置进行使用。
5.对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法能带来更小的图片体积而且拥有肉眼识别无差异的图像质量缺点就是兼容性并不好有些国内的浏览器并不支持WebP格式的图片。
小图使用 PNG其实对于大部分图标这类图片完全可以使用 SVG 代替。
照片使用 JPEG。 三栏布局的实现
左右两边宽度固定使用绝对定位中间部分自适应中间设置margin-left/right的不同值达到对应的要求也可以设置flex1占据剩余空间。 圣杯和双飞翼布局区别
共同点在于都实现了三栏布局并且中间部分内容写在前面先渲染这部分内容。主要的不同之处就是在解决中间部分被挡住的问题时采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right再给左右两边的内容设置position为relative通过左移和右移来使得左右两边的内容得以很好的展现而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容在给这个中间的div设置margin-left和margin-right 。 H5新特性
语义化标签: header、footer、nav、section、article、aside 等
增强型表单date(从一个日期选择器选择一个日期) 、email(包含 e-mail 地址的输入域) 、number(数值的输入域) 、range(一定范围内数字值的输入域) 、search(用于搜索域) 、tel(定义输入电话号码字段) 等
视频和音频audio、video
Canvas绘图、 SVG绘图
地理定位Geolocation
拖放APIdrag
web worker是运行在后台的 JavaScript独立于其他脚本不会影响页面的性能
web storage: localStorage、sessionStorage
WebSocket: HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 SVG和CANVAS的区别
1.svg是矢量图canvas是像素图。
2.svg适用于静态图形canvas适用于动态图形创建大量图形对象和复杂动画。
3.svg的每个绘制元素都是一个独立的DOM元素轻松和javascript交互。canvas中所有绘制都放置在一个画布中只能和像素级别交互。 style标签prefetch和preload区别
style标签的prefetch和preload属性都用于优化CSS资源的加载但它们有不同的行为和目的
prefetch属性告诉浏览器这个CSS资源可能在未来的某个时刻需要被加载但并不需要立即加载。浏览器会在空闲时间异步加载这个资源以便在需要时能够立即使用。prefetch适用于那些当前不需要但是可能在未来会需要使用的资源。
preload属性则告诉浏览器这个CSS资源在当前页面中必须被使用因此应该立即加载和执行。浏览器会在主HTML文档下载和解析完成之前加载这个资源。preload适用于那些当前需要使用的资源。 defer 和 async 都是用于脚本加载和执行的关键字主要区别
1. defer 脚本会在 HTML 文档解析完成后执行而 async 脚本会在下载完毕后立即执行。
2. defer 脚本会按照它们在文档中的顺序执行而 async 脚本是在下载完成后尽快执行可能会打乱它们在文档中的顺序。
3. defer 脚本会在 DOMContentLoaded 事件之后运行而 async 脚本则不一定。
因此如果需要按顺序执行脚本并且不想阻塞 DOM 的解析可以使用 defer。如果脚本的执行不依赖于其他脚本或 DOM可以使用 async 加快加载速度。 link 和 import的区别
link是HTML标签 在页面载入时同时加载 可以在文档任何地方定义 可以同时加载多个外部样式表 支持添加一些额外属性如media、title等 支持动态插入
import是CSS提供的一种方式 页面载入完成后加载 只能在样式表里面定义 必须一条一条执行 不支持附加功能 不支持动态插入 块格式化上下文Block Formatting Context、工作原理以及形成条件
块格式化上下文Block Formatting ContextBFC是一个独立的渲染区域在这个区域内元素的布局和外部元素互不影响。BFC是 Web 页面布局中的一种重要机制主要用于控制块级元素的布局及其内部元素的排列方式。
BFC的工作原理
1. 内部的块级盒子会在垂直方向一个接一个放置。
2. 块级盒子的垂直间距margin会发生折叠。相邻的块级盒子的上下外边距会取最大值而非相加。
3. BFC的区域不会与浮动盒子重叠。在计算布局时BFC会考虑浮动元素的占用空间从而避免与浮动元素重叠。
4. 计算BFC的高度时浮动元素也参与计算。
5. BFC是一个独立的容器外部元素对其内部元素布局没有影响同样BFC内部元素的布局也不会影响外部元素。
形成BFC的条件
要创建一个BFC需要满足以下条件之一
1. 根元素html。
2. 浮动元素float属性为left或right。
3. 绝对定位元素position属性为absolute或fixed。
4. 内联块display属性为inline-block。
5. 表格单元格display属性为table-cell。
6. 表格标题display属性为table-caption。
7. 匿名表格单元格display属性为table、table-row、table-row-group、table-header-group、table-footer-group、table-column、table-column-group。
8. 元素的overflow属性值不为visible例如auto、scroll、hidden。
9. 弹性盒子display属性为flex或inline-flex。
10. 网格容器display属性为grid或inline-grid。
11. 多列容器column-count或column-width属性不为auto。
12. contain属性值为layout、paint或strict。
通过满足以上条件之一可以创建BFC实现独立渲染区域。在实际应用中BFC有助于解决外边距折叠、浮动元素引起的布局问题等。 什么是变量提升
变量提升就是变量和函数申明在内部的任何位置都会被提升到它们所在的作用域的顶部但是提升的作用仅仅在于声明不会影响赋值和初始化提升之后该变量被认为是“undefined”只有运行到后面的赋值语句后才能被赋准确的值。只有var可以被提升。函数声明也会被提升并且优先级高于变量。如果一个函数和一个变量同名且变量未被赋值那么该名称指向函数。 mouseover/mouseout 与 mouseenter/mouseleave 的区别与联系
mouseover和mouseout是HTML DOM事件它们会在鼠标移入或移出元素时触发。它们也会在鼠标指针进入或离开**子元素**时触发。这也就是说如果在父元素上有mouseover事件并且鼠标指针进入子元素则该元素上仍然会触发mouseover事件。mouseout同理。
mouseenter和mouseleave事件也是在鼠标进入或离开元素时触发。与mouseover和mouseout不同的是mouseenter和mouseleave事件**不会传播到子元素**。因此如果鼠标指针进入或离开元素的子元素则不会触发mouseenter和mouseleave事件。 event.stopPropagation()与event.stopImmediatePropagation的区别
event.stopPropagation()可以阻止事件冒泡到父元素但不阻止其他事件处理程序的执行。而event.stopImmediatePropagation()可以立即阻止事件冒泡并取消同一元素上其他事件处理程序的执行。 事件循环机制Event Loop
1.javascript引擎执行全局同步代码script)
2.遇到异步操作先把它们的毁掉函数按照类别放到微任务队列或者宏任务队列中。
3.同步代码执行完后先去转去执行微任务队列中的事件直到微任务队列为空。
4.开始执行宏任务队列中的第一个宏任务执行完后去检查微任务队列中是否有微任务有的话全部执行没有则转去执行宏任务队列中的任务以此类推直到完成两个队列中的所有任务。
5.事件循环等待新的任务。开启1-4的步骤。
事件循环的目标是在处理同步代码和异步回调之间保持平衡确保 JavaScript 代码的执行效率和响应能力。通过这种方式事件循环允许 JavaScript 在单线程环境中有效地处理并发操作。 javascript栈内存和堆内存
1. 栈内存Stack Memory - 栈内存主要用于存储基本类型原始类型的值如 number、string、boolean、null 和 undefined。这些类型的值通常较小且固定大小。 - 栈内存还负责存储函数调用的执行上下文、局部变量和临时数据。 - 栈内存遵循后进先出LIFO的原则进行分配和释放空间。当函数被调用时函数的执行上下文、局部变量和相关信息会被压入栈中当函数返回时这些数据会从栈中弹出。 - 栈内存的分配和回收速度较快因为内存管理由 JavaScript 引擎自动完成。 - 由于栈内存有限如果递归调用过深或者分配大量的局部变量可能导致栈溢出。
2. 堆内存Heap Memory - 堆内存主要用于存储引用类型的值如对象object、数组array和函数function。这些类型的值通常较大大小不固定。 - JavaScript 引擎使用垃圾回收机制自动管理堆内存中的对象。当对象不再被引用时它们会被标记为垃圾并在下一次垃圾回收时释放内存。 - 与栈内存相比堆内存分配和回收速度较慢因为需要管理更复杂的数据结构和垃圾回收机制。 - 堆内存可以动态分配因此可以存储更多数据。 - 如果没有正确处理引用关系可能导致内存泄漏。
总结一下在 JavaScript 中栈内存用于存储基本类型的值、函数调用的执行上下文和局部变量堆内存用于存储引用类型的值。 箭头函数的this是根据声明的位置确定的而不是调用的位置因此是申明时决定的这个特性被称为“词法/静态作用域”。 严格模式strict mode和非严格模式sloppy mode的主要区别
1. 变量声明 在严格模式下必须明确地声明变量使用let、const或var关键字。否则将会抛出一个引用错误ReferenceError。在非严格模式下如果没有声明变量JavaScript会自动将其声明为全局变量这可能会导致意外的全局污染。
2. this指针 在严格模式下全局作用域中的this值为undefined。在非严格模式下全局作用域中的this值为全局对象浏览器环境中为window对象Node.js环境中为global对象。此外在严格模式下不允许使用call、apply或bind将this值设置为null或undefined。
3. 禁止使用未来保留字 严格模式中不能将一些未来保留字如implements、interface、let、package、private、protected、public、static和yield用作变量名或函数名。
4. 禁止使用八进制字面量 在严格模式下不允许使用八进制字面量如0123。非严格模式下八进制字面量是允许的。
5. 禁止删除变量、函数和函数参数 严格模式中使用delete操作符删除变量、函数和函数参数会引发语法错误SyntaxError。在非严格模式下这样的操作是允许的但实际上不会删除这些对象。
6. 限制函数参数的重复声明 在严格模式下如果一个函数具有多个相同名称的参数将会抛出一个语法错误。非严格模式下允许这种重复声明但只有最后一个参数值会生效。
7. 错误处理 严格模式相较于非严格模式更严格地处理某些类型的错误。例如当试图修改只读属性、给不可扩展的对象添加属性或删除不可配置的属性时严格模式会抛出类型错误TypeError而非严格模式下则会静默失败。
要启用严格模式可以在脚本或函数开头添加use strict;指令。这将对整个脚本或函数体中的代码启用严格模式。推荐使用严格模式编写代码因为它可以帮助发现潜在的错误并避免一些不良的编程实践。 为什么0.10.2不等于0.3
浮点数精度问题。JavaScript使用IEEE 754标准中规定的双精度浮点数double-precision floating point来表示数字。这种表示方法在大多数情况下都很有效但有时会导致精度损失。
双精度浮点数只有有限的位数64位来表示数字其中1位表示符号位11位表示指数以及52位表示尾数。当尝试表示某些数字特别是十进制小数时它们的二进制表示可能是无限循环的因此需要截断以适应有限的位数。这可能导致浮点数的近似值与实际值之间存在微小差异。
在本例中0.1和0.2的二进制表示都是无限循环的需要截断。当它们被截断并以双精度浮点数存储时这两个数字的实际值与理论值略有不同。因此当执行0.1 0.2时结果也会有微小误差与0.3的理论值不完全相等。
