HTML--面试题--知识点--总结

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

刚开始我是这样记忆的：

1. 域名解析
   比如：互联网去服务器搜索此服务器的地址，建立连接
2. TCP连接
   三次握手，确认时否可以连接，可以连接后第四次进行连接
3. 浏览器发送HTTP请求
4. 服务器处理HTTP请求
   服务器返回响应，相应交给浏览器
5. 浏览器页面渲染
   浏览器开始渲染html页面，css，js
6. 断开TCP连接
   三次分手，第四次最终分手

到现在：

1. 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求

2. 服务器交给后台处理完成后返回数据，浏览器接收文件（html，js，css，图像等）

3. 浏览器对加载到的资源（html ， js，css等）进行语法解析，建立相应的内部数据结构（如 html 的DOM）；

4. 载入解析到的资源文件，渲染页面，完成

什么叫优雅降级和渐进增强

刚开始我是这样记忆的：

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

到现在：

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

刚开始我是这样记忆的：

1. .png为替代gif产生的，位图文件，支持透明，半透明，不透明，不支持动画，无损图像格式；.png8简单说是静的gif，也只是256色；.png24 不透明，不止256色；

2. .jpg 支持上百万种颜色，有损压缩，压缩比例180：1，质量受损不明显，不支持图形渐进与背景透明，不支持动画；

3. .gif 图形交换格式，索引颜色格式，颜色少的情况下，产生极小的文件，支持背景透明，动画，图形渐进，无损压缩（适合线条。图标等）缺点只有256中颜色；

4. .webp是谷歌开发的旨在加快图片加载速度的图片格式，图片的压缩体积是.jpeg的2/3, 有损压缩，只有高版本的w3c浏览器才支持；

到现在：

1. .png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
2. .jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
3. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果（适合线条，图标等）.
4. webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

KBK:其实到现在，我刚开始整理的一些面试题都已经变化了好久，但是你们发现没有，不管笔记如何改变，字数变多，还是变少，核心总是没有变化的，所以，以后记忆的时候，送一个小贴士：‘不用背，记住就行了’，只要你能记住核心，剩下的由你叭叭，嘻嘻！