网站建设文献综述郑州网站建设天强科技

当前位置： 首页 > news >正文

网站建设文献综述,郑州网站建设天强科技,做网站用什么比较好,个人网站对主机有什么要求HTML面试题部分知识点梳理 1.如何理解HTML语义化 让页面的内容结构化#xff0c;便于对浏览器、引擎解析#xff0c;易于阅读#xff0c;便于维护理解#xff0c;利于SEO。 2.H5的新特性 video/audio视频/音频canvas 绘画geolocation 定位 用于定位用户的位置WebSocket…HTML面试题部分知识点梳理 1.如何理解HTML语义化 让页面的内容结构化便于对浏览器、引擎解析易于阅读便于维护理解利于SEO。 2.H5的新特性 video/audio视频/音频canvas 绘画geolocation 定位 用于定位用户的位置WebSocket前后端双向通讯localStorage / sessionStorage代替cookie本地存储文件拖拽WebWorker js多线程,提高性能manifest 离线缓存语义化标签header footer section nav aside article 3.如何实现浏览器内多个标签页之间的通信 cookie setInterval方式 缺点 1、cookie空间有限浏览器在每一个域名下最多能设置30-50个cookie容量最多为4k左右。 2、每次HHTP请求才会把当前域的cookie发送到服务器上包括只在本地才用到的而服务器不用的浪费带宽。 3、setInterval频率设置过大会影响浏览器的性能过小会影响时效性。 localStorage方式 缺点 1、localStorage是h5的属性高版本的浏览器才支持而且不同浏览器localStorage大小了限制不统一。 2、localStorage只能监听非己页面的数据变化。提示localStorage比cookie好在它在setItem存东西时会自动触发整个浏览器的storage事件除了当前页面之外所有打开的标签窗口都会受影响。 优点解决了cookie容量小和时效性的问题。 webSocket方式 缺点 1、它需要服务端的支持才能完成任务。如果socket数据量比较大的话会严重消耗服务器的资源。 2、必须要在服务端项目中写服务端监听程序才能支持。 优点使用简单客户端简单服务端苦逼了功能灵活、强大如果部署了WebSocket服务器可以实现很多实时的功能。 SharedWorker方式
4.简述一下src与href的区别 src用于替换当前元素指向外部资源的位置会将指向的资源下载并应用到文档浏览器解析到该元素时会暂停其他资源的下载。 script src ”js.js”/scripthref用于在当前文档和引用资源之间确立联系。浏览器会识别该文档并行下载资源不会停止对当前文档的处理建议用link方式加载css,而不是import方式。 link href”common.css” rel”stylesheet”/5. script标签中defer和async的区别 script 会阻碍 HTML 解析只有下载好并执行完脚本才会继续解析 HTML。 defer:浏览器指示脚本在文档被解析后执行script被异步加载后并不会立刻执行而是等待文档被解析完毕后执行。 async:同样是异步加载脚本区别是脚本加载完毕后立即执行这导致async属性下的脚本是乱序的对于 script 有先后依赖关系的情况并不适用
6.说一下 web worker web worker 是运行在后台的 js独立于其他脚本不会影响页面你的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候就不会阻塞主线程了。 7.用一个div模拟textarea的实现 给div添加contenteditabletrue 即可 8.介绍下资源预加载 prefetch/preload 都是告知浏览器提前加载文件(图片、视频、js、css等)但执行上是有区别的。 prefetch其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。link href/js/xx.js relprefetch preload : 可以指明哪些资源是在页面加载完成后即刻需要的浏览器在主渲染机制介入前就进行预加载这一机制使得资源可以更早的得到加载并可用且更不易阻塞页面的初步渲染进而提升性能。 link href/js/xxx.js relpreload asscript需要 as 指定资源类型目前可用的属性类型有如下
9.点击一个input依次触发的事件 onmouseenter 鼠标移入 onmousedown 鼠标按下 onfocus 对象获得焦点 onclick 鼠标点击10.addEventListener和attachEvent的区别 1、前者是标准浏览器中的用法后者IE8以下 2、addEventListener可有冒泡可有捕获attachEvent只有冒泡没有捕获。 3、前者事件名不带on后者带on 4、前者回调函数中的this指向当前元素后者指向window 11.DOM事件流是什么 DOM事件流分为三个阶段 捕获阶段事件从window发出自上而下向目标节点传播的阶段 目标阶段真正的目标阶段正在处理事件的阶段 冒泡阶段事件从目标节点自下而上向window传播的阶段 12.从输入url到页面展示到底发生了什么 1、输入地址 2、浏览器查找域名的 IP 地址 浏览器会首先查看本地硬盘的 hosts 文件请求到本地DNS服务器本地DNS服务器还要向DNS根服务器进行查询根DNS服务器没有记录具体的域名和IP地址的对应关系而是告诉本地DNS服务器你可以到域服务器上去继续查询并给出域服务器的地址本地DNS服务器继续向域服务器发出请求.com域服务器收到请求之后也不会直接返回域名和IP地址的对应关系而是告诉本地DNS服务器你的域名的解析服务器的地址。本地DNS服务器向域名的解析服务器发出请求这时就能收到一个域名和IP地址对应关系本地DNS服务器不仅要把IP地址返回给用户电脑还要把这个对应关系保存在缓存中以备下次别的用户查询时可以直接返回结果加快网络访问。 3、浏览器向 web 服务器发送一个 HTTP 请求 最终建立了TCP/IP的连接之后发起一个http请求 4、服务器的永久重定向响应 服务器给浏览器响应一个301永久重定向响应这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。 5、浏览器跟踪重定向地址 现在浏览器知道了 http://www.google.com/才是要访问的正确地址所以它会发送另一个http请求。这里没有啥好说的 6、服务器处理请求 后端从在固定的端口接收到TCP报文开始它会对TCP连接进行处理对HTTP协议进行解析并按照报文格式进一步封装成HTTP Request对象供上层使用。 7、服务器返回一个 HTTP 响应　 经过前面的6个步骤服务器收到了我们的请求也处理我们的请求到这一步它会把它的处理结果返回也就是返回一个HTPP响应。 HTTP响应与HTTP请求相似HTTP响应也由3个部分构成分别是 l 　状态行 l 　响应头(Response Header) l 　响应正文 HTTP/1.1 200 OK Date: Sat, 31 Dec 2005 23:59:59 GMT Content-Type: text/html;charsetISO-8859-1 Content-Length: 122html head titlehttp/title /head body !– body goes here – /body /html状态行 状态行由协议版本、数字形式的状态代码、及相应的状态描述各元素之间以空格分隔。 格式: HTTP-Version Status-Code Reason-Phrase CRLF 例如: HTTP/1.1 200 OK \r\n – 协议版本是用http1.0还是其他版本 – 状态描述状态描述给出了关于状态代码的简短的文字描述。比如状态代码为200时的描述为 ok – 状态代码状态代码由三位数字组成第一个数字定义了响应的类别且有五种可能取值。如下 1xx信息性状态码表示服务器已接收了客户端请求客户端可继续发送请求。 100 Continue101 Switching Protocols2xx成功状态码表示服务器已成功接收到请求并进行处理。 200 OK 表示客户端请求成功204 No Content 成功但不返回任何实体的主体部分206 Partial Content 成功执行了一个范围Range请求3xx重定向状态码表示服务器要求客户端重定向。 301 Moved Permanently 永久性重定向响应报文的Location首部应该有该资源的新URL302 Found 临时性重定向响应报文的Location首部给出的URL用来临时定位资源303 See Other 请求的资源存在着另一个URI客户端应使用GET方法定向获取请求的资源304 Not Modified 服务器内容没有更新可以直接读取浏览器缓存307 Temporary Redirect 临时重定向。与302 Found含义一样。302禁止POST变换为GET但实际使用时并不一定307则更多浏览器可能会遵循这一标准但也依赖于浏览器具体实现4xx客户端错误状态码表示客户端的请求有非法内容。 400 Bad Request 表示客户端请求有语法错误不能被服务器所理解401 Unauthonzed 表示请求未经授权该状态代码必须与 WWW-Authenticate 报头域一起使用403 Forbidden 表示服务器收到请求但是拒绝提供服务通常会在响应正文中给出不提供服务的原因404 Not Found 请求的资源不存在例如输入了错误的URL5xx服务器错误状态码表示服务器未能正常处理客户端的请求而出现意外错误。 500 Internel Server Error 表示服务器发生不可预期的错误导致无法完成客户端的请求503 Service Unavailable 表示服务器当前不能够处理客户端的请求在一段时间之后服务器可能会恢复正常响应头 响应头部由关键字/值对组成每行一对关键字和值用英文冒号:分隔典型的响应头有 响应正文 包含着我们需要的一些具体信息比如cookiehtml,image后端返回的请求数据等等。这里需要注意响应正文和响应头之间有一行空格表示响应头的信息到空格为止下图是fiddler抓到的请求正文红色框中的响应正文 8、浏览器显示 HTML 解析html以构建dom树 - 构建render树 - 布局render树 - 绘制render树 9、浏览器发送请求获取嵌入在 HTML 中的资源如图片、音频、视频、CSS、JS等等 其实这个步骤可以并列在步骤8中在浏览器显示HTML时它会注意到需要获取其他地址内容的标签。这时浏览器会发送一个获取请求来重新获得这些文件。比如我要获取外图片CSSJS文件等类似于下面的链接 图片http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif CSS式样表http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css JavaScript 文件http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

1. 关于一些兼容性 event的兼容性 其它浏览器window.event 火狐下没有window.event所以用传入的参数ev代替 最终写法var oEvent ev || window.event 事件源的兼容性 其它浏览器event.target IE下为event.srcElement 最终写法var target event.target || event.srcElement 阻止事件冒泡 其它浏览器event.stopPropagation() IE下为window.event.cancelBubble true 阻止默认事件 其它浏览器e.preventDefault() IE下为window.event.returnValue false 14.offset、scroll、client的区别 client: Event.clientX是指鼠标到可视区左边框的距离。 Event.clientY是指鼠标到可视区上边框的距离。 clientWidth是指可视区的宽度。paddingwidth clientHeight是指可视区的高度。 clientLeft获取左边框的宽度。 clientTop获取上边框的宽度。 offset: offsetWidth是指div的宽度包括div的边框 offsetHeight是指div的高度包括div的边框 offsetWidth、offsetHeight 的计算width/height padding border offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离 offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
   scroll: scrollTop是指可视区顶部边框与整个页面上部边框的看不到的区域。 scrollLeft是指可视区左边边框与整个页面左边边框的看不到的区域。 scrollWidth是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度包括边框 scrollHeight是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度包括边框
   15.实际上使用 new 调用构造函数时会依次执行下面的操作 1.创建一个新对象 2.构造函数的 prototype 被赋值给这个新对象的 proto 3.将新对象赋给当前的 this 4.执行构造函数 5.如果函数没有返回其他对象那么 new 表达式中的函数调用会自动返回这个新对象如果返回的不是对象将被忽略 16.什么是闭包 闭包就是能够读取其他函数内部变量的函数在本质上闭包是将函数内部和函数外部连接起来的桥梁。 1.优点 可以读取函数内部的变量 避免了全局污染 2.缺点 变量不会被收回消耗的内存 使用不当会造成内存泄漏等问题 总结 嵌套函数中外部函数可以通过闭包访问外部函数
2. 如何进行网站性能优化 content方面 减少HTTP请求合并文件、CSS精灵、inline Image 减少DNS查询DNS缓存、将资源分布到恰当数量的主机名 减少DOM元素数量 Server方面 使用CDN 配置ETag 对组件使用Gzip压缩 Cookie方面 减小cookie大小 css方面 将样式表放到页面顶部 不使用CSS表达式 使用不使用import Javascript方面 将脚本放到页面底部 将javascript和css从外部引入 压缩javascript和css 删除不需要的脚本 减少DOM访问 图片方面 优化图片根据实际颜色需要选择色深、压缩 优化css精灵 不要在HTML中拉伸图片 18.你有用过哪些前端性能优化的方法 1.减少http请求次数CSS Sprites, JS、CSS源码压缩、图片大小控制合适网页GzipCDN托管data缓存 图片服务器。 2.前端模板 JS数据减少由于HTML标签导致的带宽浪费前端用变量保存AJAX请求结果每次操作本地变量不用请求减少请求次数 3.用innerHTML代替DOM操作减少DOM操作次数优化javascript性能。 4.当需要设置的样式很多时设置className而不是直接操作style 5.少用全局变量、缓存DOM节点查找的结果。减少IO读取操作 6.避免使用CSS Expressioncss表达式)又称Dynamic properties(动态属性) 7.图片预加载将样式表放在顶部将脚本放在底部 加上时间戳 8.避免在页面的主体布局中使用tabletable要等其中的内容完全下载之后才会显示出来显示比divcss布局慢 19.谈谈性能优化问题 代码层面避免使用css表达式避免使用高级选择器通配选择器 缓存利用缓存Ajax使用CDN使用外部js和css文件以便缓存添加Expires头服务端配置Etag减少DNS查找等 请求数量合并样式和脚本使用css图片精灵初始首屏之外的图片资源按需加载静态资源延迟加载 请求带宽压缩文件开启GZIP 20.前端性能优化最佳实践 性能评级工具PageSpeed 或 YSlow 合理设置 HTTP 缓存Expires 与 Cache-control 静态资源打包开启 Gzip 压缩节省响应流量 CSS3 模拟图像图标base64降低请求数 模块延迟(defer)加载/异步(async)加载 Cookie 隔离节省请求流量 localStorage本地存储 使用 CDN 加速访问最近服务器 启用 HTTP/2多路复用并行加载 前端自动化gulp/webpack
3. 介绍一下你对浏览器内核的理解 主要分成两部分渲染引擎(layout engineer或Rendering Engine)和JS引擎 渲染引擎负责取得网页的内容HTML、XML、图像等等、整理讯息例如加入CSS等以及计算网页的显示方式然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核 JS引擎则解析和执行javascript来实现网页的动态效果 1.IE浏览器内核Trident内核也是俗称的IE内核 2、Chrome浏览器内核统称为Chromium内核或Chrome内核以前是Webkit内核现在是Blink内核 3、Firefox浏览器内核Gecko内核俗称Firefox内核 4、Safari浏览器内核Webkit内核 22.HTML5的离线储存怎么使用工作原理能不能解释一下 原理HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)通过这个文件上的解析清单离线存储资源这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时浏览器会通过被离线存储的数据进行页面展示 如何使用 manifest 文件可分为三个部分 CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接且不会被缓存 FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面比如 404 页面 页面头部像下面一样加入一个manifest的属性 在cache.manifest文件的编写离线存储的资源 在离线状态时操作window.applicationCache进行需求实现CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: /offline.html23.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢 在线的情况下浏览器发现html头部有manifest属性它会请求manifest文件如果是第一次访问app那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了那么浏览器就会使用离线的资源加载页面然后浏览器会对比新的manifest文件与旧的manifest文件如果文件没有发生改变就不做任何操作如果文件改变了那么就会重新下载文件中的资源并进行离线存储。 离线的情况下浏览器就直接使用离线存储的资源 24.请描述一下 cookiessessionStorage 和 localStorage 的区别 cookie是网站为了标示用户身份而储存在用户本地终端Client Side上的数据通常经过加密cookie数据始终在同源的http请求中携带即使不需要记会在浏览器和服务器间来回传递sessionStorage和localStorage不会自动把数据发给服务器仅在本地保存 存储大小 cookie数据大小不能超过4k sessionStorage和localStorage虽然也有存储大小的限制但比cookie大得多可以达到5M或更大 有期时间 localStorage 存储持久数据浏览器关闭后数据不丢失除非主动删除数据 sessionStorage 数据在当前浏览器窗口关闭后自动删除 cookie 设置的cookie过期时间之前一直有效即使窗口或浏览器关闭 25.Doctype作用? 严格模式与混杂模式如何区分它们有何意义? 声明位于文档中的最前面处于 标签之前。告知浏览器的解析器 用什么文档类型 规范来解析这个文档 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行 在混杂模式中页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现 26.HTML5 为什么只需要写
   制定SGML的基本思想是把文档的内容与样式分开。 HTML5 不基于 SGML因此不需要对DTD进行引用但是需要doctype来规范浏览器的行为 而HTML4.01基于SGML,所以需要对DTD进行引用才能告知浏览器文档所使用的文档类型 27.在css/js代码上线之后开发人员经常会优化性能从用户刷新网页开始一次js请求一般情况下有哪些地方会有缓存处理 dns缓存cdn缓存浏览器缓存服务器缓存
4. 你能描述一下渐进增强和优雅降级之间的不同吗 渐进增强针对低版本浏览器进行构建页面保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级一开始就构建完整的功能然后再针对低版本浏览器进行兼容。 29.如何创建块级格式化上下文(block formatting context),BFC有什么用 BFC(Block Formatting Context)块级格式化上下文是一个独立的渲染区域让处于 BFC 内部的元素与外部的元素相互隔离使内外元素的定位不会相互影响 触发条件 (以下任意一条)float的值不为none overflow的值不为visible display的值为table-cell、tabble-caption和inline-block之一 position的值不为static或则releative中的任何一个 在IE下, Layout,可通过zoom:1 触发 BFC布局与普通文档流布局区别 普通文档流布局:浮动的元素是不会被父级计算高度 非浮动元素会覆盖浮动元素的位置 margin会传递给父级元素 两个相邻元素上下的margin会重叠 BFC布局规则:浮动的元素会被父级计算高度(父级元素触发了BFC) 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC) margin不会传递给父级(父级触发BFC) 属于同一个BFC的两个相邻元素上下margin会重叠 开发中的应用阻止margin重叠 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中) 自适应两栏布局 可以阻止元素被浮动元素覆盖 30.清除浮动的几种方式各自的优缺点 1.额外标签法在最后一个浮动标签后新加一个标签给其设置clearboth不推荐 优点通俗易懂方便 缺点添加无意义标签语义化差 2.父级添加overflow属性父元素添加overflow:hidden不推荐 通过触发BFC方式实现清除浮动 优点代码简洁 缺点内容增多的时候容易造成不会自动换行导致内容被隐藏掉无法显示要溢出的元素 3.使用after伪元素清除浮动推荐使用 .clearfix:after{/伪元素是行内元素 正常浏览器清除浮动方法/content: ;display: block;height: 0;clear:both;visibility: hidden;}.clearfix{*zoom: 1;/*ie6清除浮动的方式 号只有IE6-IE7执行其他浏览器不执行/优点符合闭合浮动思想结构语义化正确 缺点ie6-7不支持伪元素after使用zoom:1触发hasLayout. 4.使用before和after双伪元素清除浮动 .clearfix:after,.clearfix:before{content: ;display: table;}.clearfix:after{clear: both;}.clearfix{*zoom: 1;优点代码更简洁 缺点用zoom:1触发hasLayout.