前端200道面试题及答案（更新中）

1）说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？
1. session 是一个后端存储空间
  2. cookie / localStorage / sessionStorage 的区别
  存储大小
  
  cookie 4kb
  localStorage 5M
  通讯相关
  
  cookie 随请求携带
  storage 不会自动携带
  操作相关
  
  cookie 操作复杂，没有 api，前后端都可以操作
  storage 操作简单，有 api，只能前端操作
  存储格式
  
  cookie：字符串格式
  storageL: 键值对
  时效相关
  
  cookie：默认会话级别，可以手动设置
  storage：localStorage的存储是永久性的，只有在手动删除或者浏览器被卸载后才会被清除，sessionStorage 是会话，当窗口或者页面关闭后会被清除
  3.loaclStorage 和 sessionStorage 的区别
  跨页面通讯能力
  localStorage 随便跨页面
  sessionStorage 只是在本页面跳转可以通讯
  时效性
  localStorage 是永久
  sessionStorage 是会话
  共同点
  不能存储其他数据类型，只能存储字符串数据类型
  如果一定要存储其他数据类型，转成 json 格式存储
2）link和@import的区别
1. 都知道，外部引入 CSS 有2种方式，link标签和@import。
  但是它们有何本质区别？
  本人项目中多数情况都使用link方式，但见过某些项目人，自以为@import高大上类似es6，极力吹捧使用@import，就此找了一些资料对此进行比较说明：
  先上结论
  慎用@import方式。可以避免考虑@import的语法规则和注意事项，以及不合理的引入顺序导致的资源文件下载顺序混乱和http请求过多。
  
  区别1：
  link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事物如引入网站标题图标；@import属于CSS范畴，只能加载CSS。
  <link rel="icon" type="image/x-icon" href="XXX.ico">
2. 区别2：
  link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。所以会出现一开始没有css样式，闪烁一下出现样式后的页面。
  
  区别3：
  link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  
  区别4：
  link支持使用Javascript控制DOM去改变样式；而@import不支持。
  
  顺便总结下在html中css有四种引入方式：
  
  内联样式
  内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效
  示例：<div style="background:red"></div>
  这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个
  
  拥有相同的样式，你不得不重复地为每个
  添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。
  嵌入样式
  嵌入方式也称页级CSS或内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。
  示例：
  
  嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。
  外部样式
  链接方式指的是使用 HTML 头部的标签引入外部的 CSS 文件。
  示例：
  
  这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。
  导入样式
  导入方式指的是使用 CSS 规则引入外部 CSS 文件。
  示例：
  
  或者写在css样式中
  
  @charset “utf-8”;
  @import url(style.css);
  *{ margin:0; padding:0;}
  .notice-link a{ color:#999;}
  
  HTML加载过程：
  　　　　1) 加载HTML-DOM结构
  
  2)CSS和JS
  
  3)图片和多媒体
  
  4)加载事件触发
  
  总结：　link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link永远比@import优先级高。
  
  在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。
3）浏览器如何实现不同标签页的通信？
1. 浏览器内多个标签页之间通信，通俗的讲就是浏览器中开了多个窗口，在其中一个窗口做了一些行为等其他窗口不用刷新也能有相关表现。
  
  一、cookie+setInterval方式
  要想在多个窗口中通信，通信的内容一定不能放在window对象中，因为window是当前窗口的作用域，里面的内容只属于当前窗口。而cookie是浏览器的本地存储机制，和窗口无关。
  
  将要发送的信息写入cookie：
```
 var msg = documet.querySelector('#msg');
 if(msg.value.trim() != ""){
 	docment.cookie = "msg=" + msg.value.trim();
 }
```
  在另一个页面读取cookie：
  
  var recMsg = document.querySelector('#recMsg');
  function getValue(key){
  var cookies = '{"'+document.cookie.replace(/=/g,'":"').replace(/;\s+/g,'", "')+'"}';
  cookies = JSON.parse(cookies);
  return cookies[key];
  }
  setInterval(function(){
  recMsg.innerHTML = getValue("msg1");
  },500);
  
  但是由于仅仅从cookie读取信息不能实时更新，需要手动刷新，因此采用setInterval定时器解决，将读取信息的代码封装成一个函数，在定时器内调用即可
  
  缺点：
  
  1）cookie空间有限，容量4k
  2）每次http请求都会把当前域的cookie发送到服务器上，浪费带宽
  3）setInterval评率设置过大会影响浏览器性能，过小会影响时效性
  
  优点：每个浏览器都兼容
  
  二、websocket协议
  websocket是一种网络通信协议，因为http有缺陷，通信只可以由客户端发起，服务器无法主动向客户端发送消息，但如果这时服务器有连续变化的状态，那么就只能使用轮询（每个一段时间，就发出一个询问）的方式来询问。因为websocket拥有全双工（full-duplex）通信自然可以实现多个标签页之间的通信。
  发送方先发送消息到WebSocketServer，然后服务端再实时把消息发给接收方
  
  用法：新建webSocket文件夹，在该目录下打开终端，运行npm init （npm安装及配置步骤）初始化一个简单的node项目（因为需要引入ws包），一直按回车到结束就初始了一个简单的node项目。再安装ws包，依旧在当前目录下的终端运行npm i -save ws，在webSocket目录下新建sever.js、send.html、reveive.html文件
  
  三、localstorage
  四、html5浏览器新特性——SharedWorker
  WebWorker的升级版，webworker只能在一个窗口内使用，而SharedWorker可以在多个窗口之间通信
  SharedWorker也是纯客户端的，没有服务端参与
  SharedWorker在客户端有一个自己维护的对象worker.js，消息存储在worker.js的data中
  SharedWorker不如localStorage的是接收消息不是自动的，也要用定时器实时从worker.js中获取消息
  
  原文链接：https://blog.csdn.net/jewfer/article/details/122614963
4）iframe的优缺点
1. 一、iframe的优点：
  1、　iframe能够原封不动地把嵌入的网页展现出来。
  
  2、　如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每一个页面内容的更改，方便快捷。
  
  3、　网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。
  
  4、　如果遇到加载缓慢的第三方内容如图标和广告等，可以用iframe来解决。
  
  二、iframe的缺点：
  1、　会产生很多页面，不容易管理。
  
  2、　在几个框架中都出现上下、左右滚动条时，这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。
  
  3、　使用框架结构时，必须保证正确设置所有的导航链接，否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下会导致链接死循环。
  
  4、　很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
  
  5、　iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
  
  现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。
5）canvas
1. Canvas介绍
  1.canvas是html5的一个新标签，属于h5的新特性
  2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo
  3.它是通过javascript来画的，即脚本绘制图形
  
  canvas可以用来干啥呢？
  1.制作web网页游戏（但是如果代码写的不咋的游戏可能会非常卡）
  2.数据可视化（这么说你可能不明白，但我告诉你echarts就是基于canvas）
  3.广告banner的动态效果非常适合用canvas制作
  4.canvas还可以用来内嵌一些网页
  
  原文链接https://blog.csdn.net/u012468376/article/details/73350998
6）做项目用到哪些h5新特性和css3新特性？
1. 1 HTML5 的新特性
  增加了新标签、新表单和新特性；
  IE9以上才兼容，如不考虑兼容问题，则可以大量使用（如移动端）；
  
  1 重点是常用新特性；
  1.1 HTML5 新增的语义化标签
  div 对于搜索引擎来说是没有语义的；
  
  header：头部标签
  nav：导航标签
  article：内容标签
  section：定义文档某个区域
  aside：侧边栏标签
  footer：尾部标签
  主要是针对搜索引擎的
  可以多次使用
  在IE9中需要转为块级元素才能使用
  1.2 HTML5 新增的多媒体标签
  1 音频：audio；
  有 MP3 Wav Ogg 三种格式；
  语法
  <audio src="文件地址" controls="controls"></audio>
  1
  属性
  autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）；
  controls controls 向用户显示播放器控件；
  loop loop 播放完是否继续循环播放
  src url
  Chrome 把音频和视频自动播放禁止了；
  2 视频：video；
  尽量使用 MP4；
  另外还有 Ogg 格式；
  语法：
  <video src="文件地址" controls="controls"></video>
  1
  属性
  autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）；
  controls controls 向用户显示播放器控件；
  width px
  height px
  loop loop 播放完是否继续循环播放
  preload auto（预先加载视频）| none（不应加载视频）
  src url
  poster Imgurl 加载等待的画面图片
  muted muted 静音播放
  视频静音后可以自动播放；
  从而不再使用flash等插件
  1.3 HTML5 新增的 input 类型
  验证的时候必须添加 form 表单域；
  使用 submit 进行提交；
  type="email"   限制用户输入必须为 Email 类型
  type="url"   限制用户输入必须为 URL 类型
  type="date"   限制用户输入必须为 date 类型
  type="time"   限制用户输入必须为 time 类型
  type="month"   限制用户输入必须为 month 类型
  type="week"   限制用户输入必须为 week 类型
  type="number"   限制用户输入必须为 number 类型
  type="tel"   限制用户输入必须为 tel 类型
  type="search"   限制用户输入必须为 search 类型
  type="color"   限制用户输入必须为 color 类型
  type="submit"   提交按钮
  1.4 HTML5 新增的表单属性
  属性   值   说明
  required   required   表单拥有该属性表示其内容不能为空，必填
  placeholder   提示文本   表单的提示信息，存在默认值将不显示
  autofocus   autofocus   自动聚焦属性，页面加载完成后聚焦到指定表单
  autocomplete   off/on   浏览器基于之前输入的值，显示出可能的选项，
  默认已经打开，关闭autocomplete="off"
  需要放在表单内，加上name属性，同时提交成功
  multiple   multiple   可以多选文件提交
``` /* 设置占位符颜色 */ input::placeholder { color: springgreen; } ```
2 CSS3
存在兼容性问题

2.1 属性选择器
属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者 id 选择器；
权重为 0, 0, 1, 0；
类选择器、属性选择器、伪类选择器权重相同；
input[name="username"] {
outline: none;
border: 3px solid skyblue;
}

选择符   简介
E[att]   匹配有 att 属性的 E 元素
E[att="val"]   匹配有 att 属性且属性等于 val 的 E 元素
E[att^="val"]   匹配有 att 属性且值以 val 开头的 E 元素
E[att$="val"]   匹配有 att 属性且值以 val 结尾的 E 元素
E[att*="val"]   匹配有 att 属性且值中含有 val 的 E 元素
2.2 结构伪类选择器
根据文档结构来选择元素，常用于根据父级选择器里面的子元素；
/* 选择第一个孩子，且必须是 li */
ul li:first-child {
color: red;
}

ul li:nth-child(2) {
color: red;
}

// 使用 even 选出奇数行
ul li:nth-child(even) {
background-color: red;
color: white;
}

ul li:nth-child(even) // 使用 even 选出奇数行
ul li:nth-child(odd) // 使用 odd 选出偶数行
ul li:nth-child(n) // n 是选择所有
n 可以被公示替代
2n 取出偶数项
2n + 1 取出奇数项
5n 取出 5 的倍数项
n + 5 从第五项开始
-n + 5 前五项
数字可以是任何数字
div:nth-child(n) 会包含所有标签类型，同时需要满足设置的标签类型，都满足方能选中；
div:nth-of-type(n) 只包含指定元素，如此处为div；
选择符   简介
E:first-child   匹配父元素中的第一个子元素 E
E:last-child   >匹配父元素中的最后一个子元素 E
E:nth-child(n)   >匹配父元素中的第 n 个子元素 E
E:first-of-type   指定类型 E 的第一个
E:last-of-type   指定类型 E 的最后一个
E:nth-of-type(n)   指定类型 E 的第 n 个
2.3 伪元素选择器
伪元素选择器可以用于利用 css 创建新标签元素，不需要 HTML 标签，从而简化 HTML 结构；

after 和 before 创建的元素是行内元素；

新创建的元素在文档树中是找不到的；

语法：element::before()；

after 和 before 必须有 content 属性；

伪元素选择器和标签选择器一样，权重为0, 0, 0, 1；

选择符   简介
::before   在元素内部的前面插入内容
::after   在元素内部的后面插入内容
div {
width: 200px;
height: 200px;
background-color: pink;
}

div::before {
/* content是必须要写的，元素内容 */
content: 'before 伪元素选择器';
}

div::after {
/* content是必须要写的，元素内容 */
content: 'after 伪元素选择器';
}

content 必须填写，可以写空字符串；

在伪元素中使用 iconfont：

@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1587189598280');
/* IE9 */
src: url('iconfont.eot?t=1587189598280#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJwAAsAAAAABiAAAAIjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAooRgE2AiQDCAsGAAQgBYRtBzIbbgXILrBt2JMiJESQDXTjExAAiOD5/b7Nue9+1bRqcaNJFE0LNDyRiFs3oa1TOqFoJv/9X7p0TKPyfLfcQ01/I//fmLm0hedxGiERBoSECkU85Jegb+7hAvs8l9ObQAdyV32gXPegNQYNoF4cUKB7YBRZCWXcMHbBC3xMoG5GQ+7k7HiBqsxeFYj3b7QB1UJAllm6KpQbDmbxWUk1PaVv4FP0/finF1WSUsGuuny5smH6i5NVPE4ePQSEIAEdL6HAFpCJ28bEuYJgXEE9UbQAjlUe/DKZBHZxVItgf51d2gRTMBn84q0UIMFjUYYbkzYR5Rf7pEf216s366Re+xcwRT8rDtKBHILvT23nf7WRwc97HpmzYS5Q3cwZfL5s4EA2FLYtZU3WOJ6UD9tWV8cE9vT9TTWOrpUJVaMJrorpDIWqJTKzWyhp2EZZ1T7qNm2ONwywgsg1bPgACF2fSNp+oND1Q2b2FyVj/yjrRoG6+xhc2LASb+rHH8gQstF8R9eKI+U6pB6Xn0jfA4Pzioi/EWduGLutTjm9oYh4iS3ZQ/dEFCqOQ1yD5ygIYkw49siSliOS9Ntt1fSmlhWHUHeMEYMgNmR6h1yWWEQFk0W98vkTot0FDNzRV5e+ISzjzo66WjoDyI02GtT3KK9kHrQeIRSksFgIrcE8EgjEUNI8z0MsosWZEEv0tZ1Raqi2tb0+/LtTUGebUjg1herHN0akfQsAAAAA') format('woff2'),
url('iconfont.woff?t=1587189598280') format('woff'),
url('iconfont.ttf?t=1587189598280') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1587189598280#iconfont') format('svg');
/* iOS 4.1- */
}

.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

div::after {
position: absolute;
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
/* top: ; */
content: '\e77b';
}

原本直接放在“ iconfont ”类中的样式放在对应伪类中，然后将“&#x”改为“\”即可（如  ，在content中变为 \e77b）；

2.4 CSS3 盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型，分别是 content-box、border-box；
这样就可以该表计算盒子大小的方式；
可以分成两种情况：
1 box-sizing: content-box 盒子大小为 width + padding + border （默认）；
2 box-sizing: border-box 盒子大小为 width；
.div2 {
width: 200px;
height: 200px;
background-color: skyblue;
border: 5px solid greenyellow;
padding: 15px;
box-sizing: border-box;
}

使用通配符进行统一默认配置；
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

2.5 CSS3 其他特性（了解）
1 CSS3 滤镜 filter；

用于将模糊或颜色偏移等图形效果应用于元素；
filter: 函数();
例如：filter: blur(5px); blur模糊处理数值越大越模糊

2 CSS3 calc 函数：

calc() 使声明css属性值时执行一些计算；
width: calc(100% - 80px);
1
上例中使得子元素永远比父元素窄 80px；
可以使用运算符
2.6 CSS3 过渡
在不使用 Flash 动画或 javascript 的情况下，配置元素样式变化过度效果；

主要是过渡效果；
与 :hover 搭配使用；
transition: 要过渡的属性花费时间运动曲线何时开始;
1
要过渡的属性：如果是所有属性，可以写 all ；
花费时间：单位为秒，必须写单位，如 0.5s；
运动曲线：可以省略；
linear：匀速；
ease：缓慢减速；
ease-in：加速；
ease-out：减速；
ease-in-out：先加速后减速；
何时开始：用于延迟，可以省略；
div {
width: 200px;
height: 100px;
background: no-repeat;
background-image: url(../1.jpg);
background-size: 100% 100%;
transition: background-image 1s, width 1s;
}

div:hover {
background-image: url(../2.jpg);
width: 400px;
}

改变多个属性则用逗号分开，或用all；
直接用 all 最常见；

原文链接：https://blog.csdn.net/qq_42680313/article/details/105587567
7）用localstorage和sessionStorage写过什么？
1. sessionStorage用作临时交流的留言板或是交流记录
2. 用localStorage做过记住用户名和密码的功能，做过小游戏最高分和排行榜

8）如何解决页面内容加载缓慢的问题？

一、优化图片

几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代，你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。

即使在现在，网络带宽有了很多的提高，56K猫逐渐淡出，优化图片以加快网页速度还是很有必要的。

优化图片包括减少图片数、降低图像质量、使用恰当的格式。

1、减少图片数：去除不必要的图片。可以将大量的背景图整合成一张雪碧图

2、降低图像质量：如果不是很必要，尝试降低图像的质量，尤其是jpg格式，降低5%的质量看起来变化不是很大，但文件大小的变化是比较大的。

3、使用恰当的格式：请参阅下一点。

因此，在上传图片之前，你需要对图片进行编辑，如果你觉得photoshop太麻烦，可以试试一些在线图片编辑工具。懒得编辑而又想图片有特殊的效果？可以试试用过调用javascript来实现图片特效。

二、图像格式的选择

一般在网页上使用的图片格式有三种，jpg、png、gif。三种格式的具体技术指标不是这篇文章探讨的内容，我们只需要知道在什么时候应该使用什么格式，以减少网页的加载时间。

1、JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。

2、GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、按钮、表情等等。当然，gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。

3、PNG：PNG格式能提供透明背景，是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

三、优化CSS

CSS叠层样式表让网页加载起来更高效，浏览体验也得到提高。有了CSS，表格布局的方式可以退休了。

但有时我们在写CSS的时候会使用了一些比较罗嗦的语句，比如这句：

以下为引用的内容：
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

你可以将它简化为：

margin: 10px 20px 10px 20px;

又或者这句：

以下为引用的内容：
<p class="decorated">A paragraph of decorated text</p>
<p class="decorated">Second paragraph</p>
<p class="decorated">Third paragraph</p>
<p class="decorated">Forth paragraph</p>

可以用div来包含：

以下为引用的内容：
<div class="decorated">
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>

简化CSS能去除冗余的属性，提高运行效率。如果你写好CSS后懒得去做简化，你可以使用一些在线的简化CSS工具，比如CleanCSS。

四、网址后加斜杠

有些网址，比如"www.kenengba.com/220"，当服务器收到这样一个地址请求的时候，它需要花费时间去确定这个地址的文件类型。如果220是一个目录，不妨在网址后多加一个斜杠，让其变成www.kenengba.com/220/，这样服务器就能一目了然地知道要访问该目录下的index或default文件，从而节省了加载时间。

五、标明高度和宽度

这点很重要，但很多人由于懒惰或其它原因，总是将其忽视。当你在网页上添加图片或表格时，你应该指定它们的高度和宽度，也就是height和width参数。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

下面是一个比较友好的图片代码：

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。

六、减少http请求

当浏览者打开某个网页，浏览器会发出很多对象请求（图像、脚本等等），视乎网络延时情况，每个对象加载都会有所延迟。如果网页上对象很多，这可以需要花费大量的时间。

因此，要为http请求减负。如何减负？

1、去除一些不必要的对象。

2、将临近的两张图片合成一张。

3、合并CSS

看看下面这段代码，需要加载三个CSS：

以下为引用的内容：
<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />

我们可以将其合成一个：

从而减少http请求。

七、其它小技巧（译者添加）

1、去除不必要加载项。

2、如果在网页上嵌入了其它网站的widget，如果有选择余地，一定要选择速度快的。

3、尽量用图片代替flash，这对SEO也有好处。

4、有些内容可以静态化就将其静态化，以减少服务器的负担。

5、统计代码放在页尾。

6、尽量不要用一个很小的图片当背景，这样做会加大客户端CPU处理时间

7，静态资源使用cdn 8，增加服务器带宽 9，如果用户多的话，使用高并发

9）cookie的特点*
1. 一、cookie的特点：
  1、cookie不可跨域
  2、cookie存储在浏览器里面
  3、cookie有数量与大小的限制
  1）数量在50个左右
  2）大小在4kb左右
  4、cookie的存储时间非常灵活
  5、cookie不光可以服务器设置（用set-cookie），也可以客户端设置。
  document.cookie
  key:value
  
  二、cookie的属性
  1、name cookie的名字，唯一性
  2、value cookie的值
  3、domain 设置cookie在哪个域名下是有效的
  4、path cookie的路径
  5、expires cookie的过期时间
  6、max-age cookie的有效期,
  值：-1 临时cookie，0有效期够了的 cookie，正数存活周期
  7、HttpOnly 有这个标记的cookie，前端是无法获取的
  8、Secure 设置cookie只能通过https协议传输
  9、SameSite 设置cookie在跨域请求的时候不能被发送。
10）页面渲染过程
1. 1、解析HMTML标签，构建DOM树
  HTML 文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成DOM树。最常见的几种节点有：文档节点、元素节点、文本节点、属性节点、注释节点。
  
  DOM节点树中节点与HTML文档中内容一一对应，DOM树构建过程：读取html文档，将字节转换成字符，确定tokens（标签），再将tokens转换成节点，以节点构建 DOM 树。
  
  2、解析CSS，构建CSSOM树
  CSS文档中，所有元素皆是节点，与HTML文件中的标签节点一一对应。CSS中各节点之间同样拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成CSSOM树。
  
  在构建DOM树的过程中，在 HTML 文档的 head 标签中遇到 link 标签，该标签引用了一个外部CSS样式表。由于预见到需要利用该CSS资源来渲染页面，浏览器会立即发出对该CSS资源的请求，并进行CSSDOM树的构建。
  
  CSSOM树构建过程与DOM树构建流程一致：读取CSS文档，将字节转换成字符，确定tokens（标签），再将tokens转换成节点，以节点构建 CSSOM 树。
  
  3、把DOM和CSSOM组合成渲染树（render tree）
  
  渲染树（Render Tree）由DOM树、CSSOM树合并而成，但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。
  
  构建渲染树，根据渲染树计算每个可见元素的布局，并输出到绘制流程，将像素渲染到屏幕上。
  
  4.在渲染树的基础上进行布局，计算每个节点的几何结构
  4.1重绘（repaint）：屏幕的一部分要重绘。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。
  
  4.2重排（reflow）：也有称回流，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式："display:none;"。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即重排（reflow）。
  
  注意：重排必将引起重绘，而重绘不一定会引起重排。
  
  何时回引起重排？
  
  当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排：
  
  1、添加或者删除可见的DOM元素；
  
  2、元素位置改变——display、float、position、overflow等等；
  
  3、元素尺寸改变——边距、填充、边框、宽度和高度
  
  4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
  
  5、页面渲染初始化；
  
  6、浏览器窗口尺寸改变——resize事件发生时；
  
  4.3如何减少和避免重排
  
  Reflow 的成本比 Repaint 的成本高得多的多。一个节点的 Reflow 很有可能导致子节点，甚至父节点以及兄弟节点的 Reflow 。在一些高性能的电脑上也许还没什么，但是如果 Reflow 发生在手机上，那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介
  
  1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；
  
  2. 让要操作的元素进行”离线处理”，处理完后一起更新；
  
  a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
  b) 使用display:none技术，只引发两次回流和重绘；
  c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
  
  3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存；
  
  4. 让元素脱离动画流，减少回流的Render Tree的规模；
  
  5、把每个节点绘制到屏幕上（painting）
  
  原文链接：https://blog.csdn.net/m0_56551554/article/details/121789562https://blog.csdn.net/m0_56551554/article/details/121789562
11）网页上哪里可以看到请求的所有信息
1. 以谷歌浏览器为例：
  
  按下f12打开控制台找到Network就可以看见网页请求的所有信息了
12）HTML5的新特性

HTML新特性
1：语义化标签
通过语义化标签，可以让页面有更加完善的结构，让页面的元素有含义，同时利于被搜索引擎解析，有利于SEO，主要标签包括下面的标签：

标签   描述
header   表示文档的头部区域
footer   表示文档的尾部区域
nav   表示文档导航部分
section   表示文档的某一节
article   表示文章
main   表示文档主要的内容区域
2：增强型表单
例如可以通过input的type属性指定类型是number还是date或者url，同时还添加了placeholder和required等表单属性。

3. 媒体元素
新增了audio和video两个媒体相关的标签，可以让开发人员不必以来任何插件就能在网页中嵌入浏览器的音频和视频内容。

4. canvas绘图
canvas绘图指的是在页面中设定一个区域，然后通过JS动态的在这个区域绘制图形。

5. svg绘图
这一部分不详细展开，想要了解的小伙伴可以参考其他文章~

6. 地理定位
使用getCurrentPosition()方法来获取用户的位置，从而实现队地理位置的定位。

7. 拖放API
通过给标签元素设置属性draggable值为true，能够实现对目标元素的拖动。

8. Web Worker
Web Worker通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行，worker线程运行结束之后会把结果返回给主线程，worker线程可以处理一些计算密集型的任务，这样主线程就会变得相对轻松，这并不是说JS具备了多线程的能力，而实浏览器作为宿主环境提供了一个JS多线程运行的环境。

9. Web Storage
关于Web Storage部分，大家需要重点掌握的是cookie、Localstorage和SessionStorage三者之间的区别：

10. Websocket
关于websocket协议，大家主要需要记住的就是websocket和HTTP的区别。

相同点
HTTP和Websocket都是基于TCP的应用层协议。

不同点
websocket是双向通信协议，模拟socket协议，可以双向发送和接受消息，HTTP是单向的，意思是说通信只能由客户端发起。
websocket是需要浏览器和服务器通过握手建立连接，但是HTTP是浏览器向服务器发送连接，服务器预先不知道这个连接。

联系
websocket建立握手时需要基于HTTP进行传输，建立连接之后呢便不再需要HTTP协议了。

原文链接：https://blog.csdn.net/sinat_41696687/article/details/123159705
13）localstore和sessionstore的区别

LocalStorge和sessionStorage之间的区别
localStorage
localStorage的生命周期是永久性的，也就是说使用localStorage存储数据，数据会被永久保存，数据不会因为窗口或浏览器的关闭而消失，除非主动的去删除数据。

localStorage有length属性，可以通过控制台查看其有多少条记录的数据。

var storage = null;
storage.setItem("key","value")   //调用setItem方法存储数据
storage.getItem("key")            //调用getItem方法获取key的值
stroage.removeItem("key")        //删除key对应的值
stroage.clear()                   //清空数据

sessionStorage
sessionStorage的生命周期相比localStorage来说很短，其周期在窗口关闭时结束。也就是说，当浏览器窗口关闭，sessionStorage的使命就已经结束，其保留的数据也会被清除。

sessionStorage也拥有length属性，两者的使用方法也是一致的，但和localstorage比较，仍有一些区别。

页面刷新不会消除已获得的数据
这里我写了两个html文件(test1.html / test2.html)来进行说明：

因为篇幅问题，所以只取了部分需要注意的代码段

这是test1.html的部分代码：

<body>
    <button>跳转按钮</button>
    <div>页面的作用:在 sessionStorage 中存数据</div>
    <script>
        var Data = window.sessionStorage;
        console.log(Data)
        var str = 'sessionData'
        // sessionStorage 存储数据 
        Data.setItem('code',str)
        document.getElementsByTagName('button')[0].onclick = function(){
            window.location.href = './test2.html'
        }
    </script>
</body>

test2.html的部分代码：

<body>
    <div>我是test2页面</div>
    <script>
        
      var sessionData = sessionStorage.getItem('code')
      console.log(sessionData)
      console.log(sessionStorage.getItem('code'))
    </script>
</body>

打开test1页面，可以看见跳转按钮以及一段文字：页面的作用:在 sessionStorage 中存数据；

打开控制器，可以看见已经传入了 code 以及它的值 sessionData;

这时点击跳转按钮，会看见页面刷新，进入test2页面，显示“我是test2页面”

sessionStorage 在test1窗口关闭前；就保存数据了。换一个新的窗口(test2)；也不会有数据改变

sessionStorage.getItem(key) 获取sessionStorage的数据中value值

14）页面之间是怎么传参数的？

1.cookie 传值。

缺点: cookie储存是需要服务器支持的，本地直接运行静态文件是实现不了的。cookie能够存储少量数据到客户端的磁盘中，特定的网页之间是可以共享cookie中的数据。

2.LocalStorage和SessionStorage传值。

优点:本地静态文件可支持。在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。此方法类似cookie，将数据存在一个公共的地方，实现页面之间传值。

3.get方式，Url传值.。

优点: 速度快. cookie 和 LocalStorage和SessionStorage 都存在速度慢,反应不过来的问题, 我在a页面写进去,在b页面读出来.有时会读到空值。post提交表单跳转的方式肯定不行了，因服务端并不处理这些请求参数，连到达客户端的机会都没有。

4.window.open和window.opener之间传值

window.open可以打开一个新的页面，在新的页面中可以通过window.opener获取父页面的窗口对象，从而可以获取父窗口中的参数。

如：var content = window.opener.document.getElementById("open").innerHTML;

15）如何在浏览器查看和清除localstrorage保存的数据？

        1.按下F12打开开发人员工具
        2.点击切换到 Application
        3.点击LocalStorage 即可查看到保存过的数据信息

在这里插入图片描述

如何清除数据？
点击上方的Clear storage 点击 Clear site data即可删除数据

最低0.47元/天解锁文章

哎呀你干嘛啊

关注

75
点赞
踩
989

收藏

觉得还不错? 一键收藏
10
评论
前端200道面试题及答案（更新中）

目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
复制链接

扫一扫