Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

前端知识点

zhangjie edited this page Oct 13, 2020 · 4 revisions

盒子模型

  1. 所有HTML元素可以看作盒子
    盒子模型
    1.1 Margin(外边距) - 清除边框外的区域,外边距是透明的
    1.2 Border(边框) - 围绕在内边距和内容外的边框
    1.3 Padding(内边距) - 清除内容周围的区域,内边距是透明的
    1.4 Content(内容) - 盒子的内容,显示文本和图像
  2. 指定一个 CSS 元素的宽度和高度属性时,只是设置内容区域的宽度和高度
    2.1 完整大小的元素,还必须添加内边距,边框和边距
    div {
     width: 300px;
     border: 25px solid green;
     padding: 25px;
     margin: 25px;
    }
     指定padding、margin时 按照上、左、下、右的方式指定
    

js

  1. 聚焦:focus
  2. onkeyup事件:在键盘按键被松开时发生
  3. 回车键:event.keyCode = 13
<script type="text/javascript">
	focusMethod = function getFocus(id) {
		if(event.keyCode == 13){//回车键
			document.getElementById(id).focus();
		} 		
	}
</script>

Waiting (TTFB)过长原因分析

  1. Waiting (TTFB):浏览器正在等待响应的第一个字节
    1.1 Content Download:浏览器正在接收响应
  2. 浏览器输入地址: chrome://net-export/
    2.1 点击start Logging to Disk
    2.2 选择日志保存文件
  3. 导入文件:https://netlog-viewer.appspot.com/#import
    3.1 切换到Events(错误消息会以红色文字显示)
    --->右边出现的便是该问题请求的详细日志
  4. 日志解读 4.1 关注主要耗时步骤
    --> 例如:HTTP_TRANSACTION_SEND_REQUEST(发送请求头)、HTTP_TRANSACTION_READ_HEADERS(读取响应头)

Clone this wiki locally

AltStyle によって変換されたページ (->オリジナル) /