Web

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

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

• 服务器交给后台处理完成后返回数据，浏览器接收文件（ HTML、JS、CSS 、图象等）；

• 浏览器对加载到的资源（ HTML、JS、CSS 等）进行语法解析，建立相应的内部数据结构（如 HTML 的 DOM ）；

• 载⼊解析到的资源文件，渲染页面，完成。

如何进行网站性能优化

• content 方面

  • 减少 HTTP 请求：合并文件、CSS 精灵、inline Image(内联图片)。

  • 减少 DNS 查询：DNS 缓存、将资源分布到恰当数量的主机名。

  • 减少 DOM 元素的数量

• Server 方面

  • 使用 CDN

  • 配置 ETag

  • 对组件使用 Gzip压缩

• Cookie 方面

  • 减小 cookie 的大小

• Css 方面

  • 将样式表放到页面的顶部

  • 不使用 css 表达式

  • 使用 <link> 不使用 @import

• Javasript 方面

  • 将脚本放到页面底部

  • 将 javascript 和 css 从外部引入

  • 压缩 JavaScript 和 css

  • 删除不需要的脚本

  • 减少 DOM 的访问

• 图片 方面

  • 优化图片：根据实际颜色需要选择色深、压缩

  • 优化 css 精灵

  • 不要在 HTML 中拉伸图片

介绍⼀下你对浏览器内核的理解？

• 主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和  JS 引擎

• 渲染引擎 ：负责取得网页的内容（ HTML 、 XML 、图像等等）、整理讯息（例如加⼊ CSS 等），以及计算网页的显示方式，然后会输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释也会有所不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

•  JS 引擎 ：解析和执行 javascript 来实现网页的动态效果

• 最开始 渲染引擎 和  JS 引擎 并没有区分的很明确，后来JS引擎越来越独⽴，内核就倾向于只指渲染引擎。

描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？

• cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

• cookie 数据始终在同源的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递

• sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存

• 存储大小：

  • cookie 数据大小不能超过4k

  • sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大

• 有期时间：

  • localStorage 存储持久的数据，浏览器关闭后数据不丢失除非主动删除数据

  • sessionStorage 数据在当前浏览器窗⼝关闭后自动删除

  • cookie 设置的 在cookie 过期时间之前⼀直有效，即使窗口或浏览器关闭

WEB标准以及W3C标准是什么?

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

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

• 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水

• 有效防止黑客对某⼀个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

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

• IE : trident 内核

• Firefox ： gecko 内核

• Safari : webkit 内核

• Opera : 以前是 presto 内核， Opera 现已改⽤Google - Chrome 的 Blink 内核

• Chrome : Blink (基于 webkit ，Google与Opera Software共同开发)

描述⼀下渐进增强和优雅降级之间的不同

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

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

• 区别：

• • 优雅降级 是从复杂的现状开始，并试图减少用户体验的供给，而 渐进增强 则是从⼀个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

  • 降级（功能衰减）意味着往回看；而 渐进增强 则意味着朝前看，同时保证其根基处于安全地带

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

• CDN（内容分发网络） 缓存更方便

• 节约 cookie 带宽

• 节约主域名的连接数，优化页面响应速度

• 防止不必要的安全问题

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

• cookie

• session

• url 重写

• 隐藏 input

• ip 地址