一、canvas和svg的区别
- svg绘制出来的图形，每个元素都是一个dom节点，方便绑定事件和方法，canvas绘制出来的是一整张图片
- svg绘制出的是矢量图，放大缩小不会失真，canvas绘制的是标量图，放大缩小会失真
二、HTML5为什么只需要写<!DOCTYPE HTML>
- html5不基于SGML，不需要对DTD进行引用，只需要doctype来规范浏览器的行为
- Html4.01基于SGML，需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
三、如何在页面上实现一个圆形的可点击区域
- svg
- border-radius
- 纯js实现要计算一个点在不在圆上简单算法、获取鼠标坐标等等
四、网页验证码有什么用
- 区分是人还是计算机自动程序，防止恶意破解程序、刷票、论坛灌水等
- 防止黑客对某一个特定注册用户用特定程序暴力破解方式不断进行登录尝试
五、viewport 怎么处理1px渲染为2px
meta标签中的viewport属性 initial-scale 设置为0.5 跟着设计稿标准走即可
六、渲染优化
- 禁止使用iframe、gif来实现loading效果
- 使用css代替js来实现动画效果
- 对一些小图标使用base64以减少网络请求
- 页面头部的的<style/><script/>会阻塞页面
- 页面中空的herf、src会阻塞其他资源的加载
- 网页gzip、data缓存、cdn托管、图片服务器
- 前端模板js+数据，减少标签的带宽浪费、图片预加载
- 样式放顶部，脚本放底部
- 用innerHTML代替DOM操作，减少DOM的操作次数，优化js性能、当需要设置多个样式时设置className而不是直接操作style
七、常见的浏览器及内核
IE—trident内核、chrome—基于webkit的blink、safari—webkit、firefox—gecko内核、opera—blink
八、div+css较table的优点
改版的时候，只需改css文件、易于seo、加载速度快，结构清晰，页面整洁、结构表现分离
九、渐进增强和优雅降级的不同
- 渐进增强：针对低版本的浏览器进行页面构建，保证最基本的功能，再根据高版本的浏览器进行交互、效果和追加功能以达到更好的用户体验
- 优雅降级：一次性构建完整的页面，再针对低版本的浏览器进行兼容
- 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，渐进增强是从一个基本的开始，渐渐的扩充以适应未来环境的需要
十、为什么利用多个域名来存储网站资源会更有效
CDN缓存更方便、节约cookie带宽、突破浏览器的并发限制、节约主域名的连接数，优化页面响应速度、防止不必要的安全问题
十一、简述href 和 src的区别
- href：用于当前文档和引用资源之间建立联系，当文档中使用link，浏览器会并行下载该资源而不会停止对当前页面资源的加载
- src：用于替换当前资源，文档中使用src的时候，浏览器会下载该资源并应用在文档内，会暂停其它资源的下载和处理
十二、网页制作的图片格式有哪些
svg、png-8、png-24、jpeg、gif、webp—谷歌开发的旨在加快图片加载的图片格式、Apng—Animated Portable Network Graphic
十三、页面中有大量图片时，优化图片加载的方法
- 图片懒加载，在页面的未可视区域设置滚动事件，计算页面位置与浏览器顶端的距离 和 页面的距离，前者小于后者 优先加载
- 图片预加载，将当前展示图片的前一张和后一张优先下载
- 图片为css图片的话，可以使用base64、cssSprite等技术
- 图片过大的话，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，增加用户体验
十四、Web开发中会话跟踪的方法
cookie、session、url重写、IP地址、隐藏input
十五、Http request报文结构
- 首行是request-line，包括：请求方法，请求URI，协议版本
- 其次是若干请求头
- 最后是请求体
十六、Http response报文结构
- 首行是协议版本、状态码、状态描述
- 其次的响应头
- 最后是响应体
网友评论