当前位置: 首页 > Web前端 > HTML

HTML&CSS&HTTP

时间:2023-04-02 17:21:19 HTML

1.link和@import区分从属关系,link是一个html标签,@import是css提供的语法规则;加载顺序兼容性dom和js可控性2.浏览器理解并渲染网页资源,这里的资源是向服务器请求的。资源通常有html、图片、pdf等格式。用户使用URL指定资源位置。浏览器分为外壳和内核两部分;参数设置等。内核是核心。核心是引擎:渲染引擎??和js引擎。渲染引擎在浏览器窗口中显示请求的内容;js引擎解析执行javascript,实现网页动态效果。由于js引擎越来越独立,现在内核指的就是渲染引擎。常用内核:IE浏览器三叉戟,兼容性差;火狐浏览器geoocko功能强大,兼容性好,但比较耗资源;打开浏览器presto,速度快,兼容性一般;safari浏览器webkit,速度快,兼容性一般;GoogleChromeblink实际上是webkit的一个分支。现在欧朋正在和谷歌合作开发blink。-浏览器渲染原理,见下图3、浏览器架构用户界面主流程(控制浏览器的地址栏、书签栏、后退和前进按钮,以及浏览器不可见的部分,如网络请求和文件访问)渲染流程(kernel)渲染引擎(界面渲染)js引擎(脚本执行)执行栈事件触发线程(事件处理)消息队列microtaskmacrotask网络异步线程定时器线程3.浏览器渲染原理分析接收文档,构建Dom树解析css,生成css规则tree通过domapi和cssomapi解析js,脚本,操作dom树和css规则树(浏览器解析js,defer,asycn)基于dom树和css规则树构建渲染树布局,渲染树没有大小和位置当它建成时。生成后,浏览器根据渲染树进行布局(重绘、回流)绘制,遍历渲染树调用渲染对象的paint方法将其内容显示在屏幕上。4、什么是重绘和回流,如何减少回流重绘:当渲染树中的某些元素需要在不影响布局的情况下改变外观,比如颜色。Reflow:布局和几何属性的变化,如:宽度,高度,定位,字体等。Reflow必须按规律重绘,重绘不一定会引起reflow。(尽量减少回流)5.如何减少回流使用transform代替top代替table布局,小改动导致整个table重新布局,不要一一修改DOM样式,预先定义好class并修改dom的className,不要把节点的属性值当作一个循环变量6、cookie、sessionStorage和localStoragecookie是网站保存在用户本地终端的数据(一般是加密的),用来识别用户的身份。cookie数据始终携带在同源http请求中,在浏览器和服务器之间来回传递,一直有效,直到设置的过期时间到期。可以传输的数据不超过4k。sessionStorage和localStorage是html5提供的两种浏览器本地存储方式,同样可以存储5M或者更大的数据。sessionStorage数据保存在浏览器中,可以在同源同窗口共享数据,当前窗口关闭后失效。localStorage数据存储在用户本地,可以在同源页面之间共享。除非手动删除,否则它始终有效。7、iframe的缺点是会阻塞主页面的onload事件。window的unload事件需要在所有iframe执行完毕后触发。搜索引擎无法识别iframe中的内容,不利于SEO。浏览器的后退按钮无效。页面上可能有多个滚动条。小屏设备无法完整显示所有内容,影响页面的并行加载,因为iframe和主页面共享连接池。8、如何实现浏览器中多个标签页之间的访问?可以调用localStorage本地存储方法。当在另一个浏览上下文中添加、修改或删除localStorage时,将触发存储事件。通过监听存储事件并控制其取值,实现页面间的通信;使用websocket,因为websocket协议可以实现服务器推送,所以服务器可以充当中介,标签页向服务器发送数据,服务器推送转发给其他标签页;使用sharedWorker,兼容性,只在Chrome9中实现。如何在页面上实现一个圆形的可点击区域边框-radius,当border-radius等于长宽相同的元素的一半时,一个圆形的可点击区域即可实现了。使用map+area标记img图片的热点区域;用canvas画参考文档《如何在页面上实现一个圆形的可点击区域》10、meta标签的作用?常用的元标记?meta标签的定义和描述meta标签是一个html文档,head标签中解释文档的标签有两个属性值:name和http-equiv。每个属性对应不同的参数值,实现不同的功能。主要有以下功能:搜索引擎优化定义页面语言控制网页展示窗口网页评分评价名称属性主要用于描述网页,对应的属性值为content,contentcontent主要是为了方便搜索引擎机器人查找和查找分类信息。使用http-equiv属性,相当于http文件头的作用,向浏览器传递信息,帮助浏览器正确和准确显示内容的网页。常用元标签——优先使用最新版本的IE和Chrome——页面描述-页面关键字-页面作者-搜索引擎抓取11、前端性能优化前端性能优化主要是提高页面的加载速度,优化用户的访问体验。认为可以从这几个方面来进行优化第一个方面是页面的内容(1)通过文件合并、csssprite、base64等方式减少HTTP请求的数量,避免请求过多导致的等待情况。(2)通过DNS缓存等机制减少DNS查询次数。(3)通过设置缓存策略,缓存常用和不变的资源。(4)使用延迟加载减少需要请求的资源。页面的第一个屏幕被加载。延迟加载当用户需要访问资源时,他们请求加载它们。(5)通过用户行为,对某些资源采用预加载的方式,提高用户需要访问资源时的响应速度。第二个方面是服务器方面(1)利用CDN服务提高用户对资源请求的响应速度。(2)在服务器端启用Gzip、Deflate等压缩传输的资源以减小文件的大小。(3)尽量减小cookie的大小,并通过将静态资源分配给其他域名,避免在请求静态资源时携带不必要的cookie。第三个方面是CSS和JavaScript(1)将样式表放在页面的head标签中,减少页面的第一次访问。渲染时间。(2)避免使用@import标签。(3)尽量将js脚本放在页面底部或者使用defer或者async属性,避免脚本加载执行阻塞页面渲染。(4)通过JavaScript和CSSCompress文件来减小文件大小。12、介绍BFC及其应用BFC(blockformatcontext)块级格式化上下文,一个独立的容器,内外元素互不干扰。1、如何创建BFC:1).html根元素2)float3)绝对定位(absolute)4)展示是table布局还是elastic布局;5)溢出不可见2、应用1)清除浮动2)防止相同BFC容器中相邻元素的外边距重叠问题13、HTTPS、HTTPS和HTTP的区别?HTTPS基于HTTP协议,通过SSL或TLS(可视为SSL3.0)提供加密数据处理、对方身份认证、数据完整性保护等功能。特点如下:*内容加密:采用混合加密技术,中间人无法直接查看明文内容*身份验证:客户端通过证书认证访问自己的服务器*数据完整性保护:防止传输的内容被冒充或篡改中间商与HTTPS与HTTP的主要区别如下:1.HTTPS协议需要向CA(CertificateAuthority)申请证书。一般免费证书很少,需要收费。2、HTTP协议运行在TCP之上,所有传输的内容都是明文。HTTPS运行在SSL/TLS之上,SSL/TLS运行在TCP之上,所有传输的内容都是加密的。3、HTTP和HTTPS使用完全不同的连接方式和不同的端口。前者为80,后者为443。4、http的连接非常简单,无状态;HTTPS协议是由HTTP+SSL协议构建的网络协议,可以进行加密传输和身份认证,可以有效防止运营商劫持,解决了防劫持的一大难题,比http协议更安全。