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主要是为了方便搜索引擎机器人查找和查找分类信息。使用
