从浏览器地址输入url到显示页面的步骤
刚开始我是这样记忆的:
- 域名解析
比如:互联网去服务器搜索此服务器的地址,建立连接 - TCP连接
三次握手,确认时否可以连接,可以连接后第四次进行连接 - 浏览器发送HTTP请求
- 服务器处理HTTP请求
服务器返回响应,相应交给浏览器 - 浏览器页面渲染
浏览器开始渲染html页面,css,js - 断开TCP连接
三次分手,第四次最终分手
到现在:
-
浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求
-
服务器交给后台处理完成后返回数据,浏览器接收文件(html,js,css,图像等)
-
浏览器对加载到的资源(html , js,css等)进行语法解析,建立相应的内部数据结构(如 html 的DOM);
-
载入解析到的资源文件,渲染页面,完成
什么叫优雅降级和渐进增强
刚开始我是这样记忆的:
优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
到现在:
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
刚开始我是这样记忆的:
-
.png为替代gif产生的,位图文件,支持透明,半透明,不透明,不支持动画,无损图像格式;.png8简单说是静的gif,也只是256色;.png24 不透明,不止256色;
-
.jpg 支持上百万种颜色,有损压缩,压缩比例180:1,质量受损不明显,不支持图形渐进与背景透明,不支持动画;
-
.gif 图形交换格式,索引颜色格式,颜色少的情况下,产生极小的文件,支持背景透明,动画,图形渐进,无损压缩(适合线条。图标等)缺点只有256中颜色;
-
.webp是谷歌开发的旨在加快图片加载速度的图片格式,图片的压缩体积是.jpeg的2/3, 有损压缩,只有高版本的w3c浏览器才支持;
到现在:
- .png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是:压缩比高,色彩好。 大多数地方都可以用。
- .jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
- gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果(适合线条,图标等).
- webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间更久了,兼容性不好,目前谷歌和opera支持。
KBK:其实到现在,我刚开始整理的一些面试题都已经变化了好久,但是你们发现没有,不管笔记如何改变,字数变多,还是变少,核心总是没有变化的,所以,以后记忆的时候,送一个小贴士:‘不用背,记住就行了’,只要你能记住核心,剩下的由你叭叭,嘻嘻!