网站建设意见,随州市网站建设,国际要闻头条最新,wordpress 网站锁HTTP世界全览 互联网上绝大部分资源都使用 HTTP 协议传输#xff1b;浏览器是 HTTP 协议里的请求方#xff0c;即 User Agent#xff1b;服务器是 HTTP 协议里的应答方#xff0c;常用的有 Apache 和 Nginx#xff1b;CDN 位于浏览器和服务器之间#xff0c;主要起到缓存…HTTP世界全览 互联网上绝大部分资源都使用 HTTP 协议传输浏览器是 HTTP 协议里的请求方即 User Agent服务器是 HTTP 协议里的应答方常用的有 Apache 和 NginxCDN 位于浏览器和服务器之间主要起到缓存加速的作用爬虫是另一类 User Agent是自动访问网络资源的程序。TCP/IP 是网络世界最常用的协议HTTP 通常运行在 TCP/IP 提供的可靠传输基础上DNS 域名是 IP 地址的等价替代需要用域名解析实现到 IP 地址的映射URI 是用来标记互联网上资源的一个名字由“协议名 主机名 路径”构成俗称 URLHTTPS 相当于“HTTPSSL/TLSTCP/IP”为 HTTP 套了一个安全的外壳代理是 HTTP 传输过程中的“中转站”可以实现缓存加速、负载均衡等功能
协商缓存和强缓存的区别
1强缓存
使用强缓存策略时如果缓存资源有效则直接使用缓存资源不必再向服务器发起请求。
强缓存策略可以通过两种方式来设置分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。
1服务器通过在响应头中添加 Expires 属性来指定资源的过期时间。在过期时间以内该资源可以被缓存使用不必再向服务器发送请求。这个时间是一个绝对时间它是服务器的时间因此可能存在这样的问题就是客户端的时间和服务器端的时间不一致或者用户可以对客户端时间进行修改的情况这样就可能会影响缓存命中的结果。
2Expires 是 http1.0 中的方式因为它的一些缺点在 HTTP 1.1 中提出了一个新的头部属性就是 Cache-Control 属性它提供了对资源的缓存的更精确的控制。它有很多不同的值
Cache-Control可设置的字段
public设置了该字段值的资源表示可以被任何对象包括发送请求的客户端、代理服务器等等缓存。这个字段值不常用一般还是使用max-age来精确控制private设置了该字段值的资源只能被用户浏览器缓存不允许任何代理服务器缓存。在实际开发当中对于一些含有用户信息的HTML通常都要设置这个字段值避免代理服务器(CDN)缓存no-cache设置了该字段需要先和服务端确认返回的资源是否发生了变化如果资源未发生变化则直接使用缓存好的资源no-store设置了该字段表示禁止任何缓存每次都会向服务端发起新的请求拉取最新的资源max-age设置缓存的最大有效期单位为秒s-maxage优先级高于max-age仅适用于共享缓存(CDN)优先级高于max-age或者Expires头max-stale[]设置了该字段表明客户端愿意接收已经过期的资源但是不能超过给定的时间限制。
一般来说只需要设置其中一种方式就可以实现强缓存策略当两种方式一起使用时Cache-Control 的优先级要高于 Expires。
no-cache和no-store很容易混淆
no-cache 是指先要和服务器确认是否有资源更新在进行判断。也就是说没有强缓存但是会有协商缓存no-store 是指不使用任何缓存每次请求都直接从服务器获取资源。
2协商缓存
如果命中强制缓存我们无需发起新的请求直接使用缓存内容如果没有命中强制缓存如果设置了协商缓存这个时候协商缓存就会发挥作用了。
上面已经说到了命中协商缓存的条件有两个
max-agexxx 过期了值为no-store
使用协商缓存策略时会先向服务器发送一个请求如果资源没有发生修改则返回一个 304 状态让浏览器使用本地的缓存副本。如果资源发生了修改则返回修改后的资源。
协商缓存也可以通过两种方式来设置分别是 http 头信息中的Etag 和Last-Modified属性。
1服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间当浏览器下一次发起请求时会在请求头中添加一个 If-Modified-Since 的属性属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较以此来判断资源是否做了修改。如果资源没有修改那么返回 304 状态让客户端使用本地的缓存。如果资源已经被修改了则返回修改后的资源。使用这种方法有一个缺点就是 Last-Modified 标注的最后修改时间只能精确到秒级如果某些文件在1秒钟以内被修改多次的话那么文件已将改变了但是 Last-Modified 却没有改变这样会造成缓存命中的不准确。
2因为 Last-Modified 的这种可能发生的不准确性http 中提供了另外一种方式那就是 Etag 属性。服务器在返回资源的时候在头信息中添加了 Etag 属性这个属性是资源生成的唯一标识符当资源发生改变的时候这个值也会发生改变。在下一次资源请求时浏览器会在请求头中添加一个 If-None-Match 属性这个属性的值就是上次返回的资源的 Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进行比较以此来判断资源是否发生改变是否需要返回资源。通过这种方式比 Last-Modified 的方式更加精确。
当 Last-Modified 和 Etag 属性同时出现的时候Etag 的优先级更高。使用协商缓存的时候服务器需要考虑负载平衡的问题因此多个服务器上资源的 Last-Modified 应该保持一致因为每个服务器上 Etag 的值都不一样因此在考虑负载平衡时最好不要设置 Etag 属性。
总结
强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时都会向服务器发送请求来获取资源。在实际的缓存机制中强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断强缓存是否命中如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求使用协商缓存如果协商缓存命中的话则服务器不返回资源浏览器直接使用本地资源的副本如果协商缓存不命中则浏览器返回最新的资源给浏览器。
JS 整数是怎么表示的
通过 Number 类型来表示遵循 IEEE754 标准通过 64 位来表示一个数字1 11 52最大安全数字是 Math.pow(2, 53) - 1对于 16 位十进制。符号位 指数位 小数部分有效位
浏览器的垃圾回收机制
1垃圾回收的概念
垃圾回收JavaScript代码运行时需要分配内存空间来储存变量和值。当变量不在参与运行时就需要系统收回被占用的内存空间这就是垃圾回收。
回收机制
Javascript 具有自动垃圾回收机制会定期对那些不再使用的变量、对象所占用的内存进行释放原理就是找到不再使用的变量然后释放掉其占用的内存。JavaScript中存在两种变量局部变量和全局变量。全局变量的生命周期会持续要页面卸载而局部变量声明在函数中它的生命周期从函数执行开始直到函数执行结束在这个过程中局部变量会在堆或栈中存储它们的值当函数执行结束后这些局部变量不再被使用它们所占有的空间就会被释放。不过当局部变量被外部函数使用时其中一种情况就是闭包在函数执行结束后函数外部的变量依然指向函数内部的局部变量此时局部变量依然在被使用所以不会回收。
2垃圾回收的方式
浏览器通常使用的垃圾回收方法有两种标记清除引用计数。 1标记清除
标记清除是浏览器常见的垃圾回收方式当变量进入执行环境时就标记这个变量“进入环境”被标记为“进入环境”的变量是不能被回收的因为他们正在被使用。当变量离开环境时就会被标记为“离开环境”被标记为“离开环境”的变量会被内存释放。垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作销毁那些带标记的值并回收他们所占用的内存空间。
2引用计数
另外一种垃圾回收机制就是引用计数这个用的相对较少。引用计数就是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时则这个值的引用次数就是1。相反如果包含对这个值引用的变量又取得了另外一个值则这个值的引用次数就减1。当这个引用次数变为0时说明这个变量已经没有价值因此在在机回收期下次再运行时这个变量所占有的内存空间就会被释放出来。这种方法会引起循环引用的问题例如 obj1和obj2通过属性进行相互引用两个对象的引用次数都是2。当使用循环计数时由于函数执行完后两个对象都离开作用域函数执行结束obj1和obj2还将会继续存在因此它们的引用次数永远不会是0就会引起循环引用。
function fun() {let obj1 {};let obj2 {};obj1.a obj2; // obj1 引用 obj2obj2.a obj1; // obj2 引用 obj1
}
这种情况下就要手动释放变量占用的内存
obj1.a nullobj2.a null
3减少垃圾回收
虽然浏览器可以进行垃圾自动回收但是当代码比较复杂时垃圾回收所带来的代价比较大所以应该尽量减少垃圾回收。
对数组进行优化 在清空一个数组时最简单的方法就是给其赋值为[ ]但是与此同时会创建一个新的空对象可以将数组的长度设置为0以此来达到清空数组的目的。对object进行优化 对象尽量复用对于不再使用的对象就将其设置为null尽快被回收。对函数进行优化 在循环中的函数表达式如果可以复用尽量放在函数的外面。
什么是同源策略
跨域问题其实就是浏览器的同源策略造成的。 同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是协议、端口号、域名必须一致。 同源策略protocol协议、domain域名、port端口三者必须一致。
同源政策主要限制了三个方面
当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。当前域下 ajax 无法发送跨域请求。
同源政策的目的主要是为了保证用户的信息安全它只是对 js 脚本的一种限制并不是对浏览器的限制对于一般的 img、或者script 脚本请求都不会有跨域的限制这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。
请实现 DOM2JSON 一个函数可以把一个 DOM 节点输出 JSON 的格式
题目描述:
divspana/a/spanspana/aa/a/span
/div把上诉dom结构转成下面的JSON格式{tag: DIV,children: [{tag: SPAN,children: [{ tag: A, children: [] }]},{tag: SPAN,children: [{ tag: A, children: [] },{ tag: A, children: [] }]}]
}
实现代码如下:
function dom2Json(domtree) {let obj {};obj.name domtree.tagName;obj.children [];domtree.childNodes.forEach((child) obj.children.push(dom2Json(child)));return obj;
} 扩展思考:如果给定的不是一个 Dom 树结构 而是一段 html 字符串 该如何解析? 那么这个问题就类似 Vue 的模板编译原理 我们可以利用正则 匹配 html 字符串 遇到开始标签 结束标签和文本 解析完毕之后生成对应的 ast 并建立相应的父子关联 不断的 advance 截取剩余的字符串 直到 html 全部解析完毕
参考 前端进阶面试题详细解答
代码输出结果
var a 10
var obj {a: 20,say: () {console.log(this.a)}
}
obj.say() var anotherObj { a: 30 }
obj.say.apply(anotherObj)
输出结果10 10
我么知道箭头函数时不绑定this的它的this来自原其父级所处的上下文所以首先会打印全局中的 a 的值10。后面虽然让say方法指向了另外一个对象但是仍不能改变箭头函数的特性它的this仍然是指向全局的所以依旧会输出10。
但是如果是普通函数那么就会有完全不一样的结果
var a 10
var obj { a: 20, say(){console.log(this.a) }
}
obj.say()
var anotherObj{a:30}
obj.say.apply(anotherObj)
输出结果20 30
这时say方法中的this就会指向他所在的对象输出其中的a的值。
实现一个宽高自适应的正方形
利用vw来实现
.square {width: 10%;height: 10vw;background: tomato;
}
利用元素的margin/padding百分比是相对父元素width的性质来实现
.square {width: 20%;height: 0;padding-top: 20%;background: orange;
}
利用子元素的margin-top的值来实现
.square {width: 30%;overflow: hidden;background: yellow;
}
.square::after {content: ;display: block;margin-top: 100%;
}
label 的作用是什么如何使用
label标签来定义表单控件的关系当用户选择label标签时浏览器会自动将焦点转到和label标签相关的表单控件上。
使用方法1
label formobileNumber:/label
input typetext idmobile/
使用方法2
labelDate:input typetext//label
对盒模型的理解
CSS3中的盒模型有以下两种标准盒子模型、IE盒子模型 盒模型都是由四个部分组成的分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时所对应的范围不同
标准盒模型的width和height属性的范围只包含了contentIE盒模型的width和height属性的范围包含了border、padding和content。
可以通过修改元素的box-sizing属性来改变元素的盒模型
box-sizeing: content-box表示标准盒模型默认值box-sizeing: border-box表示IE盒模型怪异盒模型
浏览器的渲染过程
浏览器渲染主要有以下步骤
首先解析收到的文档根据文档定义构建一棵 DOM 树DOM 树是由 DOM 元素及属性节点组成的。然后对 CSS 进行解析生成 CSSOM 规则树。根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象渲染对象是一个包含有颜色和大小等属性的矩形渲染对象和 DOM 元素相对应但这种对应关系不是一对一的不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象它们一般是一些具有复杂结构的元素无法用一个矩形来描述。当渲染对象被创建并添加到树中它们并没有位置和大小所以当浏览器生成渲染树以后就会根据渲染树来进行布局也可以叫做回流。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。布局阶段结束后是绘制阶段遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上绘制使用 UI 基础组件。
大致过程如图所示
注意 这个过程是逐步完成的为了更好的用户体验渲染引擎将会尽可能早的将内容呈现到屏幕上并不会等到所有的html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容同时可能还在通过网络下载其余内容。
什么情况会阻塞渲染
首先渲染的前提是生成渲染树所以 HTML 和 CSS 肯定会阻塞渲染。如果你想渲染的越快你越应该降低一开始需要渲染的文件大小并且扁平层级优化选择器。然后当浏览器在解析到 script 标签时会暂停构建 DOM完成后才会从暂停的地方重新开始。也就是说如果你想首屏渲染的越快就越不应该在首屏就加载 JS 文件这也是都建议将 script 标签放在 body 标签底部的原因。
当然在当下并不是说 script 标签必须放在底部因为你可以给 script 标签添加 defer 或者 async 属性。当 script 标签加上 defer 属性以后表示该 JS 文件会并行下载但是会放到 HTML 解析完成后顺序执行所以对于这种情况你可以把 script 标签放在任意位置。对于没有任何依赖的 JS 文件可以加上 async 属性表示 JS 文件下载和解析不会阻塞渲染。
对媒体查询的理解
媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成例如宽度、⾼度和颜⾊。媒体查询添加⾃CSS3允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪⽽不必改变内容本身适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。
媒体查询包含⼀个可选的媒体类型和满⾜CSS3规范的条件下包含零个或多个表达式这些表达式描述了媒体特征最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型并且所有的表达式的值都是true那么该媒体查询的结果为true。那么媒体查询内的样式将会⽣效。
!-- link元素中的CSS媒体查询 --
link relstylesheet media(max-width: 800px) hrefexample.css /
!-- 样式表中的CSS媒体查询 --
style
media (max-width: 600px) { .facet_sidebar { display: none; } }
/style
简单来说使用 media 查询可以针对不同的媒体类型定义不同的样式。media 可以针对不同的屏幕尺寸设置不同的样式特别是需要设置设计响应式的页面media 是非常有用的。当重置浏览器大小的过程中页面也会根据浏览器的宽度和高度重新渲染页面。
代码输出结果
var F function() {};
Object.prototype.a function() {console.log(a);
};
Function.prototype.b function() {console.log(b);
}
var f new F();
f.a();
f.b();
F.a();
F.b()
输出结果
a
Uncaught TypeError: f.b is not a function
a
b
解析
f 并不是 Function 的实例因为它本来就不是构造函数调用的是 Function 原型链上的相关属性和方法只能访问到 Object 原型链。所以 f.a() 输出 a 而 f.b() 就报错了。F 是个构造函数而 F 是构造函数 Function 的一个实例。因为 F instanceof Object trueF instanceof Function true由此可以得出结论F 是 Object 和 Function 两个的实例即 F 能访问到 a 也能访问到 b。所以 F.a() 输出 a F.b() 输出 b。
对 CSSSprites 的理解
CSSSprites精灵图将一个页面涉及到的所有图片都包含到一张大图中去然后利用CSS的 background-imagebackground-repeatbackground-position属性的组合进行背景定位。
优点
利用CSS Sprites能很好地减少网页的http请求从而大大提高了页面的性能这是CSS Sprites最大的优点CSS Sprites能减少图片的字节把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
缺点
在图片合并时要把多张图片有序的、合理的合并成一张图片还要留好足够的空间防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面如果背景不够宽很容易出现背景断裂CSSSprites在开发的时候相对来说有点麻烦需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。维护方面CSS Sprites在维护的时候比较麻烦页面背景有少许改动时就要改这张合并的图片无需改的地方尽量不要动这样避免改动更多的CSS如果在原来的地方放不下又只能最好往下加图片这样图片的字节就增加了还要改动CSS。
如何⽤webpack来优化前端性能
⽤webpack优化前端性能是指优化webpack的输出结果让打包的最终结果在浏览器运⾏快速⾼效。
压缩代码删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件 利⽤ cssnano css-loader?minimize来压缩css利⽤CDN加速: 在构建过程中将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码
代码输出结果
// a
function Foo () {getName function () {console.log(1);}return this;
}
// b
Foo.getName function () {console.log(2);
}
// c
Foo.prototype.getName function () {console.log(3);
}
// d
var getName function () {console.log(4);
}
// e
function getName () {console.log(5);
}Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1
getName(); // 1
new Foo.getName(); // 2
new Foo().getName(); // 3
new new Foo().getName(); // 3
输出结果2 4 1 1 2 3 3
解析
Foo.getName() Foo为一个函数对象对象都可以有属性b 处定义Foo的getName属性为函数输出2getName() 这里看d、e处d为函数表达式e为函数声明两者区别在于变量提升函数声明的 5 会被后边函数表达式的 4 覆盖** Foo().getName()** 这里要看a处在Foo内部将全局的getName重新赋值为 console.log(1) 的函数执行Foo()返回 this这个this指向windowFoo().getName() 即为window.getName()输出 1getName() 上面3中全局的getName已经被重新赋值所以这里依然输出 1new Foo.getName() 这里等价于 new (Foo.getName())先执行 Foo.getName()输出 2然后new一个实例new Foo().getName() 这 里等价于 (new Foo()).getName(), 先new一个Foo的实例再执行这个实例的getName方法但是这个实例本身没有这个方法所以去原型链__protot__上边找实例.protot Foo.prototype所以输出 3new new Foo().getName() 这里等价于new (new Foo().getName())如上述6先输出 3然后new 一个 new Foo().getName() 的实例。
::before 和 :after 的双冒号和单冒号有什么区别
1冒号(:)用于CSS3伪类双冒号(::)用于CSS3伪元素。 2::before就是以一个子元素的存在定义在元素主体内容之前的一个伪元素。并不存在于dom之中只存在在页面之中。
注意 :before 和 :after 这两个伪元素是在CSS2.1里新出现的。起初伪元素的前缀使用的是单冒号语法但随着Web的进化在CSS3的规范里伪元素的语法被修改成使用双冒号成为::before、::after。
代码输出结果
var myObject {foo: bar,func: function() {var self this;console.log(this.foo); console.log(self.foo); (function() {console.log(this.foo); console.log(self.foo); }());}
};
myObject.func();
输出结果bar bar undefined bar
解析
首先func是由myObject调用的this指向myObject。又因为var self this;所以self指向myObject。这个立即执行匿名函数表达式是由window调用的this指向window 。立即执行匿名函数的作用域处于myObject.func的作用域中在这个作用域找不到self变量沿着作用域链向上查找self变量找到了指向 myObject对象的self。
浏览器乱码的原因是什么如何解决
产生乱码的原因
网页源代码是gbk的编码而内容中的中文字是utf-8编码的这样浏览器打开即会出现html乱码反之也会出现乱码html网页编码是gbk而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码浏览器不能自动检测网页编码造成网页乱码。
解决办法
使用软件编辑HTML网页内容如果网页设置编码是gbk而数据库储存数据编码格式是UTF-8此时需要程序查询数据库数据显示数据前进程序转码如果浏览器浏览时候出现网页乱码在浏览器中找到转换编码的菜单进行转换。
