高效web前端开发 book
PageSpeed 出自google公司 是一款 免费的工具 性能分析
Timeline网页交互 和渲染 所要花费的时间
Profile谁 可以查看网页cpu以及内存占有的情况报告
Audits 中提供了各种资源及配置的优化建议和未使用的css规则的列表
代码的压缩
文本服务器开启Gzip压缩。
UglifyJs 不仅仅是一个压缩工具，同事具有JS语法分析和代码美化工能
图片压缩工具 以在线工具居多 TinyPNG 压缩 PNG格式图片。
使用 JPEGmini 压缩 JPG格式图片
本地应用程序 推荐使用 ImageOptim
发布阶段 也可以用 ANT来构建 代码 和 资源压缩的任务。
id 用 _ 连接 class 用 - 连接。
css文件 头部 也可以写上注释 还有就是 解释性说明
文件 版本 版权信息 作者等
js注释
局部变量 采用首字符小写 其他单词首字母大写的方式
面向对象 私有接口小写 公有接口大写。
给jquery 变量 前面加上 $前缀
验证页面大麦
HTML Validator自动纠正 和美化代码
更好的语义化
用<del> 代替 <s> <strike>
<abbr>表示的是一个缩写的 标签 内容缩写
<noscript>表示 没有 js的时候 使用的。替代方案 但是有的时候会无效
较好的做法是 不能使用javascript的时候 传值到服务器上 有服务期计算 返回
可以设置页面在禁用js的情况下 跳转网页 百度的做法是
<noscript><meta http-equiv = “refresh” content = “0; url=/baidu.html?from=noscript”/></noscript>
meta 的属性
name 元信息
http-equiv 指令请求
content
charset 字符编码
name content 构成 名/值 对用于描述 网站信息
名称包括 application-name author description generator
http-equiv属性 和content属性 组合，设置特定的HTTP指令
content-type default-style(很少用) refresh （前三个已经确定）content-language set-cookie
<meta http-equiv=”refresh” content =”300”> 5分钟后刷新
务必在 <title> 标签 之前 设置charset
可以手动设置一些页面的兼容模式 不是不标准 但是是常用的meta
<meta http-equiv=”x-UA-Compatible” content=”IE=8”/> 从ie8 开始支持
会在 IE9以及以下浏览器激活chrome frame 强制IE使用chrome frame 渲染页面
<meta http-equiv=”x-UA-Compatible” content=”chrome = 1”/>
是设备在移动设备中显示正常
<meta name=”viewport” content=”width = device-width,initial-scale = 1,maximum-scale = 1”>
IE 浏览器的固定网站的功能
<meta name=”misapplication-task” content=”name=”xinxianshi”;action-uri=http://www.renren.com/home;icon-uri=http://a.xnimg.cn/n/res/icons/newsfeed.ico” />
语义化标签
div 和 span 是没有语义化的
在css 中是可以用 content=“|” 来设置内容，而不必所有内容都放在html中
.spliter:before
:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
使用可以平稳退化 而且具有语义化的标签实现
<li class="reader-action-library">libarary</li> 又由于文字 不用显示
.reader-main-action li{
text-indent:-99999px;
}
没有禁用css时候不会显示文字 当禁用css 的时候 能够平稳显示
html 新加入的标签
<header> <footer> <article> <section> <nac> <aside>
提高html 的 语义 重要属性 alt title
上面的元素一个在左边 一个在右边 下面的元素要想不受上面的元素的影响
需要先清除浮动 clear：both；
text-indent 来达到影藏文字的目的
使用table 标签构建 登陆 表单 语义化 不明确 而且代码臃肿
最好用label 展现登录表单的文本标签
label 实现关联 用for 后面指向关联的 标签id 在单选框 和 多选框 有很大的 优点
<form>
<fieldset disabled> // 表单分组 并且禁止输入
<legend>健康信息</legend> // 标题信息
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
tabindex 设置tab顺序切换
required = ‘true’ 即输入 不能为空
块元素可以包含其他元素
行内元素只能包含行内元素
html5 不必记住这些 更多的是语义化的记忆
html5 <meta charset=”UTF-8”> //表示的是定义页面编码
在HTML4.01 中<meta http-equiv=”content-Type” content = “text/html;chars=utf-8”>
变得更为简洁方便
html5 引入css样式表
<link rel=”stylesheet” href=”/cssdafda”> //都不用再次设定type=“text/css”
引入js
<strcipt src=”afdaf.js”></script> //type=“text/javascript”
新的输入类型的空间会得到平稳的降级
script 的 两个属性 defer 和 async 只有在src 设置了以后才会作用
defer 表示 并行下载 并且不会修改dom树 最后加载执行
async 表示 异步加载 下载完成后 会立刻直接执行代码 有依赖关系 不能使用这个
如果页面有内联的脚本依赖于加载的脚本，则不适合使用defer属性。
<base> 设置a 标签的 默认 target 比如 _blank
属性值 自定义 data-length=“xx” 读取这个属性值 .dataset[‘length’] 设置同样
<i> <b> <u> <small> 斜体 黑体 下划线 小字体
h5 有很多的标签 废弃了 strike 和 big 。。
还有一些标签的属性被移除
ie 老的 可以 通过 creatElement 方法 产生的标签
框架 支持 h5 旧了浏览器 html5shim
Modernizr 表示监测新特性的框架
type 都是 总共的类 和 格式名称
<sourc src=”video.mp4” type=”video/mp4”>
<iframe 插入一些东西>
css 中的文件 一个默认样式文件 一个共有文件 一个IE特有的文件
在页面中使用IE浏览器独有的条件注释方式引用此文件
<!—[if lt IE 8]>
<link rel=stylesheet’ href=”ie-style.css” />
<![endif]-->
要对html5中的新标签 在 IE89 中显示正常要定义一个display cssreset 中的一项要求
YUI框架似乎很强大。
css 中的样式排序 字母从小到大 推荐
按照对页面影响的大小排序 形象布局排在前面 不影响布局排在后面
csscomb css 免费自动化排序程序
css 权重
ID>类 伪类 属性选择器 >标签类型 伪对象 > 通配符
尽量 不用id选择器 复用的css 会减少
为了提高兼容样式的优先级 可以再更元素 <html> 或者是 <body>上正对 不同的刘来气添加不同的样式类
<!—[if lt IE 8]> // 还有一种方法 <!—[if gt IE 8]><!--> <html> <!--<![endif]-->
<html class=”ie7”>
<![endif]-->
相对单位 和 绝对单位 px pt cm mm in pc
相对单位 视窗相对单位vw vh vmin vmax 字体相对单位em ex ch rem
尽量设置性对尺寸 当整体模块更改时就不需要更改 模块内部子模块的尺寸了。
可以显式的设置body的字体大小为 16px 后面的 子模块 用 0.8 em 之类的
rem 是根据 根元素设定 相对值的
css的匹配规则和我们的习惯是相反的 是从右向左的。
避免使用通配符 *
因为 id选择器都是唯一的 前面加上标签名 无意识画蛇添足 增加匹配时间
css selectors Test 表示的是测试css 的开销
尽量不要设定图片的大小 正价系统渲染的cpu的开销
缩略图 和 正常的大图片不要使用相同的图片 分成两个图片
sprint图 推荐长*宽 《=2500 雪碧图最好控制在200k以内 图片态度啊会消耗更多的传输时间
csssprit 生成器 Generator在线的
css sprit cow 雪碧图 css 代码生成器
spriteMe 通过分析网站 产生雪碧图 和对应的css 代码 *****挺好的吧
css 很多属性是可以继承的 color font line-heighttext-align text-tansform
chrome 可以有工具 可以出 不必要的 css
audits 中的remove unused cssrules
针对特定的浏览器前缀 -webkit chrome safari
firefox -moz
ie -ms opera -o
自动化添加浏览器前缀
Perfixr autoperfixr
html5please 对应的建议网站
JS
避免全局变量污染 封装在一个变量对象上面 var myCurrentAction = {
length:0,
init:function(){},
action:function(){}
}
var myCurr = (function () {
var length = 0;
function init(){}
function action(){}
return init:init;// 外部代码访问init()方法是 可以通过调用 myCurr.init 返回 公开的接口
})()
null 与 undefined 自己 互相 比较 为true
原始类型（数值，布尔，字符类型） 都会转换为数值类型进行比较
对象 和原始类型比较时 会将对象对象转换为原始类型进行比较
with(object){
}
js运行的时候会给with单独建立一个作用于 这个作用于里的变量变为了局部变量
避免 使用with 只有运行时才知道 变量属于那个对象
with 兼容问题 ecma 5 和 6 在width [] 参数上实现 不同
eval(“x = 1;y = 2;x*y”) 就是把字符串的内容作为代码执行。 存在安全问题
最好不要编写浏览器判断逻辑 直接检测浏览器特性支持
只要在 script 中添加 如下
“use strict”;
最好不要在全局中使用严格模式
最好写在 函数中
JS代码检查工具 JSHint
JS 可以设置 obj.style.cssText += “border:1px solid #f00”
上述不是最佳做法 最佳做法是更改 class
通过 innerHTML 生成 元素的内部子元素
<script id = “xxx” type=”text/x-tmpl”>
</script>
当需要获取模板代码的时候 通过
var infoTemplate = document.getElementById(‘main_info’).innerHTML;
<template> HTML5中的标签
Mustache 模板系统
mvc CMV
JS模块 化 规范 主要有两种 commonjs 和 amd
同步 与 异步加载模块 一个主要用在 服务器 和一个主要用在前端
实现AMD 模块的 js库 主要有requireJS
Ajax 不能滥用 否则 替换y一整个 ui 可以 换页面 破坏浏览器上的 后退按钮jquery有相关插件
JS 是单线程 阻塞状态下下载 和 加载的
推荐 把js放在 body的底部
defer
告诉浏览器 这个js代码不会产生任何页面内容，因此浏览器可以在加载此引用时继续解析页面的后续内容。
按需求加载
少用forin
js 不存在 块作用域
多个函数嵌套定义的时候会形成作用域包含的关系关系称为 作用域链
内部作用多次外部的数据 精良简写为一次
var doc = document;
prototype 原型对象
实例上的属性和方法 来自自身 和和对应的原型对象。
原型链上的对象和属性 频繁读取会影响性能。
DOM 和js 是存储到两个不相干的模块中的 模块的交互会导致性能的损耗
而且dom的重排和重绘 也会导致 性能的损耗
DOM 的增加 和删除 和修改 可见DOM元素。
请求 DOM 元素布局信息 会造成很到的性能损耗 offersetTop clientX
频繁修改DOM样式
ele.style.border …..
不提倡 合并为一种
优化 更改classname cssText +=
克隆 dom 内存操作
var old = document.daadfafdsaf
var clone = old.cloneNode(true);
动画效果 设定为 fixed 或者是 absolute 避免页面的重新排布。
事件 绑定过多 会导致 性能变差 最好是 使用冒泡机制 在父元素上绑定事件即事件托管
利用TIMELINe 工具 chrome
在线代码性能分析工具 jsPerf
常见的web前端攻击方式
XSS 尽一切 办法在浏览器页面上运行 不是 浏览器的代码
csrf 可以没有 js参与
DDos
劫持 上面覆盖一个iframe
cookie 设置为 HttpOnly禁止js操作cookie
viewport 对移动端的支持
兼容移动端 使用 流式布局 百分比定宽
借用 media queries 技术
@media (max-wdith:600px){
.facet_sidebar{
display: none;
}
}
/*按照上面的从大到小 编写相应的 媒体查询 显示 特定的 html*/
正对 不同的设别像素比 设定不同清晰的图片
@media only screen animation-delay: (min-device-pixel-radio:1.5){
#my-image{
background:url(high.png);
}
}
/*同样也可以用图片的方法*/
background-image:image-set(
/*表示像素 比 是1 和 2 */
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
更多的是使用 技术类库 picturefill
Bootstap 响应式设计 有关
Howtogomo 检查网站对移动设备的兼容性效果
移动端站点一般选取桌面端网站的二级域名 m开头
监测移动设备的 信息 use-agent
设计移动应用为单页模式 避免页面跳转
移动端开发框架 jquery mobile
chrome 中有相关的技术 可以实现手机端 开启debug 然后电脑端 开始调试
希望浏览器能够自动识别电话号码
<meta name=”format-detection” content=”telephone=yes”>
<a href=”tel:1-406-666-xxxx”>ddafdaf</a> 电话
<a href=”sms:1-406-666-xxxx”>ddafdaf</a> 短信
移动端 尽量少用 table 和 iframe
用 ul ol 代替
图表类型的字体 Font Awesome
内联图片 Base64
一些不需要长按跳出对话框的 方法
user-select：none;
mouse相关事件 有对应的手势相关事件
tab 事件 是click事件的模拟 因为click事件在移动端 会造成300ms的延迟
还有一个tabhold事件 通过实践判定是哪一个事件~
在web移动开发的时候 避免使用Timer来完成需要准确控制时间的任务。
