第一部分：基础篇（一）-CSDN博客

HTML、HTTP、web综合问题

1.前端需要注意哪些SEO

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜引擎容易理解网页
重要的内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取的内容
少用iframe:搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

2.`<img>`的`title`和`alt`有什么区别

title属性当鼠标滑动到元素上时显示内容
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问i性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析

3.HTTP的几种请求方法用途

GET方法
- 发送一个请求来取得服务器上的某一资源
POST方法
- 向URL指定的资源提交数据或附加新的数据
PUT方法
- 跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
HEAD方法
- 只请求页面的首部
DELETE方法
- 删除服务器上的某资源
OPTIONS方法
- 它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
TRACE方法
- TRACE方法被用于激发一个远程的，应用层的请求消息回路
CONNECT方法
- 把请求连接转换到透明的TCP/IP通道

4.从浏览器地址栏输入url到显示页面的步骤

基础版本

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发送请求;
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图像等）;
浏览器对加载到资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构，如（HTML的DOM）;
载入解析到的资源文件，渲染页面，完成。

详细版

DNS解析

将域名解析为ip地址
走缓存
浏览器DNS缓存
本机DNS缓存
路由器DNS缓存
网络运营商服务器DNS缓存（80%的DNS解析在这完成的）
递归查询 www.a.b.com.cn

TCP连接

TCP三次握手
- 第一次握手：浏览器发给服务器，告诉服务器，我将要发送请求
- 第二次握手：服务器发送浏览器，告诉浏览器，我准备好了，你放马过来
- 第三次握手：浏览器发送服务器，告诉浏览器，我来了

发送请求
- 请求报文
返回响应
- 响应报文
解析报文，渲染页面

先预解析（将需要发送请求的标签的请求发出去）
从上到下解析html文件
- 遇到HTML标签，调用html解析器将其解析DOM树
- 遇到css标记，调用css解析器将其解析CSSOM树
  - link 阻塞 - 为了解决闪屏，所有解决闪屏的样式
  - style 非阻塞，与闪屏的样式不相关的
将DOM树和CSSOM树结合在一起，形成render树
layout布局 render渲染
遇到script标签，阻塞，调用js解析器解析js代码，可能会修改DOM树，也可能会修改CSSOM树，
将DOM树和CSSOM树结合在一起，形成render树
layout布局 render渲染（重排重绘）
script标签的属性
- async 异步谁先回来谁就先解析，不阻塞
- defer 异步按照先后顺序（defer）解析，不阻塞
script标签放在body下，放置多次重排重绘，能够操作dom

断开链接

TCP四次挥手（浏览器挥手两次，服务器挥手两次。断开请求需要两次挥手, 断开响应需要两次挥手）
第一次挥手：浏览器发送服务器，告诉服务器，我东西（请求报文）发完了，服务器准备关闭
第二次挥手：服务器发送浏览器，告诉浏览器，我东西接受完了，我准备关闭，你也准备关闭
第三次挥手：服务器发送浏览器，告诉浏览器，我东西（响应报文）发完了，浏览器准备关闭
第四次挥手：浏览器发送服务器，告诉服务器，我东西接受完了，我准备关闭，你也准备关闭

5.如何进行网站性能优化

content方面
- 减少HTTP请求：合并文件、CSS精灵、inline Image
- 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
- 减少DOM元素数量
Server方面
- 使用CDN
- 配置ETag
- 对组件使用Gzip压缩
Cookie方面
- 减小cookie大小
css方面
- 将样式表放到页面顶部
- 不使用CSS表达式
- 使用<link> 不使用@import
javascript方面
- 将脚本放到页面底部
- 将javascritpt 和css从外部引入
- 压缩javascript 和css
- 删除不需要的脚本
- 减少DOM访问
图片方面
- 优化图片：根据实际颜色需要选择色深、压缩
- 优化css精灵
- 不要在HTML中拉伸图片

6.HTTP状态码及其含义

1xx：信息状态码
- 100 Continue继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2xx:成功状态码
- 200 ok 正常返回信息
- 201 Created 请求成功并且服务器创建了新的资源
- 202 Accepted服务器已接受请求，但尚未处理
3xx：重定向
- 301 Move Permanently 请求的网页已永久移动到新网址，搜索引擎抓新网址内容和新网址
- 302 Found临时重定向，资源临时被转移到新网址，搜索引擎抓新网址内容和旧网址
- 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
- 304 Not Modified 资源重定向浏览器缓存中自从上次请求后，请求的网页未被修改过
4xx:客户端错误
- 400 Bad Requset服务为其无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
- 401 Unauthorized请求未授权。
- 403 Forbidden 禁止访问
- 404 Not Found 找不到如何与URI相匹配的资源。输入网址有误
5xx:服务器错误
- 500 Internal Server Error 最常见的服务器端错误。
- 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

7. 语义化的理解

用正确的标签做正确的事情！
HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
在没有css样式情况下也以一种文档格式显示，并且使容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

8.介绍一下你对浏览器内核的理解

主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS），以及计算网页的显式方式，然后会输出至显式器或打印机。浏览器的内核的不同对于网页的语法解释会有不用，所以渲染效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显式网络内容的应用程序都需要内核
JS引擎：解析和执行JavaScript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎.有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。
- Trident(IE内核)：国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。
- Gecko(firefox)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。可惜这几年已经没落了，比如打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
- webkit(Safari)：Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了），苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器
- Chromium/Bink(chrome)在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。
- Presto(Opera)：Presto 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。
移动端的浏览器内核主要说的是系统内置浏览器的内核：目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

9.html5有哪些新特性、移除了哪些元素？

html5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加
- 绘画canvas
- 用于媒体播放的video和audio
- 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 语义化更好的内容元素，比如article、footer、header、nav、section
- 表单控件，calendar、date、time、email、url、search
- 新的技术 webworker、webscket、Geolocation
移除的元素：
- 纯表现的元素：basefont、big、center、font、s、strike、tt、u
- 对可用性产生负面影响的元素：frame、frameset、noframes
支持HTML5新标签
- IE8/IE7/IE6支持通过document.createElement方法产生的标签
- 可以利用这一特性让这些浏览器支持html5新标签
- 浏览器支持新标签后，还需要添加标签默认的样式
当然也可以直接使用成熟的框架，比如html5shim

10.`HTML5`的离线存储怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：html5的离线存储是一个基于新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会想cookie一样被存储从了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储技的数据进行页面展示
如何使用：
- 页面头部加入一个mainfest的属性。
- 在cache.mainfest 文件中编写离线存储的资源。
- 在离线状态时，操作window.applicationCache进行需求实现

11.浏览器是怎么对`html5`的离线存储资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有mainfest属性，它会请求mainfest文件，如果是第一次访问app，那么浏览器就会根据mainfest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app或网页并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的mainfest文件与旧的mainfest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

12.请描述一下`cookie`，`sessionStorage`，和`localStorage`的区别？

cookie 是网站为了标示用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），就会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅保存在本地
存储大小;
- cookie 数据大小不能超过4k
- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多可以达到5M或者更大
有期时间：
- localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage 数据在当前浏览器窗口关闭后自动删除
- cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

13.`iframe`有哪些缺点

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
解决：
- 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过JavaScript动态给iframe添加src属性值，这样可以绕开以上两个问题

14.WEB标准以及W3C标准是什么？

标签闭合、标签小写、不乱嵌套、使用外链CSS和JS、结构行为表现的分离

15.xhml和html有什么区别？

一个是功能上的差别
- 主要是XHTML可其兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
另外是书写习惯的差别
- XHTML元素必须被正确的嵌套，闭合，区分大小写，文档必须拥有根元素

16.Doctype作用？严格模式与混杂模式如何区分？它们有何意义

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。Doctype不存在或格式不正确会导致文档以混杂模式呈现

17.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？行内元素和块级元素有什么区别？

行内元素有: a b span img input select strong
块级元素有：div ul ol li dl dd h1~h6 p
空元素：<br> <hr> <img> <input> <link> <meta>
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行
块级元素可以包含块级元素和内联元素，而行内元素只能包含文本
块级元素可以设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起作用

18.Html全局属性（global attribute）有哪些

class:为元素设置类标识
data-: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
id: 元素id，文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息

19.Canvas和SVG有什么区别？

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

20.HTML为什么只需要写

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

21.如何在页面上实现一个圆形的可点击区域？

svg
border-radius
纯js实现需要一个点在不在圆上的简单算法、获取鼠标坐标等等

22.网页验证是干嘛的，是为了解决什么安全问题？

区分用户是计算机爱是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

23.viewport

 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // width    设置viewport宽度，为一个正整数，或字符串‘device-width’
    // device-width  设备宽度
    // height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
    // initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
    // minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
    // maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
    // user-scalable    是否允许手动缩放
   
复制代码

延伸提问
- 怎么处理移动端1px被渲染成2px的问题 局部处理
mate标签中的viewport属性，initial-scale设置为1
rem按照设计稿标准走，外加利用transform的scale（0.5）缩小一倍即可；

全局处理

mate标签中的viewport属性，initial-scale设置为0.5
rem按照设计稿标准走

24.渲染优化

禁止使用iframe（阻塞父文档onload事件）
- iframe会阻塞主页面的onload事件
- 搜索引擎的检索程序无法解读这种页面，不利于SEO
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
- 如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题
禁止使用GIF图片实现loading效果（降低cpu消耗，提升渲染性能）
使用css3代码替代JS动画（尽可能避免重绘重排）
对于一些小图标，可以使用base64位编码，以减少网络请求。但不太建议大图使用，比较耗费cpu
- 小图标优势在于
  - 减少HTTP请求
  - 避免文件跨域
  - 修改及时生效
页面头部的<style></style> <script></script>会阻塞页面，（因为renderer进程中JS线程和渲染线程是互斥的）
页面中空的href和src会阻塞页面其他资源的加载（阻塞下载进程）
网页gzip，CDN托管，data缓存，图片服务器
前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存ajax请求结果，每次操作本地变量，不用请求，减少请求次数
用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能
当需要设置的样式很多时设置className而不是直接操作style
少用全局变量。缓存DOM节点查找的结果，减少IO读取操作
图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO

25.meta viewport相关

<!DOCTYPE html>  <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′>    <!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   <!--优先使用 IE 最新版本和 Chrome-->
<meta name=”description” content=”不超过150个字符”/>       <!--页面描述-->
<meta name=”keywords” content=””/>     <!-- 页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/>    <!--网页作者-->
<meta name=”robots” content=”index,follow”/>      <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!--为移动设备添加 viewport-->
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/>  <!--添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
<!--添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/>  <!--设置苹果工具栏颜色-->
<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     <!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” />    <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”>     <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
<meta name=”MobileOptimized” content=”320″>   <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”>   <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”>    <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”>              <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”>       <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”>   <!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”>   <!-- QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”>    <!--windows phone 点击无高亮
设置页面不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
复制代码

26.你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？

IE：trident 内核
Firefox：gecko内核
Safari：webkit内核
Opera:以前是presto内核，Opera现已改用Google - Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

27.div+css布局较table布局有什么优点？

改版的时候更方便只要更改css文件
页面加载速度更快、结构化更清晰、页面显示简洁
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前

28.a：img的alt与title有何异同？b：strong与em的异同？

alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成tool tip`显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

29.你能描述一下渐进增强和优雅降级之间的不同吗？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

30.为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

31.简述一下src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所咋位置，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
复制代码

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
那么浏览器会识别该文档为`css`文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用`link`方式来加载`css`，而不是使用`@import`方式

32.知道的网页制作会用到的图片格式有哪些？

png-8、png-24、jpeg、gif、svg
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp,Apng。（是否有关注新技术，新鲜事物）
Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。
Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准

33.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存

34.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

35.web开发中会话跟踪的方法有哪些

cookie
session
url重写
隐藏input
ip地址

37.Web存储技术总结

一、`Cookie`

是什么？

本质上是一个存储浏览器端的文本

作用：

可以用来给浏览器存储数据的
解决http协议无状态问题

工作原理

首次：浏览器发送请求给服务器，服务器返回响应给浏览器，此时返回了cookie，浏览器自动保存下来
下次：浏览器发送请求时就会自动携带上cookie，服务器通过解析cookie，从而判断浏览器之前的行为（是否登录过），返回给浏览器相应响应

服务器端使用

设置/修改cookie res.cookie(key, value, options)
获取cookie app.use(cookieParser()); req.cookies
删除cookie res.clearCookie(key)

浏览器使用

document.cookie 读写二合一
document.cookie = 'hello=123;expires=' + new Date(Date.now() + 1000 * 3600 * 24);

cookie的有效期

会话cookie （浏览器打开到浏览器关闭是一次会话）
- 会话开始时产生，会话结束自动销毁
持久化cookie
- res.cookie('userId', 'sunwukong', {maxAge: 1000 * 3600 * 24 * 7}); 7天内生效
- res.cookie('userId', 'sunwukong', {maxAge: 1000 * 3600 * 24 * 365 * 10}); 10年内生效，永久

缺点：

存储容量有限大约4kb左右，数量为20个左右
传输流量比较大如果cookie数量比较多，每次请求时都会自动携带cookie

二、`ession`

是什么？是一个存储服务器端会话对象
作用？存储数据、解决http协议无状态问题
工作原理

浏览器首次发送给服务器请求，此时开启会话，服务器会为本次会话创建session对象
服务器会将session的id作为cookie返回给浏览器，浏览器接受后就存起来
下一次浏览器发送请求就会自动携带上cookie，服务器就要解析cookie得到session_id，
通过session_id找到对应session对象，然后根据session对象中的内容返回给浏览器相应的响应

使用：

想将会话存储的session进行持久化储存，就得使用上数据库
设置一个中间件
今后通过 req.session 读写二合一

cookie 和 session 区别

储存位置： cookie在浏览器端 session在服务器端
存储容量大小： cookie较小 session无限大
传输流量： cookie较多 session只产生一个cookie，较小
安全性： cookie安全更低（保存不是敏感数据） session安全更高（登陆、注册）

三、`Webstorage`

SessionStorage和LocalStorage都是本地存储，不会被发送到服务器上。同时空间比Cookie大很多，一般支持5-10M
浏览器端通过 Window.sessionStorage和Window.localStorage 属性来实现本地存储机制。
- Storage.getItem('key');
  - 该方法接受一个键名作为参数，返回键名对应的值。
- Storage.setItem('key', 'value');
  - 该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
- Storage.removeItem('key');
  - 该方法接受一个键名作为参数，并把该键名从存储中删除。
- Storage.clear()
  - 调用该方法会清空存储中的所有键名
  - ·：
    - Storage 对象发生变化时（即创建/更新/删除数据项时，重复设置相同的键值不会触发该事件，Storage.clear() 方法至多触发一次该事件）会触发
  - 在同一个页面内发生的改变不会起作用
  - 在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件，与它共享的页面会触发事件)
区别
- LocalStorage是浏览器本地持久化存储技术，也叫永久存储
- SessionStorage是浏览器本地临时存储技术，也叫会话存储
使用store库完美兼容所有浏览器

四、`IndexDB`和`WebSQL`

IndexedDB 和 WebSQL 都是用于客户端存储大量结构化数据。
该API使用索引来实现对该数据的高性能搜索。
不同的是IndexedDB是非关系型，而WebSQL是关系型。
WebSQL官方不在维护，但兼容性较好，基本不使用。
IndexedDB在维护，兼容性较差
结合localForage库使用IndexDB和WebStorage
juejin.im/post/5bdd67…
github.com/localForage…

五、`PWA`

渐进式网络应用程序(Progressive Web Application - PWA)，是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。PWA可以用来做很多事。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。这是通过使用名为 Service Workers的网络技术来实现的。
简单来讲：
- 能够离线访问资源
- 能够使用原生系统功能
zoumiaojiang.com/article/ama…

六、`Manifest`

html5 离线缓存文件
juejin.im/post/59cdb4…

38.GET请求报文结构是怎样的

首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF
首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以CRLF结束
请求头和消息实体之间有一个CRLF分隔
根据实际请求需要可能包含一个消息实体一个请求报文例子如下：

    报文首行
  GET http://localhost:3000/test?username=123&password=456 HTTP/1.1
    请求方式  请求地址  协议名/版本号 1.0 1.1 2.0
    请求方式、请求地址、get请求查询字符串参数
  报文头
  Host: localhost:3000
    主机地址
  Connection: keep-alive
    保持长连接
  Cache-Control: max-age=0
    不使用缓存    
    强缓存 Cache-Control（1.1） expires（1.0）
    协商缓存 last-modified  etag    if-modified-since if-none-match
  Upgrade-Insecure-Requests: 1
    允许使用https协议
  User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
    用户代理：浏览器内核版本信息
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    允许接受数据
    text/html html文件
    application/xhtml+xml xhtml文件
    application/xml;q=0.9 xml数据，优先级更低
    image/webp,image/apng 图片的格式  webp chrome推出的压缩程度更好的图片，只能在android和chrome使用
    */*;q=0.8  允许接受任意文件/数据，优先级最低
  Accept-Encoding: gzip, deflate, br
    允许接受的文件压缩格式
  Accept-Language: zh-CN,zh;q=0.9
    语言
  Cookie: Webstorm-129da853=8726c2d8-3b88-48b8-8db0-dd82e62fb79a; _ga=GA1.1.1365509058.1552220281
    cookie解决http协议问题。
    
 空行
 报文体
复制代码

39.POST请求报文的结构是怎样的

    报文首行
    POST http://localhost:3000/test HTTP/1.1
    报文头
    Host: localhost:3000
    Connection: keep-alive
    Content-Length: 29
                        请求体的长度，单位byte
    Cache-Control: max-age=0
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
    Origin: http://localhost:3000
                        访问服务器的地址
    Content-Type: application/x-www-form-urlencoded
                        application/x-www-form-urlencoded form表单默认值，传输数据是采用urlencoded编码 key=value&key=value
                        application/json 传输数据是json
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    Referer: http://localhost:63342/class1128/01.nodejs/day03/index.html?_ijt=vdq7mfcge1jbednt6is99tah4c
                        请求来源的地址：  广告计费、防盗链
    Accept-Encoding: gzip, deflate, br
    Accept-Language: zh-CN,zh;q=0.9
    Cookie: Webstorm-129da853=8726c2d8-3b88-48b8-8db0-dd82e62fb79a; _ga=GA1.1.1365509058.1552220281
    报文空行
    报文体
    username=admin&password=admin
    post请求请求参数


复制代码

40.HTTP response响应报文结构是怎样的

首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF
首行之后是若干行响应头，包括：通用头部，响应头部，实体头部
响应头部和响应实体之间用一个CRLF空行分隔
最后是一个可能的消息实体响应报文例子如下：

    响应首行
    HTTP/1.1 200 OK
          响应状态码
    * 响应头
    X-Powered-By: Express
    Content-Type: text/html; charset=utf-8
                        响应体类型
    Content-Length: 46
    ETag: W/"2e-E6oVGh8rOKZ0GZBtPMn6O0HzO+s"
    Date: Tue, 12 Mar 2019 07:27:03 GMT
    Connection: keep-alive
    * 空行
    * 响应体
    <h1>这是express服务器返回的响应</h1>
    汉字占3字节 普通占1字节
复制代码