html
qq_36631168
这个作者很懒,什么都没留下…
展开
-
JS-DOM操作
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点(2)添加、移除、替换、插入 appendChild() removeChild() repla转载 2016-11-10 13:36:23 · 177 阅读 · 0 评论 -
页面从输入 URL 到页面加载显示完成的过程
分为4个步骤: (1),当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。 (2), 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文转载 2016-11-11 14:45:31 · 288 阅读 · 0 评论 -
项目管理
先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等; 编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行); 标注样式编写人,各模块都及时标注(标注关键样式调用的地方); 页面进行标注(例如 页面 模块 开始和结束); CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css转载 2016-11-11 15:24:27 · 238 阅读 · 0 评论 -
异步加载和延迟加载
1.异步加载的方案: 动态插入script标签2.通过ajax去获取js代码,然后通过eval执行3.script标签上添加defer或者async属性4.创建并插入iframe,让它异步执行js5.延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。转载 2016-11-11 15:41:21 · 532 阅读 · 0 评论 -
css阻塞与js阻塞
js的阻塞特性:所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。嵌转载 2016-11-11 18:43:31 · 3473 阅读 · 0 评论 -
JS-无阻塞加载
将脚本放在底部。还是放在head中,用以保证在js加载前,能加载出正常显示的页面。标签放在前。成组脚本:由于每个标签下载时阻塞页面解析过程,所以限制页面的总数也可以改善性能。适用于内联脚本和外部脚本。非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在window.onload事件发出后开始下载代码。 (1)defer属性:支持IE4和fierfox3.5更高版本浏览器 (转载 2016-11-11 19:00:41 · 277 阅读 · 0 评论 -
JS-事件处理程序
事件处理程序在DOM中定义了一些事件, 而响应某个事件的函数就叫事件处理程序(或事件侦听器)。事件处理程序的名字一般以“on”开头,例如:onclick等事件冒泡与捕获事件流指的是页面中接收事件的顺序,IE,火狐和chrome浏览器都是事件冒泡,所谓是事件冒泡指的是事件最开始由最具体的元素接收,然后逐级向上传播到不具体的节点。而事件捕获则正好相反,事件捕获是由Netscap转载 2016-11-11 19:25:28 · 828 阅读 · 0 评论 -
事件处理机制
事件:1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。区别IE与火狐的事件机制:IE是事件冒泡、firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件。阻止冒泡: ev.stopPropagation();注意旧ie的方法 ev.cancelBubble = true;转载 2016-11-11 21:19:06 · 291 阅读 · 0 评论 -
网站重构
网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。对于传统的网站来说重构通常是:表格(table)布局改为DIV+CSS使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)对于移动平台的优化针对于SEO进行优化深层次的网站重构应该考虑的方面减少代转载 2016-11-11 21:51:25 · 486 阅读 · 0 评论 -
性能优化方法
(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。 (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数 (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。转载 2016-11-11 14:27:31 · 308 阅读 · 0 评论 -
优雅降级和渐进增强
优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面转载 2016-11-11 14:06:40 · 338 阅读 · 0 评论 -
网站重构
应用web标准进行设计(第2版):99%的网站都需要被重构转载 2016-11-11 14:04:39 · 453 阅读 · 0 评论 -
HTML与XHTML之间的区别
1.所有的标记都必须要有一个相应的结束标记2.所有标签的元素和属性的名字都必须使用小写3.所有的XML标记都必须合理嵌套4.所有的属性必须用引号""括起来5.把所有6.给所有属性赋一个值7.不要在注释内容中使“--”8.图片必须有说明文字转载 2016-11-10 11:58:30 · 331 阅读 · 0 评论 -
<!DOCTYPE>声明
(1)、 声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。 (2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。(3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。(4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。转载 2016-11-10 11:10:47 · 261 阅读 · 0 评论 -
html 语义化
1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;3,方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;4,便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。转载 2016-11-10 11:06:16 · 207 阅读 · 0 评论 -
html元素分类
大体可分为三大类:1.行内元素、2.块级元素、3.(void)空元素首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;span默认display属性值为“inline”,是“行内”元素。(1)行内元素有:a b span img input sel转载 2016-11-09 17:23:18 · 255 阅读 · 0 评论 -
常见兼容性问题
* png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理.* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。 * 浮动ie产生的双倍距离(IE6双边距问题:在转载 2016-11-10 12:01:39 · 207 阅读 · 0 评论 -
测试代码性能的工具
Profiler, JSPerf(http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout), Dromaeo转载 2016-11-11 09:51:34 · 1017 阅读 · 0 评论 -
FOUC(无样式内容闪烁)
FOUC - Flash Of Unstyled Content 文档样式闪烁 @import "../fouc.css"; 而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。 解决方转载 2016-11-11 11:43:35 · 391 阅读 · 0 评论 -
解决跨域问题
jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面jsonp的原理是动态插入script标签转载 2016-11-11 11:59:27 · 155 阅读 · 0 评论 -
CSS-区别link 和@import
A:(1) link属于HTML标签,而@import是CSS提供的; (2) 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;(3) import只在IE5以上才能识别,而link是HTML标签,无兼容问题; (4) link方式的样式的权重 高于@import的权重.转载 2016-11-11 22:37:24 · 233 阅读 · 0 评论