HTML

最新推荐文章于 2023-08-30 20:03:26 发布
最新推荐文章于 2023-08-30 20:03:26 发布
阅读量198 收藏
点赞数
分类专栏： html 知识点积累
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LLLLLLLLLLe/article/details/114518943
版权

知识点整理，有转载。

  1. WEB标准以及W3C标准是什么
    标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。

  2. 前端需要注意哪些SEO？
    SEO（Search Engine Optimization）：搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为

    • 语义化的html代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
    • 合理的title，description，keywords
    • 非装饰性图片必须加alt
    • 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下
    • 重要内容不要用js输出：爬虫不会执行js获取内容
    • 少用iframe：搜索引擎不会抓取iframe中的内容
    • 提高网站速度：网站速度是搜索引擎排序的一个重要指标

  3. 语义化的理解

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

  4. title / alt / strong / em

    • img - title：通常当鼠标滑动到元素上的时候显示
    • img - alt：是img的特有标签，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。搜索引擎会重点分析。
    • strong:粗体强调标签，强调，表示内容的重要性
    • em：斜体强调标签，表示强调的文本，表示内容的强调点
    • i：内容展示为斜体
    • title：没有明确意义只表示是个标题
    • h1：表示层次明确的标题，对页面信息的抓取也有很大的影响

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

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

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

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

另外一个较详细的版本：

  • 从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）
  • 开启网络线程到发出一个完整的HTTP请求（这一部分涉及到dns查询，TCP/IP请求，五层因特网协议栈等知识）
  • 从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
  • 后台和前台的HTTP交互（这一部分包括HTTP头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）
  • 单独拎出来的缓存问题，HTTP的缓存（这部分包括http缓存头部，ETag，catch-control等）
  • 浏览器接收到HTTP数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和DOMContentLoaded等）
  • CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）
  • JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
  • 其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容
  1. 如何进行网站性能优化
  • content方面
    • 减少HTTP请求：合并文件、CSS精灵(CSS sprites)、inline Image
    • 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
    • 减少DOM元素数量
  • Server方面
    • 使用CDN
    • 配置ETag
    • 对组件使用Gzip压缩
  • Cookie方面
    • 减小cookie大小
  • CSS方面
    • 将样式表放到页面顶部
    • 不使用CSS表达式
    • 使用< link>不使用@import
      link与@import的区别：
link@import
link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等@import是CSS提供的语法规则，只有导入样式表的作用
link引入的CSS被同时加载@import引入的CSS将在页面加载完毕后加载
link标签作为HTML元素，不存在兼容性问题@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别
可以通过JS操作DOM，来插入link标签改变样式由于DOM方法是基于文档的，无法使用@import方式插入样式

  • Javascript方面

    • 将脚本放到页面底部
    • 将javascript和css从外部引入
    • 压缩javascript和css
    • 删除不需要的脚本
    • 减少DOM访问

  • 图片方面

    • 优化图片：根据实际颜色需要选择色深、压缩
    • 优化css精灵（CSS sprites：是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。是加速的关键，不是降低质量，而是减少个数）
    • 不要在HTML中拉伸图片

  1. 你有用过哪些前端性能优化的方法？

    • 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器
    • 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
    • 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
    • 当需要设置的样式很多时设置className而不是直接操作style
    • 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
    • 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)
    • 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
    • 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
    • 禁止使用iframe（阻塞父文档onload事件）
    • 禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）
    • 使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）
    • 对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU
      小图标优势在于
      • 减少HTTP请求
      • 避免文件跨域
      • 修改及时生效
    • 页面头部的< style>< /style> < script>< /script> 会阻塞页面；（因为 Renderer进程中 JS线程和渲染线程是互斥的）
    • 页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)
    • 对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO

  2. HTTP状态码及其含义

    • 1XX：信息状态码
      • 100 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
    • 2XX：成功状态码
      • 200 正常返回信息
      • 201 请求成功并且服务器创建了新的资源
      • 202 服务器已接受请求，但尚未处理
    • 3XX：重定向
      • 301 请求的网页已永久移动到新位置
      • 302 临时性重定向
      • 303 临时性重定向，且总是使用 GET 请求新的 URI
    • 4XX：客户端错误
      • 400 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
      • 401 请求未授权
      • 403 Forbidden 禁止访问
      • 404 Not Found 找不到如何与 URI 相匹配的资源
    • 5XX: 服务器错误
      • 500 最常见的服务器端错误
      • 503 服务器端暂时无法处理请求（可能是过载或维护）

  3. 对浏览器内核的理解

    • 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
      • 渲染引擎
        负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
      • JS引擎
        解析和执行javascript来实现网页的动态效果
        最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
    • 常见的浏览器内核
      • Trident内核：IE,The World,360,搜狗浏览器等
      • Gecko内核：FF等
      • Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink]
      • Webkit内核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

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

    • 新特性
      • 新增选择器 document.querySelector、document.querySelectorAll
      • 媒体播放的 video 和 audio
      • 本地存储 localStorage 和 sessionStorage
      • 语意化标签 article、footer、header、nav、section
      • 增强表单控件 calendar、date、time、email、url、search
      • 跨窗口通信 PostMessage
      • 绘画 canvas
      • …
    • 移除的元素
      • 纯表现的元素：basefont、big、center、font、 s、strike、tt、u
      • 对可用性产生负面影响的元素：frame、frameset、noframes
    • 支持HTML5新标签：
      • IE8/IE7/IE6支持通过document.createElement方法产生的标签
      • 可以利用这一特性让这些浏览器支持HTML5新标签
      • 浏览器支持新标签后，还需要添加标签默认的样式
    • 如何区分 HTML 和 HTML5
      DOCTYPE声明、新增的结构元素、功能元素

  5. HTML5的离线储存及工作原理
    在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

    • 原理：HTML5的离线存储是基于一个新建的 .appcache文件的缓存机制 (不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
    • 如何使用：
      • 页面头部像下面一样加入一个manifest的属性；
      • 在cache.manifest文件的编写离线存储的资源
      • 在离线状态时，操作window.applicationCache进行需求实现
    	CACHE MANIFEST
	#v0.11
	CACHE:
	js/app.js
	css/style.css
	NETWORK:
	resourse/logo.png
	FALLBACK:
	/offline.html
	```

  6. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

  • 在线的情况下：浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
  • 离线的情况下：浏览器就直接使用离线存储的资源
  1. 描述一下 cookies，sessionStorage 和 localStorage 的区别
cookiestorage
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除
缺点：如果 cookie 被人拦截了，就可以取得所有的 session 信息。每个特定的域名下最多生成20个cookie

  1. iframe有哪些缺点
    iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）
    缺点：

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

  2. xhtml和html的区别

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

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

  • < !DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器， 用什么文档类型规范来解析这个文档
  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行
  • 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
  1. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
  • 行内元素有：a b span img input select strong
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
  • 空元素：< br> < hr> < img> < input> < link> < meta> ？？？
  • 行内元素不可以设置宽高，不独占一行
  • 块级元素可以设置宽高，独占一行，可以嵌套
  1. HTML全局属性(global attribute)有哪些？
  • class:为元素设置类标识
  • id: 元素id，文档内唯一
  • style: 行内css样式
  • title: 元素相关的建议信息
  • data-*: 为元素增加自定义属性
  • draggable: 设置元素是否可拖拽
  • lang: 元素内容的的语言
  1. Canvas和SVG有什么区别？
SVGCanvas
svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改canvas输出的是一整幅画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿
  1. HTML5 为什么只需要写 < !DOCTYPE HTML> ?
  • HTML5 不基于 SGML（符合标准通用标示语言），因此不需要对DTD（文档类型定义）进行引用，但是需要doctype来规范浏览器的行为
  • HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

  1. DTD?
    DTD（Document Type Definition），文档类型定义。是一种特殊文档，它规定、约束符合标准通用标示语言（SGML）或SGML子集可扩展标示语言（XML）规则的定义和陈述。

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

    • map+area
      定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像
    <img src="a.jpg" width="1366" height="768" border="0" usermap="#Map">
<map name="Map" id="Map">
	<area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank">
</map>
    • border-radius
    <style>  
 .disc{  
     width:100px;  
     height:100px;  
     background-color:dimgray;  
     border-radius: 50%;  
     cursor: pointer;  
     position: absolute;   /*将光标形状设置为手的样子*/
     left:50px;  
     top:50px;    
     line-height: 100px;  
     text-align: center;  
     color: white;  
 }  
</style>

<div class="disc">点击区域</div>
    • 纯js

    Math.abs() 求绝对值
    Math.pow() 底数,指数
    Math.sqrt() 求平方根

    document.onclick=function(e){
    var r=50;//圆的半径
    var x1=100,y1=100,x2= e.clientX;y2= e.clientY;//计算鼠标点的位置与圆心的距离
    var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
    if(len<=50){
        console.log("内")
    }
    else{
        console.log("外")
    }
 }

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

  • 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水 。
  • 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
  1. viewport
    移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。
 <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    是否允许手动缩放
  1. div+css的布局较table布局有什么优点？
  • 改版的时候更方便 只要改css文件
  • 页面加载速度更快、结构化清晰、页面显示简洁（table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢）
  • 表现与结构相分离
  • 易于优化（seo）搜索引擎更友好，排名更容易靠前
  1. 渐进增强和优雅降级之间的不同
  • 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  • 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
  1. 为什么利用多个域名来存储网站资源会更有效？
  • CDN缓存更方便（静态内容和动态内容分服务器存放，使用不同的服务器处理请求。处理动态内容的只处理动态内容，不处理别的，提高效率，这样使得CDN（内容分发网络）缓存更方便）
  • 突破浏览器并发限制（随便挑一个 G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4换成 lh3,lh6 啥的，都照样能够访问，像地图之类的需要大量并发下载图片的站点，这个非常重要）
  • 节约cookie带宽（跨域不会传cookie,节省宽带。举例：twitter 的主站 http://twitter.com ，用户的每次访问，都会带上自己的cookie ，挺大的。假如twitter 的图片放在主站域名下，那么用户每次访问图片时，request header 里就会带有自己的cookie ，header 里的cookie 还不能压缩，而图片是不需要知道用户的cookie 的，所以这部分带宽就白白浪费了。 写主站程序时，set-cookie 也不要set 到图片的域名上。 在小流量的网站，这个cookie 其实节省不了多少带宽，当流量如facebook twitter 时，节省下来就很可观了）
  • 节约主域名的连接数，优化页面响应速度
  • 防止不必要的安全问题

  1. 浏览器同一时间可以从一个域名下载多少资源?
    这个专业的说法叫“浏览器并发请求数”，同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻止。目前的话，所有浏览器的并发数目一般限制在10以内。

  2. src与href的区别

srchref
src用于替换当前元素href用于在当前文档和引用资源之间确立联系
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
< script src =“js.js”>< /script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部如果我们在文档中添加 < link href=“common.css” rel=“stylesheet”/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式
  1. 网页制作会用到的图片格式有哪些？
  • png-8、png-24、jpeg、gif、svg
  • Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
  • Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准

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

    • DNS缓存
    • CDN缓存
    • 浏览器缓存
    • 服务器缓存

  2. DNS：Domain Name System ,即域名系统。

    • DNS解析：通过域名,最终得到该域名对应的IP地址的过程叫做域名解析（或主机名解析）。
    • 有DNS的地方,就有缓存。浏览器、操作系统、Local DNS、根域名服务器，它们都会对DNS结果做一定程度的缓存。
    • DNS查询过程如下:
      • 首先搜索浏览器自身的DNS缓存,如果存在，则域名解析到此完成。
      • 如果浏览器自身的缓存里面没有找到对应的条目，那么会尝试读取操作系统的hosts文件看是否存在对应的映射关系,如果存在，则域名解析到此完成。
      • 如果本地hosts文件不存在映射关系，则查找本地DNS服务器(ISP服务器,或者自己手动设置的DNS服务器),如果存在,域名到此解析完成。
      • 如果本地DNS服务器还没找到的话,它就会向根服务器发出请求,进行递归查询。

  3. CDN：Content Delivery Network/Content Ddistribute Network，即内容分发网络。

客户端访问网站的过程：

  • 没有CDN：
    1、用户在浏览器访问栏中输入要访问的域名
    2、浏览器向DNS服务器请求对该域名的解析
    3、DNS服务器返回该域名的IP地址给浏览器
    4、浏览器使用该IP地址向服务器请求内容
    5、服务器将用户请求的内容返回给浏览器

  • 使用了CDN：
    1、用户在浏览器中输入要访问的域名。
    2、浏览器向DNS服务器请求对域名进行解析。由于CDN对域名解析进行了调整，DNS服务器会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。
    3、CDN的DNS服务器将CDN的负载均衡设备IP地址返回给用户。
    4、用户向CDN的负载均衡设备发起内容URL访问请求。
    5、CDN负载均衡设备会为用户选择一台合适的缓存服务器提供服务（选择的依据包括：根据用户IP地址，判断哪一台服务器距离用户最近；根据用户所请求的URL中携带的内容名称，判断哪一台服务器上有用户所需内容；查询各个服务器的负载情况，判断哪一台服务器的负载较小。基于以上这些依据的综合分析之后，负载均衡设置会把缓存服务器的IP地址返回给用户。）
    6、用户向缓存服务器发出请求。
    7、缓存服务器响应用户请求，将用户所需内容传送到用户。
    如果这台缓存服务器上并没有用户想要的内容，而负载均衡设备依然将它分配给了用户，那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉取到本地。

  • CDN 优势

    • CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低。
    • 大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源服务器的负载。

  • 关于缓存

    • 没有CDN：浏览器缓存
    • 使用了CDN：浏览器缓存+CDN缓存
    • 流程：在用户第一次访问网站后，网站的一些静态资源如图片等就会被下载到本地，作为缓存，当用户第二次访问该网站的时候，浏览器就会从缓存中加载资源，不用向服务器请求资源，从而提高了网站的访问速度，而若使用了CDN，当浏览器本地缓存的资源过期之后，浏览器不是直接向源站点请求资源，而是向CDN边缘节点请求资源，CDN边缘节点中也存在缓存，若CDN中的缓存也过期，那就由CDN边缘节点向源站点发出回源请求来获取最新资源。
  1. 浏览器缓存
    浏览器缓存其实就是浏览器保存通过HTTP获取的所有资源,是浏览器将网络资源存储在本地的一种行为。
  • 浏览器缓存的优点
    1.减少了冗余的数据传输
    2.减少了服务器的负担，大大提升了网站的性能
    3.加快了客户端加载网页的速度
  1. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验
  • 图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
  • 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
  • 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
  • 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
  • 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

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

    • cookie
    • session
    • url重写
    • 隐藏input
    • ip地址

  2. HTTP request / HTTP response 报文结构是怎样的

  • HTTP request
    • 首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF
    • 首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以CRLF（回车换行）结束
    • 请求头和消息实体之间有一个CRLF分隔
    • 根据实际请求需要可能包含一个消息实体
GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT

name=qiu&age=25
  • HTTP response
    • 首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF
    • 首行之后是若干行响应头，包括：通用头部，响应头部，实体头部
    • 响应头部和响应实体之间用一个CRLF空行分隔
    • 最后是一个可能的消息实体
HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1

{"name": "qiu", "age": 25}
  1. git fetch和git pull
  • git pull：相当于是从远程获取最新版本并merge到本地
  • git fetch：相当于是从远程获取最新版本到本地，不会自动merge
OOOOOOh~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
100套大数据可视化炫酷大屏Html5模板
DreamCoders
07-31 22万+
100套大数据可视化炫酷大屏Html5模板；包含行业：社区、物业、政务、交通、金融银行等，全网最新、最多，最全、最酷、最炫大数据可视化模板。 源码地址 giteehttps://gitee.com/iGaoWei/big-data-view githubhttps://github.com/iGaoWei/BigDataView 使用说明 直接下载，使用浏览器访问静态页面即可。 git拉取代码 $ git clonehttps://gitee....
HTML旋转相册
m0_61933976的博客
05-17 4431
快快动手做一个旋转相册吧！
HTML的介绍
tianfen_auster的博客
12-03 6906
一、HTML的介绍 1、HTML的概述： html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。 超文本：音频，视频，图片称为超文本。 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。 作用：HTML是负责描述文档语义的语言。 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解
Html span标签的详细介绍
小楼一夜听春雨，深巷明朝卖杏花
06-15 1万+
HTML 中的 Span 标记用于通过使用元素类或 id 属性为特定内容提供样式。CSS text-overflow：这是 span 标记最有用的属性，它有助于我们识别未显示的溢出内容，这些内容应向用户发出信号。CSS word-spacing： span 标记中的此属性用于管理单词之间的间距。CSS color： 用于为文本内容和文本修饰着色的 span 标记的此属性。span标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。span标签通常使用来将文本的一部分或者文档的一部分独立出来，
网页制作基础学习——HTML+CSS常用代码
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
烟花HTML特效
weixin_44602430的博客
09-23 1万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
HTML表格制作
哇塞
06-11 4万+
HTML中制作表格有两种方法： （1）先把最原始的表格画出来，每一个都是单个单元格，然后再根据要求进行行合并或列合并，有的表格需要行列都合并，则也是把它分为两步做，先合并行再合并列（或者先合并列再合并行），若进行了colspan和rowspan的合并，则将之后同一行或同一列的单元格删除，但这种方法较麻烦，容易搞混。 （2）直接根据最终要生成的表格来操作，将每个合并的单元格看做一个小的单元格，不...
Html 自定义标签
kerwin的专栏
06-10 9200
Html 自定义 标签 元素
python+HTMLTable，生成html表格
qq_38312411的博客
10-13 5681
python，html
HTML定位
最新发布
weixin_52173610的博客
08-30 5461
在 HTML 中，可以使用 CSS 来对元素进行定位。常见的定位方式有相对定位(relative)，绝对定位(absolute)，固定定位(fixed)，和粘性定位(sticky)。- 相对定位(relative)：元素相对于其正常位置进行定位，通过 top、bottom、left、right 属性来指定偏移量。- 绝对定位(absolute)：元素相对于其最近的已定位祖先元素(非 static 定位)进行定位，或者相对于文档的初始坐标定位。
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
HTML5浪漫爱心表白动画在线演示程序
02-12
HTML5是一种强大的网页开发语言，它是HTML的第五个版本，为现代互联网提供了丰富的功能和交互性。这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，...
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】
热门推荐
孤寒者的博客
08-24 20万+
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！） ⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐♥️别着急，先看演示????使用HTML、CSS和JavaS实现刮刮乐????第①步：
Http、Socket、WebSocket之间联系与区别
LLLLLLLLLLe的博客
03-29 2079
https://www.cnblogs.com/aspirant/p/11334957.html
浏览器工作原理相关知识点
LLLLLLLLLLe的博客
03-05 1342
https://blog.poetries.top/browser-working-principle/大佬写的很好，知识的搬运工是我。 1.进程和线程 并行处理 同一时刻处理多个任务。 线程 多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。 进程 一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。 从图中可以看到，线程是依附.
vue+crypto.js请求参数加密解密
LLLLLLLLLLe的博客
03-25 1249
vue+crypto.js请求参数加密解密
CSS
LLLLLLLLLLe的博客
03-09 404
知识点积累，有转载。 CSS Sprite（CSS 精灵）是什么,有什么优缺点？ CSS Sprites：是一种网页图片应用处理方式。将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。是加速的关键，不是降低质量，而是减少个数。 优点 减少HTTP请求数，极大地提高页面加载速度 增加图片信息重复度，提高压缩比，减少图片大小 更换风格方便，只需在一张或几张图片上修改颜.
前端-1
LLLLLLLLLLe的博客
03-05 300
浏览器 1.同源策略及相关 源？ 源（origin）就是协议、域名和端口号 url中的源：http://www.aspxfans.com:8080/news/index.asp?ID=24618&page=1#name 协议：http:// 服务器名：www 域名：aspxfans.com 端口：80 网站名：www.aspxfans.com 虚拟目录部分：/news/ （从域名后的第一个“/”开始到最后一个“/”为止，虚拟目录也不是一个URL必须的部分） 文件名部分：index.asp （从域
HTML圣诞树代码分享
"圣诞节快乐的圣诞树.txt" 是一个HTML文件，内容是一个简单的圣诞树页面。这个页面在圣诞节时可以用来展示和分享，通过更改文件扩展名为.html即可在浏览器中打开。 该HTML代码中，主要包含以下几个关键知识点： 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值